Does Your Product Need a Design System Yet?

Design systems save real time once a product has enough screens and people to need one. Before that point, they can slow a small team down.

Does Your Product Need a Design System Yet?

A design system is a shared library of components, rules and documentation that keeps every screen consistent. Building one takes weeks that ship no new features. For a product with many screens and several designers, that investment pays back quickly. For an early prototype with one designer, it can wait. The decision path below helps you place your product.

Decision path

1. How many people design or build interface screens? → One or two: go to question 2. → Three or more: shared components are already needed. Start with buttons, forms and typography.

2. How many distinct screens does the product have? → A handful: go to question 3. → Dozens: consistency is probably slipping already. Audit the screens and begin a component library.

3. Do the core flows still change often? → Yes: wait. Keep a simple style sheet covering color, type and spacing. → No, they have settled: go to question 4.

4. Is a second platform planned, such as a mobile app alongside the web product? → Yes: build the system now, so both platforms draw from the same components. → No: start small. Document the components used most and extend the library as new screens need it.

Whichever branch you land on

‍

A few habits help every team. Name components after what they do for users, such as "confirmation dialog", so designers and developers share one vocabulary. Keep documentation next to the components themselves, where people will actually find it. Give one person the job of approving additions, since libraries without an owner fill up with near-duplicates.

Users benefit too, even though they never see the library. When a button behaves the same way on every screen, people stop hesitating before they tap it.

‍

What a first version usually contains

‍

Teams often imagine a design system as a large, polished website of components. The first useful version is much smaller. It covers the colors, type sizes and spacing values the product already uses, cleaned up so there is one of each where there used to be several. It includes the handful of components that appear on almost every screen: buttons, form fields, cards, navigation and messages. Each comes with a short note on when to use it. That modest start already removes most of the small inconsistencies users notice, and it gives developers a single source to build from.

A design system is worth building once inconsistency starts costing more time than the system would take to make.

Let the main flows settle, then begin with the components you use most. Extend the system as the product grows, one approved component at a time.

‍

Back to blog