This portfolio is private

Please enter the password to continue.

Wrong password, please try again.

Would you like to see the case studies? Please get in touch for access.

Design System · Luxury e-commerce

Design System

Brief

Moncler's digital experience spanned web, app and international markets, but every screen was built in isolation. Patterns weren't shared and components couldn't scale. Build one shared foundation: the single source of truth for design and development.

Approach

A collaborative ecosystem built on Atomic Design (atoms, molecules, modules, templates) connecting teams, tools and practices, designed in Figma and documented in Zeroheight.

Goal

Empower 10+ teams to design and ship as one: faster decisions, consistent quality and the same brand excellence across every touchpoint.

Role
Design Lead, Digital Design Experience
Year
2025
Team
Cross-functional design & engineering
Tools
Figma · Zeroheight
The context

One brand, many teams, no shared foundation.

Moncler's digital experience had grown fast across web, app and international markets, each surface carrying its own patterns and components. Nothing was truly shared, so teams re-solved the same problems in parallel and quality drifted from one screen to the next.

Scaling the experience meant building one place where design and development could work from the same truth. Not more components, but a shared foundation everyone could rely on.

What it is

What is a Design System?

A set of elements that become standards. They can be used at scale, using components and patterns. It brings together principles, rules, components, styles and guidelines in a unified central place, ensuring coherence, efficiency and scalability across all touchpoints.

Moncler UI components built with the design system
A single source of truth

One ecosystem connecting teams, tools and practices.

The Design System is a collaborative ecosystem built to become the single source of truth for the design and development of every digital product. It rests on four pillars:

The four pillars: design language, visual consistency, component library, documentation site
Design language Visual consistency Component library Documentation site
What it's for

Clarity, consistency, speed.

It empowers everyone involved in creating our digital products to work with clarity and consistency, speeding up decisions while ensuring every experience reflects the same level of quality and brand excellence across all platforms. In practice, the system drives three things:

  • Team collaboration, around one shared language.
  • A simplified workflow, with less rework and fewer debates.
  • Accelerated innovation, building on the system instead of from scratch.
Design System DNA

Broken down into building blocks.

The Design System has been developed based on Atomic Design principles. This method helps design interfaces by breaking them down into smaller building blocks, inspired by chemistry processes.

AtomsColor, typography and spacing tokens.
MoleculesThe smallest graphic elements.
ModulesEditable elements with variants.
TemplatesFull pages, end to end.
Built for every team

The shared ground where the whole organization meets.

The Design System doesn't belong to design alone. It's the common language of the entire digital organization, from commerce to content, marketing to engineering. Everyone builds on the same foundation.

Design ExperienceCommerceMarketingStudioCRMProduct ManagersIntelligenceContentITExternal partners
The tools

Designed in Figma. Documented in Zeroheight.

Figma is where we design, build and maintain the system: real-time collaboration, scalable components shared across projects, and high-fidelity prototypes to validate interactions before implementation. Zeroheight hosts the documentation, an accessible hub for components, patterns and usage guidelines.

Step 01 · DesignFigmaComponents, variants and prototypes are built and maintained here.
Step 02 · DocumentZeroheightThe library is published as guidelines the whole organization can read.
By the numbers
0
months from zero to launch (5,840 hours)
0
full-page templates
0
reusable modules
0+
teams aligned on one language
In everyday use

The answer, in one place.

The real test of a system is whether people reach for it. Documented and governed, and reinforced through design reviews and shared rituals, it turned recurring debates into a single reference. Questions that used to bounce between teams now have one answer:

  • “Is there a dark mode of the Product Highlight editorial module?”
  • “Can a video be used as an asset in the Collections Gallery module?”
  • “What are the character limits for the Collections Hero description?”
Learnings

A design system isn't a library. It's an agreement.

Once the decisions lived in one place, a large organization could move as one. Fewer debates, fewer inconsistencies in development, and the craft free to go where it matters: into the experience, not the process.

Next project
Stone Island