Sprout LearningEdtech2023

One design system for three learning products

Bringing a student app, a teacher dashboard and a parent portal under one accessible design system, so a small team could ship faster without losing quality.

Role: Design systems lead
Timeline: 6 months
Team: 3 designers, 6 front-end engineers
Platform: Web, iOS, Android

Students talking through their notes together around a classroom table

Outcomes

140+
Components documented
-40%
Time to build new screens
AA
WCAG 2.2 across all products

The challenge

Sprout had grown into three separate products built by three separate teams. Buttons came in 23 variations, colours failed contrast checks, and every new feature meant designing the same patterns again from scratch.

Auditing what already existed

We printed every screen from all three products and spent two days grouping them into patterns. The audit surfaced 23 button styles, 11 date pickers and more than 400 unique colour values, most of them one-offs.

Three designers talking around a desk with two large monitors in a bright studio — A weekly working session with the student, teacher and parent squads.

Designing the foundations

I led the work on tokens first: colour, type, spacing and motion, all tested for contrast and readability with students aged 8 to 16. Then we rebuilt the most-used components together with engineering, so every piece existed in Figma and in code from day one.

One shared token set, themed for each product.
More than 140 components, each with usage guidance and accessibility notes.
A contribution model, so any squad can propose new patterns.

Outcome

New screens now take 40% less time to build, all three products meet WCAG 2.2 AA, and the design team spends its time on new problems instead of redrawing old ones.

What I learned

A design system is a product with its own users. Treating engineers and designers as customers made adoption feel natural instead of enforced.