TVE Player | Ian Rogers

Overview

The TVE Video Interface was central to NBCU’s TVEverywhere sites, delivering video across twelve networks. The platform’s success hinged on the overall experience shaped by this single player.

Challenges
NBCU's streaming sites were using an outdated player with minimal functionality. The player was clunky, limited to a fixed viewport width, and visually clashed with several network brands. New FCC accessibility requirements were also about to take effect, but closed caption functionality was nonexistent. The player pages of each network were also a cluttered mess, distracting from the actual viewing experience.

Design Solution
The new player was designed for flexibility and custom brand integration. It automatically adapts to different viewports for a seamless mobile experience, complete with content control features (saving, live playback, 10-second rewind). Hover effects offered smooth and instant feedback, while the new closed-captioning system exceeded FCC compliance standards.

Integration Results
Drupal-controlled color theming allowed each player to reflect the branding of its respective network site. The redesigned player page utilized optimal breakpoints for ideal playback quality. Previously overlooked metadata was brought into visual alignment across all network player pages, reducing noise and improving the NBCU streaming experience.

UI Player Control Design
Visual design of NBCU’s TVE player controls, delivering a fully branded streaming experience across all network sites
Video Player Page
Fully branded, responsive player pages with metadata, episode info, ads, and live indicators, customized per network
Mobile/Tablet Designs
Created responsive player experiences across devices
Video Player Style Guide
Documented detailed specs for player controls, including sizing, states, and interactions across breakpoints
Player Page Guidelines
Outlined network-specific player page specs for development, including branding, metadata hierarchy, layout, and live states
Editorial Constraints
Defined which player elements networks could brand with color, while providing generic fallbacks

Player Branding Setup
Configured player controls with network-specific colors, giving editors a customizable starting point
Closed Caption Design
Based on research/best practices from general system settings: font selections, colors, sizes, etc
Development Player Assets
Provided the video team with fully cut UI elements, ready for integration
Design QA & Testing
Validated development builds against comps, stress-tested interfaces, ensured design intent before launch
Content Curation
Created content scenarios showcasing application on various networks for client presentation and approval
Level of Effort – Design
Estimated hours to support resourcing and cost planning