NFL+ Streaming

Building the streaming experience that brought live football and the NFL's entire game library cross platform for the first time.

The NFL mobile app has over 8.5 million active weekly users and with the end of a decade-old rights deal came the opportunity for a new in-house streaming opportunity. I led a multi phase design of the NFL's exclusive football streaming product, NFL+ across mobile (iOS & Android), web and CTV.

ROLE

Product Designer - Project Lead

TIMELINE

September 2021 – July 2022

WHAT WE ACHIEVED

$110M

annual revenue

from monthly & yearly subscriptions

+1.5M

new subscribers

within the first year of launch (2022-2023)

+20%

in active users

after each successful phase launch

THE CHALLENGE

We were asked to launch NFL+ as the exclusive home for live NFL games on mobile (a feature notably missing from our own CTV and Web platforms) while entering streaming for the first time with no institutional playbook. The mandate was double-sided and often at odds: create a distraction-free, trustworthy viewing experience for fans, while building in the ad inventory the business needed to sustain partnerships.

Business Impact

The NFL's mobile live game rights had been part of a decade long deal that came to a close at the end of 2021, giving NFL Media the opportunity to have its first in-app exclusive subscription service. A subscription service would open the door for new ad revenue, partnerships, user retention/funnels and exclusive content opportunities we never had before.

18.7 million

NFL fans on average watch a regular season game live on TV

8.5 million

unique active users visit the NFL App weekly

My Role & Scope

I was the design lead on the NFL+ project, responsible for managing mobile and web, directing the overall design approach, and owning the most complex parts of the experience. My team (our senior director and, later on, a CTV designer) worked in parallel to cover the breadth of the CTV platform, with our Creative & Branding team collaborating on the visual direction and Design, DTC & Product making key decisions at every stage.

The scope included the full viewing experience across platforms: the home page, content discovery, live game access, NFL Network, game replays, the multi-game watch experience, and the full subscription and paywall flow. Every surface needed to communicate the value of NFL+ clearly and honestly, especially for users who weren't sure what they could actually watch with their subscription. For this case study we will focus on the NFL+ home page - our 'playlist of football'.

Our Approach

Multi-phased approach to handle varied offerings across platforms, and establish a subscription understanding before a multi-tiered roll-out

I lead the design of our NFL+ shaped by two main challenges:

Confusing Offering: A complex game offering based on device, location and time of season
Retaining Value: Creating opportunities to show the value of offseason
Discovery vs. Disruption: Balancing executive emphasis on NFL+ being center stage and pre-established user behaviors

Phase 1

MVP Launch

I collaborated with UX Research to understand the scope of historical studies we had and what would be needed to determine our key pain points in the fan journey across content and video consumption. Then brainstormed with DTC to generate solutions from quick fixes to ambitious bets. I went back to UX Research to develop a user testing plan that resulted in determinging direction and iteration.Then I worked with my PM and Engineering on determining scope and phasing out the work.

What Shipped

We launched with a functioning football streaming experience supporting live and VOD content. Fans could sort through a game playlist with matchup cards that displayed differentiating meta data depending on game consumption capabilities and subsciption tier; they could also open the cards' menus to change the broadcast. That playlist was filterable by week and year for power users to go back through historical archives.

Impact

We established a brand and an understanding of a net new product within a historically rigid audience while collecting a quality baseline for research to build toward our larger goal.

Phase 2

Emphasizing Premium Tier, Driving Retention Through the Offseason

MVP launch gave a list of challenges to tackle with Q&A, we prioritized experience breaks and ticketed polish bugs for the future. Led Engineering through new offering incoorperation; RedZone & NFL+ Exclusive Content. Fans had a dedicated Replay library for power users

What Shipped

Including watch/listen availability language to develop users understanding of the offerings. Inclusion of RedZone and NFL Network, key product offerings needed for the 2023 season. Improved organization of the games list to maintain chronological order in the pre state but prioritize in market, live games. Overall look & feel aligned with accessibility requirements while also addressing polish tickets and improving viuals.

Before & After

NFL+ Home Screen on a Sunday Morning for a NFL+ Basic Subscriber

Design Decisions

Video Playlist Permanence

We moved away from the industry standard streaming model of horizontal trays of categorized content that you see for product with deep libraries of content (HBO Max, Netflix and ESPN+). Why? NFL+ has a limited inventory of content (for now) of football, football and more football
Video player stays sticky to the top of your screen as you scroll the list of games.

Improved Communication

Users had trouble finding alt broadcasts and understanding three dot icon; new designs layout how many audio & video broadcasts are available & give explanation when video is unavailable, also uses common pattern of down arrow signifying card expansion/more menu

Phase 3

Focus on Polish and Cross Platform Product Understanding

Mobile App met our goal metrics, then exceded them. Web however... web had been pushed off for many reasons; LOE for engineering & lack of designers being the two main factors. With mobile in a strong build and an impending full app redesign coming around the corner, I began a breakdown of what our possible solutions were for NFL+ on Web. CTV was in the midst of being designed by our Design Director and we collaborated to share finalized components across experiences.

What Shipped

A interactive Hero displaying 'sneakpeaks' programmable by Content to immerse fans in the most relevant content. Horizontal Carousels of weekly football games and NFL+ exclusive content. Replay wall of the past weeks games that can be filtered back in time through our historical archives for our power users.

Design Decisions

Having horizontal trays of short form content on Web and moving RedZone, Network & Replays to tabs
Keeping longer form form content the focus for CTV and varying the types of cards, exposing RedZone, Network & Replays all in one place for scrolling
Retaining metadata patterns from Mobile so users can make connections and better understand

New CTV Designs were finished by a Sr Designer and our Design Director in 2023. Our team worked together to make sure that the web experience and CTV experience had design cohesion to allow for a understandable and recognizable product across platforms.

Outcome

Changing the way NFL fans watch football

This work put the NFL on the map as one of the few mobile applications that can *legally stream live football games. We expanded over the course of two years to ensure fans had quality experience on Web and CTV as well. Through collaboration and trust, our team was able to go through heavy executive pressure and intense Reddit scrutiny to iterate across launches and deliver a streaming platform that allows seamless game watching throughout various phases of the season, with an emphasis on new live content. This project also set the baseline for future streaming goals and possibilities and allowed us to have a deeper understanding of our user base.

Nothing was cooler than watching the first product I lead to launch get pulled up by the guy sitting next me on the plane.