Disciple · Chapter 05
Three platforms. Three design systems. None of them talking to each other.
The scene
Michael Harrower
Head of Product Design · Disciple
Three platforms. Three design systems. None of them talking to each other. When I mapped out the state of our design infrastructure, I found iOS, Android, and web each with their own patterns, their own components, and their own drift away from anything resembling consistency.
The teams weren't to blame. They'd been moving fast. But the debt had accumulated, and now it was costing us time on every feature we shipped.
The problem
With one designer per platform, we had almost no bandwidth for maintenance. Every new feature required building three slightly different versions of the same thing. And there was a catch: Disciple lets customers customise every color in their app, plus elements of layout and structure. A standard component library wouldn't work. Ours had to bend without breaking.
3
Separate design systems
1
Designer per platform
∞
Possible color combinations
The work
I chose Atomic Design as the framework, not because it was trendy, but because the structure matched how our components actually needed to scale.
Phase 01
A single Figma file became the source of truth. Atoms on the left, templates on the right. Every component was documented in Zeroheight, including the rules for how they could be customised and the edge cases for when they couldn't. Two tools, one system.
Phase 02
We started with Messages, not because it was the easiest, but because it was the most broken. Getting it right across all three platforms set the pattern for everything that followed. The messiest starting point forces the most rigour.
Phase 03
With the pattern established, we rolled out Signup/Login and Feeds. Each rollout validated the system and exposed edge cases we hadn't anticipated. The constraint of infinite color customisation actually made the system stronger. We had to define every state, every contrast ratio, every fallback.
Phase 04
The outcome
3 → 1
Design systems unified
3
Platform rollouts completed
0
Color combination exceptions
The design system became connective tissue between three platforms that had been operating independently. Design time shifted from maintenance to new work. And the customisation constraint that seemed like our biggest problem became our best teacher.
What I learned
Start with the most broken thing.
It's harder, but it forces rigour. The hardest component teaches you the rules that make the whole system coherent.
Constraints clarify.
Having to solve for infinite color combinations forced structural decisions that made the system far more robust than a standard component library would have been.
Next chapter
380 customers, 25 employees, and no real idea who we were building for.