Ian Rogers
Product & Experience Design

TVE Video Interface

Streaming Platform • Live Video • Accessibility
Featured Project Image
Hero image of multiple devices showcasing NBCUniversal TVE player controls. An iPad displays the NBC News video player with Meet The Press live and show details below. In the background, a large monitor shows Super Bowl XLIX with a 'Watch Live Now' prompt over a still of the New England Patriots and Seattle Seahawks. In front, a mobile phone shows player controls with a clip of Joan Rivers. To the left, a laptop features Sprout’s Chica Show with guest Mario Lopez, highlighting custom player controls with the volume control open.

Overview

The TVE Video Interface was a key feature for the portfolio of the 12+ TVEverywhere network sites. The entire NBCU streaming experience was dependent upon the quality that this player would deliver.

NBCU's streaming sites had been using an outdated player with minimal functionality. The player was clunky, offered one fixed viewport width, and visually contrasted with each TV Network brand. Strict FCC accessibility requirements were about to take effect but closed caption functionality was nonexistent. A complete redesign of the player and the player page was the only solution.

The new player interface adapted to different viewports, making the experience mobile accessible. New tech features allowed for saving, live, and 10-second rewind. Detailed hover effects provided instantaneous and smooth visual feedback. Closed captioning options exceeded the minimal FCC requirements.

Drupal-controlled color options enabled each player seamless branding integration with their TV network site.

The player page redesign utilized optimal playback video width guidelines and key breakpoints. Previously underutilized metadata was brought into visual and consistent alignment throughout all the player pages for content accessibility.

Before Redesign: Player & Player Page

Video Controls, Live State, Metadata, Ad Unit

Reference only, shown for context

Three comps showcasing possible visual and content directions

Player Redesign: Specs

Interactions (Syfy Branded)
Palette info, Primary, secondary button specs, general player controls and hover states
VOD Player, time display, scrubber and filmstrip preview, live player controller
Volume controls, close caption options

Full Screen

Paused State with Overlay Episode Info
Video showing episode info in upper left

Player Sizing

Player sizing at key viewports
3 size control views: 1280px, 768px, 568px

Volume Controls

Paused State with Video Info (E Now! example)
Laptop with browser view of video player

Live Player

Live, Actively Scrubbing, After Rewind
3 iPad views of Superbowl game and player functionality

VOD Scrubbing

Scrubbing State (with image preview)
Laptop scrubbing

Closed Captions

English Subtitles (Telemundo Example)
tablets showing close captions options and displaying captions enabled on video

Mobile Viewport

Player Page/Video Control Examples
Menu Opened, Show info shown, Video Playing
Telemundo: Closed Captions On
Mad Money Playing Live
CNBC: Ad Unit Example
Standard Player with Bravo branding
Bravo: Show Info Opened
Live Broadcast with Lester Holt
NBC News: Live Player
Scrubbing with thumbnail preview
Oxygen: Mobile Scrubbing
Sprout playing
Sprout: Volume Controls