Product vision and design system for the new streaming platform
Starting point
What it was about
ZDF rebuilt its streaming platform: for web, mobile apps, smart TV and HbbTV. Four devices, four ways of operating them, from the mouse to the remote control.
A second requirement came with it. The interfaces were no longer to be assembled by hand but to be generated automatically from data. Teasers, tiles and collections are filled dynamically and personalized later.
That only works with a system. If every tile is designed individually, it cannot be filled automatically. If the rules for the design are missing, the result looks arbitrary.
The process
One tile that carries every kind of content, on every device
A design framework for all devices: web, mobile, tablet, TV and HbbTV. It holds a responsive grid, a shared visual language, rules for motion and the accessibility requirements to WCAG 2.2. Every component, from the navigation to the teaser, behaves the same whether it is operated by touch, remote control or keyboard.
The colors sit in the system as semantic tokens. Components reference roles, not fixed color values. For automatically assembled collections, the system reads the colors from the imagery and carries them across the whole group. The surfaces match without anyone setting them individually.
The most important component is the Teaser Tile. It takes in very different content and stays within the frame of the brand. Size, arrangement and metadata adapt automatically. The tile works for editorially selected content just as well as for automatically generated content.
The design tokens are documented in Storybook together with engineering. Design and development have worked with the same values ever since.
Outcome
What it achieved
The platform runs on one shared framework instead of four separate device versions. A new content format does not need a new tile, only a different configuration of the existing one. Editorially selected and automatically generated content sit side by side without the difference showing. Color decisions are made once in the system and apply everywhere.