No. 04
UI Design
SEG Unified Design System
Stubben Edge Group runs 11 brands that had never shared a single component. We built a themed UI system that standardises how every one of them behaves, while letting each keep its own face.
Role
UX/UI Designer
Timeline
4 months
Team
Lucy Wayment, Tayla Bresser, Bruno Mameli
Year
2024
The problem & the user
The Challenge
Across Stubben Edge Group’s 11 core subsidiaries, every brand, website and dashboard had been built in isolation. With Flightdeck (Stubben Edge’s insurance platform) in development, we needed one UI library underneath them all, so that whichever sub-brand someone landed on, the experience still felt a part of Stubben Edge Group.
The User
An audience of financial intermediaries, insurance brokers, IFAs and wealth managers who use our services to distribute products and manage client portfolios. They work on desktop all day, typically range from 30 to 55+, and move between several products in a single workflow.
In numbers
11
core subsidiaries.
250+
individual web pages and dashboards.
14
days average to build new pages before the system.
The approach & process
01
State of play audit
I catalogued every UI element, component and pattern across the group’s 11 subsidiaries. The audit was less about finding gaps than finding duplicates: the same button, table and form rebuilt 11 times over, each one slightly different. That overlap became the argument for a shared library.
02
Tokenisation
I defined global tokens for colour, typography and spacing. On top of them we built a reusable library optimised for desktop: the tables, filters and multi-account views our B2B users are in all day, where a component has to hold far more per screen than a marketing page ever does.
03
Documentation
Each subsidiary then got its own flavour inside the system, so a brand could keep its own face. Every component was documented the same way, its properties first and then its variants in each brand, so design and engineering could see exactly what they’d get.
The solution
One component library, 5 core themes. Global tokens for colour, type and spacing carry the shared behaviour; per-brand overrides sit on top, so a product can look like itself without being built from scratch.
Stubben Edge Group
An onboarding page for Appointed Representatives: a role picker, a step-by-step checklist and a company form.
Flightdeck
The insurance platform the system was built for. Dense data including live stats and charts, all drawn from the same tokens as everything else.
Akoni
A cash management platform, and the hardest test the system faced: savings planning across 20+ banks, with filters, deposit cards comparing rate, term and FSCS protection, and a running summary, all legible at density on a dark theme.
Save More Money
The group’s direct-to-consumer brand, and the furthest from the others in tone. A quote journey with a progress bar, plain-English choices and a running summary proved the system could stretch to a younger, consumer-facing identity.
1Edge
An insurance business whose site is mostly narrative, with three clear ways to work with them and a call-back form. It needed the same type scale and spacing rhythm as the platforms without inheriting their density.
Stubben Edge Group
An onboarding page for Appointed Representatives: a role picker, a step-by-step checklist and a company form.
Flightdeck
The insurance platform the system was built for. Dense data including live stats and charts, all drawn from the same tokens as everything else.
Akoni
A cash management platform, and the hardest test the system faced: savings planning across 20+ banks, with filters, deposit cards comparing rate, term and FSCS protection, and a running summary, all legible at density on a dark theme.
Save More Money
The group’s direct-to-consumer brand, and the furthest from the others in tone. A quote journey with a progress bar, plain-English choices and a running summary proved the system could stretch to a younger, consumer-facing identity.
1Edge
An insurance business whose site is mostly narrative, with three clear ways to work with them and a call-back form. It needed the same type scale and spacing rhythm as the platforms without inheriting their density.
Reflection & learnings
What I learned
The audit was what moved the conversation: 11 versions of the same button is an argument anyone can follow. I also learned how much of the work is writing: the tokens and components took weeks, but the system only started holding once the documentation meant someone could build a page without asking me.
Changes I’d make
I left for ING before the rollout, which is exactly the part I’d change. Given the timeframe, I only managed to realise 5 of the 11 subsidiaries, though they were well prioritised. I would get engineering into the tokens earlier: design-side tokens only pay off when they map to what’s actually in the build; agreeing this approach earlier would have saved a lot of translation later.