ZDF Detlines

A design system for the ZDFmediathek

Client
ZDF
Services
UX & UI analysis, client workshops
Tools
Miro, Figma, Confluence

DetLines serves as the core design system for all ZDFmediathek products, ensuring a uniform user experience across all distribution channels. It takes into account the whole product spectrum, ranging from responsive websites to mobile apps, and from Smart TVs to HbbTV. DetLines allows for an efficient, consistent, and cross-platform implementation of new features and applications. It also provides teams with a common understanding of patterns and components.

In 2022 DetLines won the UX Design Award in the category “Product”.

Project

Over time, unorganized patterns increased, leading to complex and inconsistent products in ZDFmediathek due to deviations and special cases. Users lacked a uniform understanding of functional and design patterns. That’s why the ZDF wanted to develop a design system that would resolve these problems and would streamline future development.

Challenge

Because of the many varying cross-platform implementations, we did extensive compilations of hundreds of design elements, cataloged and examined them. By way of creating design principles, coupled with user studies and personas, we facilitated a detailed pattern mapping. The findings were then applied to modify and organize the components and patterns into the new design system. This design system consists of a design master file, a design system manager for precise documentation with all use cases, and a frontend library. The Design System Manager became the central interface between design, concept, and frontend.