Categories
Design Project

Maturing a Design System @ CM.com

I led the maturation CM.com’s Design Language System, Aurora, from a basic component set into a fully documented and widely adopted design system. This increased consistency, usability, and team alignment across products; turning the system into a foundation for scalable product design.

Background

When I joined CM.com as a UX Designer, the Design Language System Aurora was little more than a standardised CSS stylesheet and a basic component collection. It lacked structure, documentation, and adoption across development teams.
I took a leading role in transforming Aurora into a mature and widely adopted design system. This meant tackling two major challenges:

Role

Product Designer @ CM.com

Team

UX Team, Engineering

Tools & Skills

FigmaSketchDesign Systems

I worked on maturing and improving the Aurora Design Language System as UX Designer at CM.com. Check out the latest version here.

This page is entirely styled according to the Aurora styling.

When I joined CM.com as a UX Designer, the Design Language System Aurora was little more than a standardised CSS stylesheet and a basic component collection. It lacked structure, documentation, and adoption across development teams.

I took a leading role in transforming Aurora into a mature and widely adopted design system. This meant tackling two major challenges:

Evolving from a component collection to a complete design library

The UX team adopted the Atomic design principles and we introduced:

  1. Clear documentation and usage guidelines for all components, for both designers and engineers.
  2. Improved accessibility, compliant with WCAG 2.1 accessibility standards. This included updated contrast and improving interaction design for all components
  3. Defined Patterns and Templates for more complex UI structures, to create cohesiveness across the entire CM.com platform across all products.

Driving adoption across design and engineering

I lead 4 initiatives that lead to an increased adoption of the design language system, both for the UX team and for the engineering department.

Migrating Aurora from Sketch to Figma

This solved issues with cascading styles and enabled interactive components. During the migration, we redefined foundational tokens (spacing, colour, typography) in collaboration with engineering. This fostered buy-in from both sides and allowed for code-design synchronisation through automation.

Establishing regular design critique sessions

These sessions emphasised DLS compliance and surfaced needs for new or updated components before they reached engineers, avoiding last-minute surprises and unclear handovers.

Defining templates and interaction patterns

This raised the DLS from a static collection of elements to a dynamic system, promoting platform-wide UX consistency and reducing the need to reinvent common interactions.

Organising cross-functional design sprints

We brought together developers from various engineering teams for 2 weeks, about 6 times a year. This took some convincing of engineering managers. During such a design sprint, we sat together with 2-3 UX Designers and 3–5 Developers, to fully focus on building and improving the DLS. These sprints not only accelerated progress, but also helped developers feel ownership and trust in the system.

This experience with Aurora showed me that a Design Language System is never just about tools; it’s about people, collaboration, and building the culture to support it.

Below, you can find more details about a few components, patterns & templates of the Aurora DLS that I worked on.

Designing a new home for Aurora

Aurora DLS is used by UX designers to refer to guidelines and by developers to learn how to implement components and patterns. The initial home page of Aurora build by and for developers, and therefor highly focussed on code. As part of maturing the design system, we needed a new home for it as well, containing proper documentation and clear design guidelines for all stakeholders that want to know more about Aurora.

Template: Item list page

The most common page in all of the 20+ applications of CM.com is a page with a list of items. Since these were developed by different teams, elements were placed on different positions across apps (for example, the “create” button was sometimes added at the button of a list, sometimes at the top of the page), and interactions worked differently. The UX team defined a page template to align apps visually and interaction-wise.

Here are some explorations for this template for a selection of applications of CM.com

Template: Dashboard

Data is spread across all applications at CM.com, and also visualised differently. This dashboard template helped teams to align on how metrics are displayed. Creating this template involved defining components such a metric card, standardised charts, and a date-time filter. Order dashboard content using resizing and drag-and-drop.

Pattern: Search sorting filtering

One of the most frequently used interaction patterns across CM.com’s products had never been standardized. I led a comprehensive investigation to identify and document all existing use cases. From there, I designed a unified pattern that could accommodate each variation. By implementing this new standard across our apps, we significantly improved both visual consistency and usability throughout the platform.

See it in action

Below you can find some examples of documents I used for hand-overs to engineering.

Component: Date picker (calendar)

Date pickers are notorious amongst UI / UX design. There one of the most challenging components to define and standardise. I don’t shy away from a challenge just because it’s hard, so decided to get to work. The result is below. Below you will find a snapshot of one of the hand-over documents for engineering.

See it in action

Component: Toggle button (button group)

Below you can find a redesign & documentation for Aurora’s toggle buttons (or button group, as it’s called in Material Design).

Component: Card

Token: Illustrations

I made 2 illustrations for the DLS because sometimes I like to draw. And these were just needed, there were no illustrations that could be used for success or error pages.

Token: Icons

Aurora contains its own custom icons. I created the guidelines for icon usage and templates for icon creation. Many I designed. Here’s a small selection.

Simplexity