Moss London

Custom Suit Configurator

Sartorial suit supplier Moss London approached us to enhance their Custom Suit Configurator, aiming to improve usability for both at-home customers and in-store stylists. While the existing tool was functional, it had low sales and limited engagement, acting more as a playful feature than a serious sales driver. The in-store version also lacked visual appeal and real-time interactivity, making it difficult for customers to view changes as they occurred.
 

Custom Suit Configurator

A man wearing a MOSS tan suit with a matching vest and a light-coloured dress shirt and tie stands confidently in front of a neutral background with geometric textured wall art behind him.
Moss Campaign
MOSS Manchester flagship clothing store interior showcases an assortment of ties and pocket squares in various colours and patterns. In the background, racks of suits are displayed alongside a large illuminated advertisement featuring a stylishly dressed man. Copyright ROTH 2024
MOSS Manchester flagship store

Approach

We conducted field research at MOSS’s Manchester flagship store, engaging with staff and observing customer fittings to understand the in-store stylist workflow and identify areas for improvement. Additionally, we reviewed data from Content Square to uncover user interaction patterns and pain points, and analysed competitor configurators to pinpoint best practices and innovative features. These insights were compiled into a presentation for MOSS stakeholders to guide the redesign of the Custom Suit Configurator.

A screen displaying clothing customisation options on Moss' custom configurator, with filters for fabric type, pattern, and colour on the right, and a blue jacket design preview. To the left, a quote reads, "Visitors who narrow down their options by applying filters are more likely to eventually complete the configuration” with attribution to ContentSquare analysis, 2020.
ContentSqaure Analysis, 2020
A digital collage showcases UX design elements of product configurators for Ray-Ban sunglasses and Nike shoes. The Ray-Ban configurator indicates material type options, while the Nike custom configurator offers extensive customisation choices. A recommendation highlights tailored filtering for easier decisions.
Custom Configurator Competitor Analysis

Journey Mapping

By mapping the configurator journey, we tailored the experience to different entry points (online vs. in-store, homepage vs. product page), ensuring a cohesive and satisfying user experience. We simplified the process by organising the configurator into Parent steps (e.g., Jacket, Trouser) and Child steps (e.g., Fabric, Buttoning), allowing users to focus on one feature at a time. Identifying similarities among Child steps also enabled us to group them into templates, streamlining the workflow and creating a more efficient and cohesive design.

A UX Journey Map titled "Configurator: Parent steps" detailing steps for configuring suits and jackets, trousers, and waistcoats. The custom configurator chart shows steps like Jacket, Trousers, Waistcoat, and Extras, with Example Configurator highlighted. There are notes and a "Sign-in required" step.
Custom Configurator Journey Map
A user interface template illustrating a Custom Suit Configurator process. This custom configurator includes options for lapels, buttons, and pockets, displayed on a model. The screen shows a black blazer with a patterned interior, customisation options, and navigation buttons for style choices.
UI Template Design

Design System

With multiple services such as Moss Hire, Moss Box Subscription, the Custom Configurator tool, and in-store digital points of sale, there was no central source of truth for tone of voice. We led the production of a Design System to establish visual consistency across all platforms. By developing reusable brand and UX components, we ensured a cohesive and recognisable customer experience, resulting in a unified user journey and a strong foundation for future design and development initiatives.

A colour palette titled "Moss Design System 2023" displays various shades. It includes primary gradients from black to white, secondary gradients from dark grey to light grey, and specific colours for sale, success, error, warning, and info with their HEX codes.
Colour Palette
An overview of typography options for MOSS's design system includes primary and fallback font families: Apercu Pro (Bold, Medium, Regular) on the left, and Arial (Bold, Medium, Regular) on the right. Letters A-Z and numbers 0-9 are displayed in each style.
Typography

Similar Projects