NBCUniversal Apps on tvOS

The Challenge

The NBC app needed visual and UX updates to support content from multiple NBCUniversal networks.

The Solution

The NBC app was fully redesigned to make content from other networks discoverable, improve path to video, and include engaging features that have outperformed previous iterations of the app. As a result, Apple has called the app “Best in Class” and featured it in its Human Interface Guidelines.

My Roles

I was lead designer for several key features including Home, global navigation, interaction/motion design, and UI patterns for global focus states.

Recognition in Apple's Human Interface Guidelines

The NBC app was featured in Apple’s H.I.G. in three categories: "Navigation", "Great EPG Experience", and "Search".

While I contributed heavily to the EPG, my work is most notable in the Navigation category. I designed and delivered the updated global navigation, full Home page, tile metadata patterns, focus state UI patterns throughout the app, and our new “Smart Lead” feature.

The Smart Lead

A major component of the redesign was the Smart Lead, which is a hero section on the homepage that presents personalized content.

Smart Lead Functionality

The Smart Lead highlights relevant content and directs the user to the most appropriate point in a show or movie.

For example, if a user has never watched a given show, the CTA will read “Start Watching” and direct them to the show’s first episode. The Smart Lead can also intuitively direct the user to mid-episode progress or the next unwatched episode in a season. Episode metadata is clearly displayed in Smart Leads, a nod to user testing that revealed specific episodic information is more helpful than summary descriptions.

Increased Engagement

Relevant content, clear CTAs about the user’s watch progress, and video previews proved to significantly increase engagement over the previous design’s hero content.

Video Previews

A/B testing found that video previews on tiles improved click rates throughout the app.

Video Preview on Smart Leads & Tiles

All show, movie, episode, and clip tiles display video previews when in focus.To make the Smart Lead more engaging, it also resolves to full background video without audio. Muted audio tested favorably with users compared to other streaming products that use audio by default.

Intuitive and Consistent Design

Network Attribution

To ensure content from the included NBCUniversal networks is easily recognizable, network attribution is included on all content (video tiles, show tiles, smart leads, content pages, etc). Testing showed that users easily discover network content and are delighted by the breadth of availability.

Consistency on TV Platforms

UX and UI patterns that I delivered for show titles, video tiles, network attributions, shelf/row treatments, focus states, menu navigation, and color contrast are used globally throughout the tvOS app. They are also replicated throughout NBC apps on Roku, Fire TV, Android TV, Samsung smart TVs, and Vizio smart TVs.

Menu Design

The NBC app is designed to highlight relevant content and information by using intuitive patterns and avoiding visual clutter. For instance, the global navigation displays all menu items at the top of each page, but collapses to only the relevant page info when the user moves down. Go to "NBC APP Homepage Interactions"

Content Tiles

Tiles throughout the app were updated to make the type of content more visually intuitive: Show, movie, or episode.

Vertically-oriented tiles direct users to show or movie pages. Landscape tiles point to directly to video. Pages that allow for content discovery always use a “peek” of shelves that can be scrolled to.

To help the app feel more premium and interactive, background colors change when moving from one tile to another.

Live EPG

The Live feature expanded to include over 10 networks, requiring a new EPG experience.

Simple UX/UI

In order to keep the schedule from being overwhelming, metadata is kept minimal, only displaying detailed episodic information when a listing is in focus. Progress bars for all currently streaming shows and clear time blocks help make the schedule scannable.

While in a Live schedule experience, it is valuable to keep a persistent view of the currently selected network. This helps users keep track of the show they’re watching while browsing other listings. Testing of competitor apps and prototypes found that full screen background video is undesirable. This feedback helped lead to a design that utilizes the upper portion of the screen as a persistent player.

I was not the only designer on the team that worked on the Live EPG, but I contributed heavily to the concept, UI, and research for it.

Accessible Colors & Typography

Each show is assigned one of over 40 WCAG-compliant color presets that we created. These presets populate CTA button colors and gradient backgrounds that change color when individual tiles are in focus and for throughout the app.

We also moved from Light to Semibold and Regular font weights for tile metadata to help with legibility of the 10ft experience.

A Cohesive Cross-Platform Design

While designing the TV experience, the mobile experience was created in parallel. Leading the design for many features on both platforms (and web) helped me ensure feature parity across the entire app ecosystem.

Production Design Guidelines

Designing a modern and visually exciting cross-platform experience required rethinking how images are used throughout the apps. A new system was created to govern how show imagery populates the UI, significantly reducing the number of assets required for each show.

Handoff Guides for Production Designers

Detailed handoff guides and Photoshop templates were created that describe image usage throughout the apps, image specs, image safe areas, and delivery procedures. These guides were handed off to all production design teams during detailed walkthrough sessions.