← Case studies

Coursera Design System

Co-leading the creation of Coursera's first design system to uplift design quality across the whole company.

Components designBi-directional & RTLAccessibilityDesignOpsDesign Systems

Published 2021

Summary

Created a design system with embedded WCAG 2.2 AA accessibility standards to amplify usability.

Designed responsive, multi-lingual components with usage rules, behaviours, and variants.

At a glance

designers said CDS made design and build easier
73%
engineering efficiency gains reported
78%
reduction in accessibility hotspots
30%
improved learner retention (sub-team)
0.34%

System survey, June 2021

My role and team

Principal Product Designer leading the design system architecture and technical direction of Coursera’s first design system. Setting objectives and roadmaps and delivering the day-to-day design assets.

Part of the system leadership group with a Product Manager, Principal Visual Designer, and Lead Engineer.

Took the lead on embedding accessibility, setting up operating practices, and managing the backlog.

The full agile team included three React front-end engineers, two component designers (mid-level), and in part-time roles: an engineering manager, product manager, and design director.

Documentation examples

Coursera — Component documentation examples (Figma)

Display settings

System high-contrast is active. These settings will have no visual effect.

Theme
Contrast

Decorative is a lower-contrast mode for visual enjoyment. Some text and UI may not meet WCAG AA. Choose Low or High if readability matters to you.