Project 2

A design system three teams actually used

Three product teams, one brand, and four different date pickers. Project 2 was the third attempt to fix that.

The two earlier attempts had failed the same way: someone designed a beautiful system in isolation, nobody had time to migrate to it, and it quietly rotted.

Placeholder image for Project 2

TypeScript, React, Storybook, CSS

Why the first two attempts failed

Both had been built as greenfield ideals. They described how the interface should look rather than how it actually looked, so adopting them meant rewriting working screens with no visible benefit to any user.

That is a hard thing to ask a product team to prioritise, and every team said no in their own polite way.

A system nobody can afford to adopt is a very expensive opinion.

The approach

We inverted it. Instead of designing the system first, we audited every screen that was live and counted what was really there.

The audit found eleven button variants, nine of which were accidental. It found six spacing values doing the work that three would have done. It also found that all three teams had independently converged on nearly the same card component, which told us where to start.

  • Start from the components that already agree. Ship those first, and adoption costs nothing.
  • Give every token a name that describes intent, not appearance, so a colour change does not require a rename.
  • Publish the migration as a codemod wherever possible, so adopting a component is a pull request rather than a project.
Placeholder image

Making it stick

The part that mattered least technically mattered most in practice: we gave the system an owner with time allocated to it, and a weekly half hour where any team could bring a case the system did not cover.

That half hour is the reason it is still alive. It turned the system from something imposed into something the teams edited.

Where it stands

Eighteen months on, the three products share 84% of their interface components. New screens are noticeably faster to build, and the brand refresh that landed last spring took nine days instead of the quarter it would have taken before.