Meter design system

One design system for three products, adopted a screen at a time.

Company

Daluur

Role

Design lead for the system

Team

Two designers, two front-end engineers, and a counterpart on each product team

Year

2023

Duration

Eighteen months

Platform

Design system

Context

By 2023 Daluur had three products: the customer app, the website where people sign up, and the tool the support team uses to change contracts. Three teams had built them, each with its own buttons, its own blues, and its own idea of what an error looks like. On a bad day, a customer could run into three different date pickers.

My role

I proposed the system, led it for its first eighteen months, and designed the foundations and most of the components. I also ran the weekly review where product teams brought what they needed and what wasn’t working.

Approach

We didn’t start with components. We started with an inventory: screenshots of every button, field, and message in the three products, printed and pinned to a wall in the office. That wall did more to get the system funded than any presentation.

From the wall we picked the smallest set of parts that covered the most screens and built those first: color, type, and spacing tokens, then buttons, form fields, and the three kinds of messages. The token names took longer than any component. We ended up naming them by role instead of by look, so the app could get a dark theme without renaming half the code. I wrote about that in a note.

Solution

Meter has foundations, components, and a documentation site written for the people most likely to break the rules: engineers in a hurry. Every component exists in the design tool and in code with the same name and the same options.

We didn’t ask teams to stop and migrate. The support tool moved first, because it had the fewest users and the most forms. The app and the website followed screen by screen, whenever a team was already changing a screen for other work.

Meter: color tokens next to buttons, fields, and messages.

Color tokens, named by role.

Buttons, a date field, and the three kinds of messages.

Result

By the time I left, all three products used Meter for buttons, fields, and messages, and new screens started from it by default. The support tool team designed and shipped a whole feature without a designer, using only documented parts, and it passed design review with almost no changes.

What I learned

A design system gets adopted one screen at a time. The migration plan mattered more than the components, and the wall mattered more than the plan.