BLUEHARBOURD3
Book an intro call

Depth 14.2 · Web and product engineering · Level 3

Product interfaces

Product interfaces are the screens inside a software product: dashboards, forms, settings and every state they can be in, including empty, loading and error. A design system in code is the shared library of components those screens are built from, so a button or a table behaves the same everywhere and a change is made once.

Specification

Input
Access to the product, its repository and any design files, and a list of the screens that change most often.
Method
We inventory the components already in use, merge the near duplicates, build each one with its states and accessibility behaviour, and replace screens one at a time rather than in a single rewrite.
Deliverable
Design system in code: a documented component library in your repository, with design tokens and usage notes.
Measured by
Share of screens built from library components, accessibility checks against WCAG 2.2, and defects reported against interface components.

Most often bought inPayments and fintech, B2B software

The artefact, before and after

Design system in code: a documented component library in your repository, with design tokens and usage notes.

Before: a blank product interfaces record with a row for each of component inventory and consolidation, design tokens shared by design and code, empty, loading and error states, keyboard and screen reader behaviour, component documentation, and no entries. After: every row carries a finding and a checked status, which is the state the work hands over.

Inside it

  • 01Component inventory and consolidation
  • 02Design tokens shared by design and code
  • 03Empty, loading and error states
  • 04Keyboard and screen reader behaviour
  • 05Component documentation
Deliverable · Level 4→ Design system in codeA design system in code is the set of tokens and components your product interfaces are built from, kept in a repository with tests, so a change to a colour or a button happens once and reaches every screen that uses it.

Typical first engagement

The usual order of a first piece of work. Timing and price are set at scoping, once we have seen the stack.

  1. 01Interface auditYou get: Repeated patterns, inconsistencies and accessibility failures in the current product.
  2. 02ComponentsYou get: The first set of shared components in code, with documentation.
  3. 03First screen movedYou get: One real screen rebuilt on the components and shipped.

Web and product engineering

Next in this line

Ask about this part of the stack

Write one question about product interfaces in your own systems. We answer it in writing and name what we would need to see to answer it properly.

Send one question

A written reply, no call needed.