Moss London

Transforming The Customiser Experience

MOSS had an existing Custom Suit Configurator that, while functional, struggled to drive meaningful engagement or sales. The tool functioned primarily as a novelty feature rather than a core revenue driver. The in-store version suffered from limited interactivity, preventing customers from visualising their customisation choices in real-time, creating friction in both the at-home browsing experience and the in-store consultation process.

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

breif

Transform the Custom Suit Configurator into a high-performing sales tool that serves two distinct user groups: self-guided customers exploring options independently online, and in-store clients working collaboratively with MOSS stylists. The solution needed to deliver an intuitive, engaging experience that reflects the craftsmanship inherent in MOSS’s tailoring services, with success measured by increased engagement, improved conversion rates, and seamless adoption by in-store teams.

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

Approach

Conducted field research at MOSS’s new flagship store in Manchester, interviewing store staff and the Head of Stores to understand the in-store stylist’s workflow. I observed customer fittings first-hand, gaining invaluable insights into how the configurator needed to support real-world consultations. Collaborated closely with the Head of Design and Head of E-commerce to align on business objectives and brand vision, ensuring the redesign would serve both commercial goals and customer needs.

Reviewed existing data from Content Square to identify user interaction patterns and pain points with the current tool, uncovering where customers were dropping off and what features were underutilised. Analysed competitor configurators across the fashion industry to gather best practices and innovative approaches that could elevate the MOSS experience beyond industry standards.

Presented research findings and strategic recommendations to MOSS stakeholders, establishing a clear direction for the redesign that balanced commercial objectives with user needs and operational realities.

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

From Complexity to Clarity

The solution restructured the configurator around a Parent-Child hierarchy, organising customisation into high-level categories (Jacket, Trouser, Waistcoat) with focused sub-steps beneath. Recognising patterns across multiple Child steps allowed me to develop reusable templates that created consistency while reducing design and development overhead, transforming overwhelming choices into digestible, sequential decisions.

MOSS’s existing Design System became the foundation for visual and functional consistency across the website ecosystem. High-fidelity mockups brought the vision to life, followed by collaborative review sessions with stakeholders that refined the design iteratively before comprehensive handoff documentation ensured smooth implementation by the development team.

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

outcome

The redesigned configurator delivered a significantly more intuitive experience that transformed a fragmented process into a clear, guided journey. The Parent-Child architecture reduced decision fatigue while maintaining the depth of choice that defines true customisation. In-store teams gained a responsive tool that enhanced stylist-customer interactions, and the Design System integration ensured brand consistency across all touchpoints.

The result positioned MOSS’s configurator as a genuine commercial asset, creating a foundation for increased engagement and conversion across both digital and physical retail environments.