Frontend Architecture and UX Design for ZDF

Our Contribution & Solution

1. UI/UX – Optimized User Experience 

Qvest designed the user interface with a strong focus on big screens, iterating based on user testing. 

Particular attention was paid to meeting current accessibility requirements to ensure inclusive use. All requirements were systematically documented and served as the basis for subsequent frontend development. 

2. CTV Application – One codebase for over 35 platforms

The CTV application is based on a unified codebase and runs on over 35 operating systems and OTT platforms, including HbbTV, WebOS, Tizen, Roku, Fire TV, and Android TV. This significantly reduces cross-platform development and maintenance efforts.

Its modular React-based architecture allows for easy expansion. Centralized device configuration simplifies device management.

A custom aggregation service optimizes ZDF’s GraphQL API to ensure stable and performant data delivery—even on low-performance devices, which use a resource-efficient frontend.

Quality assurance takes place in an in-house test lab with over 70 TV devices and set-top boxes, ensuring a stable user experience across all platforms.

Overview of Key Features

1. Binge-Watching, Redefined – Always Keep Content in View

The app radically rethinks the “Continue Watching” feature. Content that has already been started is visually marked not only in a dedicated section but across all modules and pages, including: 

• Search results
• Season overviews
• Recommendation carousels
• Topic pages
• Watchlists 

For series and shows, the next episode is prominently highlighted in the user interface. This function works across platforms, automatically syncs with the user account—but also functions for user without login.

2. Content Discovery, Reimagined – Visual, Emotional, Informative

The app features a visually rich interface that combines video teasers with intelligent metadata. While browsing, users already get a sense of the content's tone and style. 

Each title bundles all relevant decision-making information: 

• Streaming options 
• Age ratings (FSK) 
• Accessibility features 
• Rich metadata for mood, genre, subgenre, and viewing habits 

The interface is optimized for TV devices and remote control: large UI elements, clear structure, and responsive navigation.

3. Search Meets Inspiration – Efficient, Visual, Big Screen Ready

The search function blends classic text input with exploratory navigation. From the first keystroke, results are brought visually into focus. Additional entry points like: 

• Discover 
• Categories 
• Most Searched 
• Search History 

encourage spontaneous content discovery. Extensive filters (e.g. language, age rating, UHD) help refine results and enhance the joy of use. 

Here too, the UX is optimized for TV use—including simple remote control operation.

4. Meta Collections – Thematic Spaces for Relevance and Depth

ZDF offers a wide range of journalistic content—from documentaries to magazine formats. The newly introduced Meta Collections link formats across genres and organize them by current topics and societal questions. 

Whether climate change, democracy, or societal transformation: each collection brings together documentaries, magazines, talk shows, and fiction—visually curated, editorially grounded, and continuously updated. A balance of information and inspiration.

5. Video Player – Focused on Clarity, Precision, and Performance

The integrated video player is stripped down to the essentials—keeping the video front and center. All key functions like scrubbing, language settings, and energy-saving mode are easily accessible via an intuitive overlay. 

Feature highlights: 

• Optimized scrubbing for big-screen use 
• Next Video for seamless series progression 
• “More Info” for related content 

• Jump points for topics, people, and chapters 

• “Skip Intro” as a standard function 
• Highlight player for sports coverage with scene selection and live-jump 

Technically, the player is based on DASH streaming—for efficient, resource-friendly streaming with consistent video quality.