Matt Kofman | Live TV Package

Context

what has been and where we want to go

The ability to have a native live TV player in the app has long been a desire from product and editorial

Current experience

The app can currently bring the user to a web view containing a live stream, but this limits us in our ability to use it in creative ways

Benefits of native

By building a native live player, we can utilize live TV in more strategic and immersive ways to better help tell stories as they happen

Scalability and reuse

We can make this new package scalable such that we can reuse it in the future to help facilitate building a new Watch tab experience focused on live tv, which is our future vision

Foundations

and setting the project and ourselves up for success

Leverage existing patterns

The Live TV package should fit in seamlessly into the existing news flow such that it feels like a natural addition to the storytelling

The best way to do this is by emulating a package that we already use to highlight the latest news stories - the Hero package

The Hero package is comprised of a large headline and optional image, eyebrow, dek, author, timestamp, and relateds

The Live TV package needs to be able to support these with the ability to turn options on and off in the CMS for editorial to best tell the story in the moment

Additionally nbcnews.com has an autoplaying livestream module that can we use as inspiration

Support for NBC News NOW and MSNBC

Being that both brands are built from the same codebase we’ll be able to have live TV streams for both

While NBC News NOW is a completely free stream that requires no authentication, MSNBC requires authentication with a TV provider

Muted autoplay

Provide the quickest experience possible for users to open the app and start watching live TV autoplaying the stream immediately, but also keeping it muted as to not overwhelm

Ideation

and exploring concepts

Based on existing patterns, considerations of storytelling flow, and scalability I created 3 distinct concepts to run by our team to determine our path forward

Concept 1

Concept 1 allows us to test a design that utilizes

A control overlay that would appear when the user taps on the video player
An unmute button that says “tap to unmute” mimicking the unmute button found on web
An inline watch live indicator similar to the one used on web
A full screen design that includes the headline of the video while controls are displayed
A PiP mode using the app custom designed PiP (built before Apple had system-wide PiP)

Concept 2

Concept 2 allows us to test a design that utilizes

A video player on the Cover that once tapped will immediately bring users to full screen
An unmute button that says “tap to unmute” mimicking the unmute button found on web
An unmute button that only uses an icon to simplify the design
A watch live indicator that uses a badge for an eyebrow
A full screen and PiP experience powered by the system default full screen player and PiP player

Concept 3

Concept 3 allows us to test a design that utilizes

A video player on the Cover that occupies a smaller space
An unmute button that only uses an icon to simplify the design
A watch live indicator that uses the same design as the one used in the snack menu
A full screen experience using a similar implementation to another player already used
A PiP player that would branch from our recently redesigned Listen tab

Resolving

and determining path forward

Quick internal validations

We ran some quick guerrilla testing, spoke with stakeholders, and discussed as a team how we felt the experience should work best based on timeline

We decided to use

One Touch from Cover to Full Screen

Allows the user to get into Full Screen and become fully immersed in the news faster

Simplified Unmute
Button

Allows the user to see more of the live TV stream before going to Full Screen; users are familiar with unmuting

Live Badge

A watch live badge indicator to allow the package to feel exactly like other hero packages

Full Screen

A full screen experience using a player that would be a branch of an existing custom player we use

Picture-in-Picture

Reuse the existing custom PiP experience that has been built into the app, but plan for future swap to Apple provided system Picture-in-Picture for a better experience