Atomic Design system creation - CMA CGM
Project Overview
Objective
CMA CGM needed a cohesive design system to unify its digital products across multiple teams. The goal was to develop a cohesive design system to unify CMA CGM's digital platforms, enhancing consistency and user experience across various products.
Lead product designer
CMA CGM
160 000+
Desktop - Mobile
UX - UI - Research - Analytics
Challenges Addressed
Prior to the implementation of the design system, CMA CGM faced:
Inconsistent UI patterns across teams.
Fragmented components that slowed down design and development.
A lack of clear guidelines, leading to repeated design work and misalignment.
These issues impeded the delivery of a seamless user experience and slowed down development processes.
Powerful colour token system
Solid foundations
Pixel perfect icons
Approach & Methodology
Research & Audit
Engaged in cross-functional interviews with front-end developers, product managers, and marketing leads to identify critical design challenges. Workshops and user research sessions revealed pain points in components, documentation, and accessibility, allowing us to define clear, prioritized requirements.
Benchmark
Analyzed leading design systems such as Material (Google), Carbon (IBM), and Fluent (Microsoft) to establish best-in-class standards.
Atomic Design
Employed Brad Frost’s Atomic Design methodology, starting with fundamental "atoms" like typography and color palettes, progressing to "molecules" such as buttons and form fields, ensuring a scalable and reusable system.
Accessibility
Ensured all new components complied with WCAG 2.1 AA standards, promoting inclusivity.
Usability Testing
Conducted usability tests with a diverse group of users to validate the design system and identify areas for improvement.
Visual Design & Style Guide
Developed a comprehensive style guide to maintain visual consistency across CMA CGM’s digital touchpoints.
Outcomes & Impact
6
Product teams adopted
the design system
95%
User satisfaction achieved
after adoption
50%
of design to development handoff time reduced
UX unified
across various applications and websites, including the corporate site
Reflections & Future Directions
Lessons Learned
Emphasized the importance of clear documentation and collaborative feedback loops for successful adoption
Future Improvements
Plan to continuously evolve the system, incorporating user feedback and expanding components to meet emerging needs
Living Product
The design system serves as a scalable resource, adaptable to CMA CGM's ongoing product growth and digital transformation initiatives.
