Design System

The context

A product catalog without visual consistency

The product catalog had evolved without a shared visual framework: each product had developed its own components, with diverging styles and behaviors. The initiative: visually harmonize the entire catalog around a single design system.

Left: components developed independently by each team with diverging styles. Right: a single documented component reused across the entire catalog.

The real challenge

Getting the system adopted, not just delivered

Integrating over 80 components isn't the hard part. The real challenge is making sure every dev knows where to find the documentation, understands when to use which component, and applies the right patterns. Without this support, the design system stays a Figma file that nobody uses.

The method

Document, raise awareness, support

I first updated all Figma mockups with the new design system components. Each component delivered on the front-end was immediately documented with its use cases, variants and implementation rules. In parallel, I set up awareness sessions and pair programming with devs to anchor the right reflexes directly into their daily workflow. Main screens were treated first so the impact was visible quickly on the most used journeys.

What it changed

From de facto standard to team reference

By the end of the mission, new screens systematically used the design system and the documentation served as a reference in code reviews. To ensure continuity, I documented contribution rules.

The design system harmonized the catalog and accelerated delivery. The documentation and review process ensure that new components remain consistent with the existing system. This foundation of consistent components also facilitated the accessibility initiative: a component made accessible in the design system benefits the entire catalog.