Role
UI Designer
UX Designer
Skills
Design System, Responsive Design, Accessible Design
Supervisor
Giullia Benigni
Gloria Beccalli
Valeria Azzini
Timeline
2 weeks
May 2025
Moncler Genius is a collection showcasing the brand’s collaborations with international designers through dedicated capsule collections. The website’s dedicated section includes an introductory page, an event page, and pages focused on the individual collaborations.
While Genius has its own well-defined visual identity, with a distinct font, color palette, and darker tone, the launch of Moncler’s new e-commerce platform required alignment with the updated look & feel.
request
The goal was to refresh the existing Moncler Genius Designer and Event pages Interfaces to align seamlessly with the upcoming look and feel of the website, ensuring full visual consistency ahead of the official rollout.
challenge
The main challenge was to adapt each module’s composition to the new Moncler website while preserving the Genius identity. The goal was to seamlessly integrate its distinctive visual language into the updated design system, achieving consistency across the platform without compromising its unique character.
Project Steps
Cleanup & Analysis
01
Cleanup & Analysis
Functionality Analysis
Visual Element Mapping
Legacy Component Definition
Re-skin
02
Design System Alignment
Design System Alignment
Component and Module Research
Visual Refresh & Component Integration
03
Design Library
Module and Element Creation
Module Integration in Design Library
Templates Creation ready for Dev
Cleanup & Analysis
Design System Alignment
The process began with a thorough cleanup of legacy components, followed by the application of key Design Primitive Tokens, such as colors, typography, newly introduced iconography, pagination and others UI elements.
Re-skin
Visual Refresh & Component Integration
The experience was made more immersive and minimal by enlarging images, harmonizing module heights, and ensuring textual consistency.
Re-skin
Visual Refresh & Component Integration
Every small detail was carefully considered.
Special attention was given to spacing and alignment to bring consistency across modules and the new visual identity and ensure a cohesive visual rhythm throughout the interface. While comparing them with the newly existing modules to find an ideal solution for a seamless hybrid between the two design languages.
Design Library
Module and Element Creation and integration in Design Library
The modules re-designed for the Genius pages were integrated into the shared design library to ensure consistency across future developments, come varianti nei vari stati del modulo e sviluppando ogni modulo nei 4 diversi breakpoint, e nei vari stati.
ricreazione template, stati pre,durante e post lancio della collezioni genius
The final result is a visually cohesive and transitional interface that blends existing structures with the elevated aesthetics of the redesigned site, bridging the legacy layout with a more refined, modern look aligned to the brand’s premium positioning.