Moncler
Simple yet immersive
Bringing Moncler’s new e-commerce website concept to life with a rigirous approach in a fast paced and fully remote environment.
Experience Design
Visual Design
Design Systems
Motion Design
2019
We also worked together with Remo Ruffini (CEO) and Moncler’s internal UX and business teams and created an experience that links the online and offline offerings of the brand.
Our task was to design and bring to life an entirely new experience while making sure it’s flexible and scalable for different use cases. The project aimed to double online revenue within the three years.
In the early stages of a global pandemic, all work had to be created fully remote. With great success, we managed to launch the website while collaborating with team members located in England, Italy, Sweden and Australia.
About
The modular approach, in a page level, allows us to quickly create different set of layouts to adapt new business needs. This way we don’t have be contrained around a page template and quickly create different presentations within the same page.
We can also reuse the modules and interactions along with them and generate a consistent user behaviour throughout the website.
Our main goal was to create a comprehensive modular system that can be flexible and scalable. Using modules instead of templates allowed us to scale the design for different needs.
We made sure each module have its own defult configuration with a set of overrides which gives different editorial layout options to choose from.
Approach
By the end, the design system was refined and matured. It’s now the core of the design process and a guide for designers and developers creating new assets moving forward.
For starters, we analysed the concept designs and identified core building blocks and patterns to set the foundations of the design system.
After the initial rules set, the design system file was a living document that kept evolving and getting updates as we progressed in the project.
Design system
Once the modules created, it was putting the right ones together to build the page. Depending on the season or Moncler’s unique creative collaborations, homepage would adapt to reflect the content.
One of the key signature moments was the shoppable video module, which also presented in the homepage. An advanced interactive module that allows customers purchase the items in the video.
Homepage
Iteration makes the design better and more refined. We started with an early concept for the module and our initial thinking evolved later on.
In early stages, the items and the video were two different elements. We then moved forward with an approach that merges the two together, creating a much more seamless experience.
Shoppable video module
Early concept
Final version
Even though the module contains a quite complex set of interactions, we managed to make it work both on mobile and desktop.
The listing page on desktop, provides more interaction opportunities for us by using the ability to hover on elements.
Customers can easily customise and add items to their bag in a matter of seconds without having to visit the product detail page on desktop.
Listing page interactions
On shop by look pages, both in mobile and desktop, customers can add all items within the look shown in the product card to their cart, right in the listing page.
An elegant, inviting design with set of parallax effects are applied to product detail. The content in certain sections, the content is pinned to the screen so we don’t immediately lose the information whilst scrolling.
We also highlighted specific features of the products with a progressive reveal.
Product detail page
