Matt Kofman | Live TV Tab

Context

what has been and where we want to go

Goal

An initiative with NBC News across all platforms is to start including access to more live TV streams in the form of 11 local NBC channels and 4 national channels

Visual enhancements

Leadership would also like us to make a few more visual enhancements in the form of adopting a dark theme and supporting brand logos in the Live TV package

Branding update

To go along with these updates, we also want to update the name of the tab from Watch to Live TV and change the icon to emphasize its updated nature of being a hub to numerous live TV channels

Foundations

and setting the foundations for success

Core updates for the Live TV tab

11 Live Local
Channels

Live local TV from channels like NBC New York, Bay Area, Philadelphia, South Florida, Chicago, and more

4 Live National
Channels

Live TV channels like Sky News, Noticias Telemundo Ahora, Dateline, and Today All Day

Dark Theme

Use a dark theme to make the tab feel more modern and to really highlight the content

Brand Logos

Update the Live TV package to support logos to reinforce branding

Tab Branding
Update

Update the branding of the Watch tab to Live TV tab to reflect all the new channels added

Ideation

and exploring concepts

Tab bar icon

We explored a number of concepts around a new tab bar icon to communicate the idea of live TV and added labels

Channel picker style

We explored a number of concepts around different ways to display the channels and picker, such as whether to display the different kinds of channels in one row vs two

Testing

and determining path forward

We then created 4 prototypes to test with users to determine how we should proceed

Concept 1 tested

Modern, simple local logos with colorful peacocks
Larger tiles
Two rows separating local and national channels
Live badges
Tab bar icon featuring a TV with play icon and radiating waves

Concept 2 tested

Single line local logos featuring callsigns
Smaller tiles
Two rows separating local and national channels
Live dots
Tab bar icon featuring a small dot with radiating waves

Concept 3 tested

Larger local logos featuring callsigns
Larger tiles
One row of channels combining local and national
Smaller live badges
Tab bar icon featuring a play icon within a circle surrounded by radiating waves

Concept 4 tested

Single line local logos featuring callsigns
Larger tiles
One row of channels combining local and national
No live indicator
Tab bar icon featuring a badge that says Live TV

In the end, users preferred

A tile size a little smaller than large
Larger local logos with callsigns
Two rows to separate local and national channels
Smaller live badges
Tab bar icon featuring a play icon within a circle surrounded by radiating waves

User Flow

and the experience step by step

As a user, I want to find all video content for NBC News as well as channels for live TV

I navigate to the Live TV tab in NBC News

I can tap on a live local TV channel to start streaming for free

Or tap on any VOD clip to start watching it in a playlist view