Telefónica Germany · Multi-brand design system

At a glance

52M

customers across Telefónica Germany's brands
15 → 1

brand styles merged into one design system
10

brands built from the same foundations
4

layers, from design tokens to final screens

The brief

Telefónica Germany runs O2 and Blau alongside partner brands such as FONIC, NettoKOM, ALDI TALK and Ay Yıldız. As part of its RAITT transformation programme, it needed one design system, ONE DS, that every brand, channel and team could build from.

The challenge

Telefónica Germany serves 52 million customers, but its brands had grown apart: 15 brand styles, each with its own guidelines, on six technology stacks. Journeys differed from brand to brand, and some were still offline and manual. Every design had to work for each brand, and for customers, agents and retail staff alike.

My role

My experience department at Born ran this work. I set the experience strategy, set up a team of more than 60 specialists and led discovery with them.

I articulated it through ONE DS: design tokens, a component library, reusable compositions such as tariff cards and usage meters, brand themes for O2, Blau and the partner brands, and the screens and flows built from them.

What we did

Ran discovery, design and testing of an initial solution, then adapted its foundations for each brand.
Merged 15 brand styles, each with its own guidelines, into one design system.
Built the system in four layers: foundation tokens, components, compositions and product screens.
Themed the same components for each brand, from O2 and Blau to WhatsApp SIM, NettoKOM and FONIC.
Designed reusable telecoms patterns: tariff cards, usage meters, SIM management, alerts and offer countdowns.
Covered four customer and agent channels, including agent and retail touchpoints.

Discovery

We started with discovery, then designed and tested an initial solution before adapting it for any brand. Getting one version right first meant every brand would inherit something already tested.

The starting point was hard to work with. Each brand had its own style guide, and the same journey could work differently from one brand to the next.

The initial solution, tested before any brand got its own theme.

Four layers

ONE DS was built in four layers. Foundation tokens hold the colours, typography, spacing and shadows. Components are the basics: buttons, inputs and accordions. Compositions are reusable patterns such as tariff cards, forms and usage meters. Products are the final screens and UX flows for each channel.

Each brand feeds in at the top. The b2c brands, O2 and Blau, sit alongside eight b2p brands, from WhatsApp SIM and NettoKOM to aetka Smart, Spice Mobile and ortel mobile. Agent and retail touchpoints draw on the same layers.

A matrix of the four ONE DS layers, from foundation tokens to components, compositions and product, set against eight b2p brands, Blau and O2, and agent and retail touchpoints. — The brands feed into the same four layers.

From brand tokens to components, compositions and multi-brand templates.

Brand by brand

With the foundations in place, each brand got its own theme. The login shows how it works: the fields, their order and their behaviour stay the same, while colour, type and shape change. WhatsApp SIM and NettoKOM get rounded buttons in their own colours, and O2 Business a square, dark blue one.

The same white-label foundations carry into every brand, which keeps journeys consistent and lets the system scale.

One login, adapted for each brand.

Component libraries

Each brand's library comes from the same source. For O2 it covers info, success and warning alerts, a SIM switcher for customers with several numbers, labels, radio buttons, switches, badges, loaders, an icon set and mobile navigation.

Blau's library uses the same parts with its own look, and adds countdown badges for limited offers, chips and filters, and payment options.

The O2 SIM switcher: an open dropdown listing several numbers with nicknames, a pending order and rename and add-nickname links. — A SIM switcher for customers with several numbers.

Three O2 alerts, info, success and warning, each with an icon, a message and a close button. — Info, success and warning alerts.

O2 mobile navigation with a nested, expanded menu item and a primary button. — Mobile navigation, with nested items.

The O2 component library, with alerts, a SIM switcher, labels, radio buttons, switches, badges, a loader, icons and mobile navigation. — And the whole O2 library, built from the same source.

At scale

Working at this scale took a core design system team, a front-end testing team and a large design community, all building from one source across four customer and agent channels.

Who works from ONE DS

People, by role

View as a table

Role	People
Designers building from the system	70
Core design system team	15
Front-end testing	10

A small core team keeps one system true for 70 designers.

What changed

Across the wider programme, the design system was part of a bigger shift.

Before15 brand styles, each with its own guidelines

AfterOne design system
BeforeSix technology stacks and several products

AfterOne unified platform
BeforeJourneys that differed from brand to brand

AfterOne configurable, consistent flow
BeforeOffline, manual journeys

AfterSelf-service channels

The result

One design system in place of 15 brand styles. Each brand keeps its own look, built on the same tested foundations, so a change made once reaches every brand and channel.

Telefónica