Signor Leone – custom suit configurator. Visualize your tailored wardrobe before visiting the boutique.

This application empowers users to design their own suit ensembles - from selecting fabrics and cuts to choosing lining colors and button types - and submit their bespoke designs for production. Project also involved creating UX/UI prototypes and building an administrative panel, allowing full control over available customization options.

Challenge

• The project aimed to develop a sophisticated suit configurator that:
• Gives customers the ability to fully configure clothing items according to their preferences.
• Offers a realistic preview of the selected options without the need to contact store support.
• Allows administrators to efficiently manage product variants and textures.
• Maintains high performance despite handling a large number of images and variables.

The most demanding part of the project was achieving a lifelike visual representation of the suit while ensuring the system remained smooth and intuitive to use. With the enormous number of possible combinations, optimizing performance and structuring data effectively within the CMS became crucial for the project’s success.

Solution

The Boring Owl team developed a comprehensive technological ecosystem designed to support the entire process of configuring and managing custom suits:

• Frontend: Next.js with TypeScript - provides performance, image optimization and flexibility in logic implementation.
• Application State: Zustand - to manage the global state of the configurator.
• Forms and data handling: React Hook Form, Axios, React Query - provide seamless communication with the backend and data validation.
• Backend and CMS: Node.js with Express and Strapi - manages configuration options, materials and content.
• Database: PostgreSQL - provides an efficient and stable data structure.
• Hosting: Vercel - automatic deployment and application optimization.
• Other integrations:

  • Media storage: Cloudinary - storage and optimization of texture images and models.
  • Testing and documentation: BugBug - end-to-end testing and documentation with test cases.

Key Features

• A 2D interactive configurator that enables real-time visualization of suit designs.
• A sophisticated configuration menu with dynamic option dependencies.
• An admin panel built with Strapi for managing textures, descriptions, pricing, and variant visibility.
• Support for uploading ZIP packages containing graphic models for easy uploading of new configurations.

Results

• Streamlined purchasing process, user can create the configuration on his own without the help of a consultant.
• Reduction of operating costs, the configurator takes over the role of initial consultation with the customer, saving time and resources.
• Increased user involvement and simplification of the purchase journey contribute to stronger sales performance.
• High performance of the application, despite many available options, the application loads instantly and works flawlessly.
• Realistic product visualization builds customer confidence and reduces the risk of returns.

Summary

The configurator developed for the Signor Leone brand is the result of a thoughtful choice of technologies, an intuitive admin interface, and high-quality visualizations. This solution streamlines and automates the made-to-measure suit ordering process, while the application enhances the overall user experience.