Skip to content

Web & Digital Platforms

Design systems: rolled out one product at a time

Your website, customer portal and office app each grew their own buttons, forms and colours, so they look like three companies. A design system gives them one set of parts. It doesn't arrive as a big switch-over. Each product moves over one screen at a time while work carries on, its progress visible, and anything left over is listed rather than hidden. We build the parts and move each product over one screen at a time.
Talk through your productsSee one product's move ↓
design systemtokenscomponentsguidancewebsiteon the system5 of 1616 of 16customer portalon the system3 of 1414 of 14office appon the system2 of 1917 of 192 left · calendar, print view

One product's move, step by step

The customer portal, moved over while customers kept using it.

Customer portal · moving to the system

  1. Inventory

    14 parts in use, 3 already from the system

    done

  2. Tokens swapped

    colours, type and spacing in one change

    done

  3. Components replaced

    one screen at a time, behind a switch

    done

  4. Checked

    keyboard, screen reader, 390 wide

    done

  5. Old parts removed

    nothing left outside the system

    done

The portal looks and behaves like the website, and nobody stopped working while it changed.

What's delivered

Tokenscolour, type, spacing and radius as named valuesevery product, through code
Componentsbuilt, tested parts in every statedevelopers
Guidancewhen to use each part, with live examplesdesigners and developers
Design filesthe same parts, for designing new screensdesigners
A way to contributehow a new part is proposed and promotedeveryone

Three products, three ways

Three products, three ways

  1. 01Three button styles and three date pickers
  2. 02Accessibility fixed in one product and broken in the others
  3. 03Every new screen designed from scratch
  4. 04A brand change takes months, product by product

Customers notice the seams, and every part is paid for three times.

One design system

  1. 01One set of parts, used everywhere
  2. 02Accessibility fixed once, in the part
  3. 03New screens assembled from existing parts
  4. 04A brand change is a token change

Each product gets cheaper to change, not more expensive.

The parts it's built from

Each part is built and tested on its own, so you can start with one and add the rest.

  1. Decisions

    Design Systems

    • the brand
    • existing products
    • accessibility needs

    a one-off style → proposed or removed

  2. Parts

    Component Libraries

    Built and tested in every state.

  3. Structure

    UX & Information Architecture

    Patterns for navigation and layout.

  4. Adoption

    Application Frontends

    Each product moved over, one screen at a time.

Built into every partAccessibilityChecked once, inherited by every product.

Is a design system the right system?

Good fit

  • You have two or more sites or apps that should feel like one company.
  • The same part has been built several times.
  • More than one team designs or builds.

Avoid when

  • One product and a small team. Shared styles are enough.
  • Nobody will own the system after it's built.

How we'd approach it

Most of the early work is taking stock of what each product has today and agreeing the order they move in.

  1. 01

    Understand

    As much as the problem needs

    We map how the work runs today: who does what, which systems hold the records, and where it breaks.

  2. 02

    Design

    Decided before it's built

    Ownership, rules, integrations and exceptions, agreed with you and written down with acceptance criteria.

  3. 03

    Build

    Connected to what you use

    We build the scoped system, connect it to the tools you already run, and test it on the cases that matter.

Related systems

The capabilities underneath

For your industry

Questions about design systems

Do we have to stop building while it's made?

No. The system starts from parts your products already use, and each product moves over one screen at a time.

How long until every product uses it?

It depends on how many products and screens there are. The inventory at the start gives the list, and each product's progress is visible as it goes.

What about our brand guidelines?

They become tokens: named colours, type and spacing that every product reads, so the guidelines are applied, not just described.

Who maintains it afterwards?

A named owner on your side, with a simple way to propose changes. We can help until that's settled.

Make your products look like one company

Tell us which products you run and how they differ. We'll show you how the move would be staged.

Start a project