Building the Cdiscount design system: a strategic approach

In 2021, we built a Design System from scratch with a clear goal: to optimize our design production process while ensuring its quality and maintainability. Designed and structured directly in Figma, it was fully documented on ZeroHeight to ensure smooth adoption and continuous updates within the teams.

A common foundation for a unified experience

Creating a design system is not just about assembling UI components; it's about establishing a shared language across teams. At Cdiscount, we designed our Design System to ensure consistency, efficiency, and scalability in our digital products.

Structuring and deploying the Design System

To build a robust and adaptable system, we focused on a modular approach. Our components and guidelines are structured to support various teams while maintaining a coherent brand identity. The deployment phase required close collaboration with developers to integrate the system seamlessly into our products.

Internal adoption and evangelization

A Design System is only effective if it is widely adopted. Beyond documentation, we worked on raising awareness internally through training sessions, workshops, and continuous communication. This ensured that designers, developers, and product managers fully understood the benefits of a structured design approach.

Tone of voice and UX Writing

Consistency is not just visual, it extends to the way we communicate. Our Design System includes Tone of Voice and UX Writing guidelines to maintain a clear, friendly, and helpful user experience. Every word is carefully chosen to reinforce our brand identity and improve readability.

Design tokens for greater flexibility

To ensure our system is scalable and adaptable, we use Design Tokens. These are predefined values for colors, typography, spacing, and other design properties that allow for quick adjustments across different platforms while maintaining consistency.

Designing for accessibility

Accessibility was a core principle in the development of our Design System. We ensured that our components followed WCAG standards, integrating sufficient color contrast, keyboard navigation, and screen reader compatibility. By embedding accessibility guidelines directly into our documentation, we provided teams with clear best practices to create inclusive experiences for all users.