the challenge
Evolving Moncler’s library to bring consistency, dynamic Figma modules more interactivity and Moncler’s Collection to the forefront (Grenoble, Genius, Main Collection).
Moncler’s collection
To celebrate its 70th anniversary, the business aimed to enhance three collections: Grenoble (skiing), Genius (creative experimentation), and Moncler Collection (everyday wear).
improve interactivity
Injecting new modules to Moncler's design library to enhance interactivity, motion and more dynamism to the site and app.
consolidating design library
Moncler's designers were working in isolation, modules were being created without referencing existing components, leading to design inconsistencies and an outdated and unsynced library.
analysis phase
456 screens analysed, 89 components found, unknown number of variations… resulting on An outdated library not fit for purpose
understanding existing library and
Moncler’s design team needs.
During this phase we learnt how Moncler’s design team used their design library and how they struggled to bring consistency to their designs as the library components evolved in isolation by each of the designers leaving the master library out of date.
unifying design library
the building blocks
Setting design library foundations with a clearer structure to help Moncler’s design team find, use and evolve their own library, their own way.
FOUNDATION
Foundations are attributes that are used by components, modules and pages to keep a consistent branded look & feel throughout the site. E.g. colours, grids & fonts.
COMPONENT
A component is a small repeatable element on the page such as a button, input field or a checkbox. They are smaller and less complex than modules.
MODULE
A module is a collection of components, foundations and graphics elements that make for a more complex component. Modules are repeatable elements used throughout the site and they can have states and variations within them. E.g. carousels, interactive cards, info panels & pop ups modals,
PAGE TEMPLATE
A page serves as the central space where all the various design modules, components, and foundational elements converge harmoniously to create a cohesive screen design.
dynamic components
Building components and modules in a dynamic way helped the team find and reuse library components avoiding duplications and inconsistencies.
Bringing order and meaning
We assigned clear definitions and documented examples in the library so the team could get familiarised and have a way to always look back at their library anytime. We also worked with them on their design process to include regular design checkups to ensure a long lasting evolution of their design.
The Collections
a new taxonomy to increase Moncler’s collection visibility
As part of this work the business wanted to increase visibility of three different audiences: Grenoble, Genius and Moncler Collection,
Moncler Collection
Modern must-haves for both metropolitan
and mountain lifestyles.
Moncler
Grenoble
High Performance skiwear, pieces that fuse Performance and Style, cocooning Après Ski styles and outdoor activewear.
Moncler
Genius
Challenging the boundaries of possibility at the intersection of art, design, entertainment, music, sport, and culture.
Introducing the collections
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum. Cras euismod nunc sed sapien sodales, nec pellentesque libero sodales. Sed ultricies, urna vitae
improving collection signposting
Collection modules helped Moncler introduce its three collections to customers: Grenoble, Genius, and the main Collection.
Clearer Navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum. Integer nec odio. Praesent libero.
Adding interactivity
from a PDF to a dynamic digital experience
Moncler’s design library lacked components with interactivity. As a result the site was looking very static. In the words of Moncler’s boss, it looked like a static PDF.
injecting storytelling with new dynamic modules
We introduced new modules that allowed Moncler’s team to add content to the site in a more interactive way.
Empowering product teams with thematic Content
We also created new modules that helped Moncler’s team add new content by creating themes in order to promote a specific season, product range or collection.
Showcasing content in more interactive ways
From displaying Moncler’s history to promoting a designer collaboration, these new dynamic modules offered a range of new interactions that brought motion and more dynamic content to the website and apps.
An improved design library
cleaning up from the ground up.
We rebuilt Moncler’s entire library from the ground up; we used smart Figma components to speed their work, made all their components resizable and cleaned all their elements by labeling and grouping things properly.
project impact
new interactive modules, an advanced figma library with a new taxonomy to showcase Moncler’s collections.
This project offered A new set of tools to help Moncler’s design team evolve their design in a more efficient and dynamic way.
3%
Unique Visitors
+17%
Time on site
Next
MONCLER BY ME
JUST BE FINANCES