Why it matters
When a product grows one feature at a time, the same component often gets designed and built more than once, by different people. Small differences appear: two versions of a button, three shades of the same grey. Each change then has to be made in several places, and some get missed.
A design system gives your designers and engineers one set of rules for colour, type, spacing and components, and records why each rule exists. New screens are built from parts that already exist, so changes take less time and the product looks the same everywhere.
How the work runs
We start by cataloguing every component in use across your product and noting where the same thing has been built more than once. That shows you what you already have before anything new is designed.
Then we define the rules for colour, type, spacing and components, and write down the reasoning behind each one. When your team hits a case the rules don't cover, the reasoning helps them decide.
We build the component library and apply it to the product screen by screen, working alongside your engineers while they build it in code.
If you run more than one product or brand, one system can serve all of them while each keeps its own terminology. If your product is in Arabic, the system is designed to work right to left from the start, so Arabic screens don't need to be rebuilt later.
What you get
- A catalogue of the components in use today, and where they're duplicated.
- A component library your designers build from and your engineers build against.
- Documentation covering the normal cases, the exceptions, and how to add to the system.
Your team owns the system from then on. We can stay on to help it grow, or hand it over with everything documented.
Related work
ADCB: One design language. ADCB's app had grown one feature at a time. If you held both a conventional and an Islamic account, it felt like banking with two different banks. One option was to rebuild the app around a conversational assistant. We recommended against it and built one design language across all three products instead: shared components and logic, with room for each to keep its own terminology. Delivered by Rai's founders while at ADCB.
Other services: Product & service design · Brand & creative · Delivery & ops