The ask
To creative a never-before-seen personalisation experience for luxury fashion brand Moncler for their first online configurator in preparation for brand’s 70th anniversary.
Deliverables: New Moncler By Me tool for online responsive website.
The Challenge
• Translate a previous in-store experience made with an Unreal engine into a mobile first experience that allows thousand of users to personalise products online simultaneously.
• Elevate personalisation experience to something never seen before in this space.
• Ambitious deadline to launch during Moncler’s 70th anniversary.
• Complex stylistic rules for jacket personalisation.
• Liaising with constrains from third-party tech company.
The process
Discovery & definition phase, followed by design sprints with a tech team building in parallel.
Key Journeys
Defining core areas of configuration experience, starting from entry points in the website to jacket configuration. During this early phase my main focus was to identify key screens from configuration that would assist business on choosing their preferred tech provider.
Areas in yellow were prioritised as key areas of configurator experience we wanted to start working on as this would have the greater impact on selection of tech provider.
A space for creative expression
The business assumption was that users wanted to personalise their jackets by adding their names. This was the behaviour of the original in-store tool; customers could only add their name, surname or their initials.
We run guerrilla interviews at R/GA offices to prove that personalisation goes beyond naming your own jacket. With Moncler by Me, there was the potential to offer a creative platform for customers to express their own individuality.
During interviews, people expressed wanting to add symbols/emojis or messages that went beyond their name, so this was functionality that was later added to the platform.
Early screen explorations for proof of concept
Looked into best personalisation experience across the industry and aimed for having an experience where users interacted with a 3D model that resembled the interaction with a real jacket.
Around Jan/Feb 2022, Moncler found a tech provider called Configure ID that was to provide the technical capability to build Moncler By Me using their webGL, white label, configurator tool.
Golden path
The next phase of the project fleshed out in more detail, every step of the configuration process that shows the majority of functionality at a high level. We spent around four sprints refining and validating each of these areas, in particular the styling section which was the most complex one.
Styling
The most difficult part of the configuration experience was to simplify the stylistic choices created by Moncler’s fashion team.
STYLING: Users could choose to add a monogram in the front, sleeve or edit the back of their jackets, however there were rules that limit how they could combine them for stylistic reasons.
COLOUR PALETTES: Users had to chose from one of four distinct colour palettes created by Moncler, each with countless inventive design combinations that on some scenarios were linked to a styling colour.
all breakpoints
Production phase involved the creation of desktop, tablet portrait and landscape screens in both light and dark mode (default).
Dark mode view of key mobile screens
Light mode view of key tablet screens.
UI library
New modules from configurator screens were cleaned, optimised and added to Moncler’s library.
immersive backgrounds
At the center of this personalisation tool was the aim to create a never-before-seen experience. We called this immersive backgrounds; a way for customers to preview their jackets in a fully immersive 3D setting that help them make a purchase decision.
Early explorations
We started looking at giving contextual content around the jacket to enhance experience, at first with abstract polygons, even city background images and later with realistic environments.
Beyond a static background
Using HDRI images (360 picture that wraps around an object) , we started playing with the concept of being able to move the backgrounds while user rotated the jacket as opposed to just keeping a static flat image in the back. We used Moncler’s iconic black and white mountain photography to give more emphasis to the product colourful configuration.
To a complete 3D background
After struggling to find the right HDRI image we learnt that there was a possibility to fully create a 3D environment from scratch that was supported by configurator tech team.
In a nutshell, we were able to control all the environmental settings and physics to create our own Moncler landscape that leveraged natural motion, physics and lighting to enhance jacket’s surrounding environment.
Moncler’s immersive background
After months of explorations, client and tech liaison, the team settled for a 3D environment that showcases Moncler’s brand by giving it a winter, evening feel. Water was removed and mountains were sculpted to have more snow in its peaks; light was adapted to match the defaulted dark mode inside the configurator.
The result
Moncler By Me was launched on 7 October 2022 and within a week it had sold more than 400 jackets. This project is at the core of Moncler’s plan to offer a bespoke and high end experience to their clients.
Next project
Moncler Evolution
Just Be payments