Made-to-measure suit configurator - the application allows users to generate a close-up preview of a selected set of products and send an order with configuration. As part of the project, besides the source code, we prepared multi-layered graphic models of the suit elements and UX/UI prototypes. In the configurator we included, also an administration panel in Strapi, allowing intuitive upload of predefined models with textures in zip files.
Tools and technologies used
Lead
An online suit configurator that allows users to choose the right material and style the pieces in any way they want. The application in a very comprehensive way allows users to configure a tailor-made suit. In addition to the configurator itself, the project also includes an admin panel, which is a way to manage the available options. The project was entirely made by the Boring Owl team.
Introduction
The project was created on behalf of Signor Leone, a brand that sells suits classified as premium. These types of products are usually tailored individually to the customer, while the store's website does not have an option for customization. The created configurator therefore solves the problem of styling a suit to the customer's needs without the need to contact the store. The customer, with the help of the application, can easily and intuitively check how the chosen configuration looks like. Besides choosing the material, configuration or changing individual elements of a given part of the suit, the user is able to see how different colors of lining or buttons look.
Project schedule
The project was implemented in production in February 2023. Work on the MVP version took just over six months.
July 2022 - November 2022: Product Design
November 2022 - December 2022: Mock-up design
December 2022 - February 2023: Programming the first version of the product + documentation
February 2023: Application testing
Technology stack
- React js
- Next js
- Typescript
- React Hook Form
- Axios
- React Query
- Zustand
- Material UI
- Node js Express js
- Strapi
- Vercel
- PostgresSQL
- Cloudinary
Product design
The first discussions about the project took place long before the work was undertaken. Signor Leone brand is one of the more recognizable in its industry and is famous for the quality of its services therefore it was not easy to meet all expectations. These types of suits usually require consultation with the client mainly because they are tailor-made and every detail is important. The biggest challenge was to make the configurator embody the real suit as well as possible. At the initial stage of designing the app, there was an idea that it should be displayed using a 3D model, but it turned out that with so many variable elements the budget the project envisioned could be exceeded already at the first stage of developing the app. It was therefore decided to use 2D models, the images of which would allow to reflect a little more while maintaining a reasonable model rendering time.
Designing mockups
The process of creating mockups for the suit configurator was a long and challenging task. Initially, after a thorough understanding of the client's business requirements and expectations, the project team defined all the necessary suit attributes that were to be included in the configurator. These attributes included fabric, color, cut, collar style, number of buttons, pocket type and many others.
The next step in the process was to create low-detail mock-ups (wireframes), capturing the functional image of the final product. Through successive iterations, a fully interactive model of the application was created. This was eventually transformed into a high-quality user interface, with the primary goal of non-competing visually with the suit model and ease of use.
MVP version
The first version of the product was quite a challenge, as we had to deal with the complexity of the options available in the left menu, this was due to a number of dependencies arising from the configuration options. In addition to the complex logic that was implemented in the configurator menu one of the biggest challenges was to correctly display the suit model itself. Due to the fact that there are about 25 high-quality images for the jacket alone, both layout and optimization of loading times were not the easiest task. In the meantime, additional configuration options and a second option for displaying on the physical model came along. The MVP version also came with an admin panel, from which one manages the options the configurator has. From this level it is possible, primarily, to add and edit fabrics, button options, manage the prices of individual items, set visibility or even change the description of sewing options. The front-end of the application is based on Next.js mainly because of the wide range of built-in ready-made solutions, among which we can include image optimization. The Zustand library was used to store the global state of the application and Axios and React Query were used to communicate with the backend. Images are stored in Cloudinary and the CMS is based on Strapi. At the client's request, we also prepared detailed documentation of the product including, among other things, test cases. For end-two-end testing, we used the ready-made BugBug tool.