One Loop, every brand
I led the design side of taking Loop, EE’s design system, from single-brand to multi-brand: one foundation for BT, EE, Plusnet and sub-brand EE One, without asking a single team to stop shipping.
-
650+
People at BT Group building on one foundation
-
4
Brands on one foundation, including EE One
-
15
Designers user-tested the new token names
Hero: the same Loop component in BT, EE, Plusnet and EE One, side by side.
A system built for one brand
Loop started life as EE’s design system. As BT Group brought BT, EE and Plusnet closer together, teams needed it to work for every brand, but EE was baked in all the way down: its colours, its text styles and token names full of EE-only terms.
And Loop was already in use on live products. Renaming a token is a breaking change, so any fix risked breaking the designs and code of the teams relying on it.
My first Figma demo: one component switching between BT, EE and Plusnet.
The brief
How might Loop serve every brand at BT Group, without asking a single team to stop shipping?
I led the Figma side: the audit and token mapping across all three brands, the new brand-neutral token names, and the migration guides for designers.
Success looked like
- BT, EE, Plusnet and EE One from one foundation
- Every EE component carried across
- Every team migrated by October
Constraints
- No team could stop shipping
- Renaming a token breaks designs and code
- Component-specific variables out of scope for phase 1
New foundations, side by side with the old
Instead of overwriting EE’s foundations, we built new brand-neutral ones next to them. Teams could move across when they were ready, with tools and guides to help.
-
Rename and test
Mapped every token across the brands, stripped out the EE-only terms, then user-tested the new names with 15 of our designers.
-
Ship phase 1
Brand-specific text styles, colours and corner radii as variables, with dark mode built in for EE. Each brand’s own radii stopped them looking too alike.
-
Make migrating easy
A migration tool for developers, built from our sheet of old and new names, and step-by-step guides for designers.
Before
Before: an EE component and its EE-named colour and text styles.
After
After: the same component with brand-neutral tokens, in each brand.
Behind the scenes
The spreadsheet: every old token name next to its new one.
A designer migration guide, using the Style finder plugin in Figma.
Loop’s guidance site before and after: EE’s aqua out, a brand-neutral blue in.
Key decision
Release alongside, don’t overwrite
Renaming tokens breaks things. Overwriting the old foundations would have forced every team to migrate on the same day, whatever else they had on.
Option A: Overwrite them
One clean switch-over. But every file and codebase breaks at once, and teams have to stop shipping to fix it.
Option B: Release alongside
ChosenNew foundations next to the old ones. Teams migrate when they’re ready, with tools to help, and nothing breaks overnight.
Diagram: an old EE token name, its new brand-neutral name in the sheet, then the migration tool offering it to a developer to accept.
Four brands.
One foundation.
No team stopped.
Phase 1 was released in June, with the business aiming to have everyone migrated by October. Every EE component took on the new tokens, and no team was asked to stop shipping.
It brought built-in dark mode too, for EE in phase 1. Before, Loop used Figma styles rather than variables, so dark mode needed its own copies of components. Now it’s a mode, and those old dark mode components were the only ones we deprecated.
It was planned to take longer, but with AI the developers built a migration tool, with design’s help, from our sheet of old and new names. It offers each developer the new token to accept, or for things like typography, a short choice of the closest matches.
Loop itself went white label too. Out went EE’s aqua across the guidance site and thumbnails, in came a brand-neutral blue, with a Loop theme so the system doesn’t favour EE behind the scenes either.
Shipped: the same live screen in BT, EE, Plusnet and EE One.
What I learned
- Naming is design work: test it with the people who’ll use it
- A simple demo can start a big change
- Good tools and guides make migrating happen
What I’d do next
- Component-specific variables, so brands can differ more
- Track each team’s migration from day one
- Bring more brands onto the same foundation
“Stefan has effectively acted as the Product Design lead for Loop’s multi-brand work, with his ideas, energy and expertise playing a key role in shaping the approach.”
Frances
Product Manager (Loop) @ BT Group
See more of my work
Loop Figma Debug Tool
One switch in Figma that shows what’s really using Loop, saving 4+ hours a week and used by over 350 people a month across BT, EE and Plusnet.
Plusnet Broadband Order Tracker
Rebuilt Plusnet's underperforming broadband order tracker from the ground up, cutting calls to the call centre by 38% within weeks of launch.
Let’s talk about what’s next...
Or we can talk video games, golf or skateboarding :)
Video description
Stefan Adams: The S-N of Stefan A hand-drawn animation, set to music, that spells out my name one letter at a time, each with something that says a bit about me.
- S is for skating
- T is for making tea 24/7 for my wife - never finishes!!!
- E is for easy going… unless there’s jellyfish
- F is for making food (mostly hot Mexican food)
- A is for Apple
- N is for never too many shoes!!!
The end. The whole thing by Stefan Adams.