Design system · 2021
Halo Design System
One design language for nine product squads
A multi-brand design system of tokens, components and guidelines that helped Lumen's teams ship twice as fast and finally look like one company.
- Client
- Lumen Bank
- Role
- Design system lead
- Timeline
- 2 years
- Year
- 2021
Results
- Components in design and code
- 120+
- Product squads using Halo
- 9
- Faster from design to release
- 2×
The challenge
By 2021, Lumen had nine product squads, three brands and five slightly different shades of its own blue. Designers rebuilt the same components in every file, engineers reimplemented them in every codebase, and accessibility fixes had to be made again and again.
The approach
Instead of starting with a big library, we started with an audit. I catalogued more than 1,400 interface elements across the products, grouped them into patterns, and worked with each squad to agree on the 40 that mattered most.
- A three-tier token architecture for colour, type, spacing and motion, so a single change can restyle an entire product
- Components designed and built side by side, sharing the same names, options and documentation
- Accessibility built into every component, with automated contrast and keyboard checks
- A lightweight contribution model, so squads can propose new patterns without waiting on a central team
The outcome
Halo now powers every Lumen product, from the mobile app to internal support tools. New features ship in roughly half the time, design reviews focus on the problem rather than the pixels, and a full rebrand of the business banking product took three weeks instead of a quarter.
