The product had grown fast. The design system hadn’t kept up. Components had drifted, accessibility was inconsistent, and design and engineering were no longer speaking the same language. This is how we fixed the foundation.
ROLE
Lead Product Designer
TEAM
PM – Lead Engineers – UX Designer – Marketing Designers
SCOPE
Audit, token architecture, component rebuilds, stakeholder alignment
OUTCOME
83% reduction in rebrand rollout time
THE PROBLEM
The system hadn’t failed from neglect. It had never been built to absorb change.
Engineers had been shipping independently across mobile and web. Components drifted. Accessibility was inconsistent. The product no longer looked like it belonged to the same brand as the marketing materials. Every new feature added more complexity to an already fragile foundation.
System inconsistency audit
- Inconsistent icon visual
- Multiple spacing scales
- Low contrast on text
- Low contrast on visual elements
The initial audit uncovered systemic inconsistency across accessibility, spacing, iconography, and component behaviour. These findings became the foundation for the rebuild priorities.
Components had no defined interaction rules
Figma files, docs, and live product no longer matched
Accessibility issues throughout: contrast, missing states
No design tokens, and visual decisions are made locally and inconsistently
“The root cause wasn’t bad decisions. It was the absence of a shared language between design and engineering.”
THE APPROACH
Build from principles, not from components.
“By the time components were handed over, engineers had already been part of the decision-making. We were speaking the same language before the work was done.”
DESIGN PRINCIPLE
PRINCIPLE 1
Accessibility first: WCAG AA as the baseline, not a nice-to-have.
PRINCIPLE 2
Atomic structure: build from primitives up, every decision has a place.
PRINCIPLE 3
Token-driven: changes happen at the top of the chain, not scattered across every file.
PRINCIPLE 4
Flexible but opinionated: room for variation, but not so much it moves the guesswork elsewhere.
PRINCIPLE 5
Documented through real use: every guideline grounded in actual product scenarios.
| PRIMITIVE | SEMANTIC | COMPONENT |
|---|---|---|
| BLUE 500 | ACTION.PRIMARY | BUTTON.PRIMARY.SMALL |
| RED 100 | SYSTEM.ERROR.LIGHT | BANNER.ERROR |
| GREEN 100 | SYSTEM.GOOD.LIGHT | BADGE.GOOD.SMALL |
THE SOLUTION
One source of truth for design and engineering.
After the design system update, both the web and mobile apps are now visually consistent. The icons follow a similar approach, and the colours meet contrast requirements. It’s also become easier to collaborate with engineers, as we’re now speaking the same language when discussing components.
Boolean properties kept optional elements toggleable without multiplying variant counts.
Auto layout kept handoff to engineers cleaner and faster.
Colour variants, one change at the top, everything follows.
Component rules and states are ready to use in both design and implementation.
BEFORE and AFTER
Before, the product looked like it had been built by different teams at different times. After, it looked like one product.
THE OUTCOME
The rebrand proved it worked.
~83%
reduction in rebrand rollout time
~4 weeks
to roll out across all platforms, down from six months
fewer designer touchpoints needed for routine UI updates
“A design system is not a design project. It is an infrastructure project.”
The 83% reduction in rebrand rollout time was the moment the investment became undeniable, and the system has continued to absorb change without breaking since.
Closing Reflection
A design system is only as useful as the discipline around maintaining it. The goal was never a beautiful Figma file. It was a team that could move faster, make better decisions, and spend less time resolving the same inconsistencies twice.