One design system, four products

A shared component library that let four Tessel product teams build new screens in minutes instead of hours.

ROLE

Design system lead

TEAM

1 designer + 3 engineers (guild)

TIMELINE

9 months

PLATFORM

Design system

Close-up of a printed grid of matte paper colour swatches in yellow, orange, red, blue and green

THE PROBLEM

Tessel had grown to four products built by four teams, each with its own buttons, tables and date pickers. A new screen took around three hours to assemble because nothing could be reused safely, and small differences confused customers who used more than one product. Engineers kept copies of components in their own repositories, so a fix in one place never reached the others.

OUTCOMES

112

components in library

74%

screens migrated

20 min

per new screen (was 3 h)

PROCESS

Research

I audited every screen in the four products and counted the variations: 23 buttons, 11 tables and 7 date pickers. I interviewed one engineer and one designer from each team about what stopped them reusing each other's work. The answer was trust: nobody knew which version was current or who would fix it.

The audit became the first page of the documentation. Seeing 23 buttons on one board did more to win support from the four product leads than any proposal I could have written, and two of them offered engineering time the same week.

Decisions

We formed a guild of one designer and three engineers who each kept a day a week for the system. We started with tokens and the five components every screen used, and wrote usage notes next to each one in plain language, with the do and the do-not side by side.

A component without an owner is a fork waiting to happen.

Every component shipped in Figma and in code on the same day, with the same name. Teams could request changes in one public channel, and we answered within two days.

Shipping

We migrated the busiest screens first so the benefit was visible early. After nine months the library had 112 components, 74% of screens used it, and a new screen took about twenty minutes to assemble.

The guild still meets every Thursday. We publish a short changelog after each meeting, and any designer or engineer can bring a component that is missing, as long as they bring the screen that needs it.

A tablet showing a hand-drawn page wireframe with red arrows, next to a stylus and a mug of coffee on a sunlit wooden desk

Pen sketches of interface layouts, icons and type samples ('Aa Bb') on paper in front of a silver laptop

WHAT I’D DO NEXT

Publish the token set as a package for the marketing site too, so the brand and the product finally share one source.

Hiring for something like this?

Check the role against my terms in ten seconds.

Check the fit

NEXT CASE

Pocketvet

2024

Vet visits on a video call

A calmer waiting room and check-in for video vet visits that got most calls starting on time.

A tabby cat lying on a mustard-yellow sofa in a sunny living room, with a tablet on the table in the foreground