Joyn’s editorial sites exist to be found. Search and social bring readers in, and every article is a doorway to a show, a livestream or a match. That makes speed and consistency the business: more pages, shipped faster, all leading into views on Joyn.

The project didn’t start as a multibrand system. The original plan was a page for every ProSiebenSat.1 channel, and an early design system was built for that. Mid-project, the strategy shifted to format brands: :newstime, ran, Behind the Screens. The old system was built around a structure that no longer existed, and little of it was reusable.

Meanwhile, designers worked page by page, and the pages drifted: the same teaser solved three ways, the same chip meaning different things on different sites. Every new page was partly a redesign.

The pivot was a chance to start clean — and to build something that wouldn’t die at the next one.

My role

The design Lead set direction and priorities; I owned the system. Before drawing anything, I collected what designers across all four brands needed, then turned that into a shared architecture, a component model, and a process for deciding what gets in.

Key decisions

Components earn their place

Every request went through the same path. Does it already exist? Does it meet the requirements? If not, the requirements were unpacked, presented to the team and checked for feasibility with engineering. Then came the question that decided everything: does this component scale across products and screens?

Yes meant it went on the board as a system component. No meant a deliberate one-off — designed for its brand and kept out of the system.

This moved the most frequent argument in the team — reusable or one-off — from opinion to process.

Every component request followed the same path — from “does it exist?” to “does it scale?”

Scope is the contract

Designers used chips as buttons in one place and as content filters in another: same shape, different behavior, different accessibility semantics. As a team, we settled it: chips filter content. They are never buttons.

It’s a small component, but the principle is big: a component’s scope is its contract, and ambiguous scope is where drift starts.

Let ran be ran

Sport stretches every system. ran’s header carries live scores, schedules and livestreams that no other brand needs. The decision tree handled this without special pleading: patterns that didn’t scale became one-offs, or stayed outside the system entirely.

ran was built by a second engineering team, working from the same system. Its header, where live sport data lives, was one of the deliberate one-offs.

A system that says yes to everything protects nothing.

Systems thinking

Each brand is a set of primitives

Everything above the primitives — semantic tokens, components, page modules, layout, interaction, accessibility — is shared. A new brand doesn’t mean new components; it means new primitives.

Shared page modules across all brands: highlights, editors’ picks, topic sections, “missed it? watch here”.

Impact

1 week

to theme a fourth brand

When JOYN News launched in Austria, we didn’t redesign anything. We added one new set of primitives, and the whole system re-themed.

Reflection

The first system didn’t fail on craft. It failed because it encoded an org structure, and the structure changed. So I built this one around reuse, not around brands: a component only entered the system if it scaled across products and screens. The payoff came with JOYN News: a new brand, a new market, one week.

The biggest lesson: the system lived in Figma, and engineering rebuilt it in code. We kept closing the gap, but a system that exists twice drifts twice. Next time I’d make design tokens the shared contract from day one — a single source both design and code consume — and bring engineering into owning component definitions early.

Impressum