The Project
In 2017, Verizon Media partnered with the NFL in a $2 billion deal to stream live NFL games for free in the Yahoo Sports app. This was a game-changing partnership that drastically shifted the app’s focus and trajectory.
My Role
I led this project from early conception to completion - and then subsequently through the app’s broader redesign. I later became the design point-person for all-things-NFL across the company as other teams integrated NFL live streaming into their properties.
The Outcome
NFL live streaming remains one of Yahoo Sports’ top successes and is our single biggest revenue driver, increasing DAUs by 40% YoY. In 2020 alone, the initiative enjoyed a 74% increase YoY in unique streamers, and a 123% increase YoY in average minutes watched.
Highlights & Key Features
Watch Tab
Goal
To create a dedicated video hub for users to watch live games, browse a schedule of upcoming live-streamed games, and watch game recaps and highlights
Outcome
Achieved an average watch time of 41 minutes per user per week, with a return rate of 78%
The watch tab is responsible for 58% of total minutes watched
Upcoming Live Games
Goal
To allow users to explore upcoming live games, set reminders, and infuse excitement towards anticipated games
Outcome
Increased return rate through game-start notifications by making the “remind me” action more prominent
Home Tab
Goal
To promote awareness of our free NFL live streaming offering on the home tab - the first place users land upon entering the Yahoo Sports app
Outcome
33% of unique streamers watch games from the home tab
The home tab accounts for 18% of total minutes watched
Game Page
Goal
To increase viewership and minutes watched by including the livestream on a game’s matchup page, allowing users to explore stats while watching the game
Outcome
33% of unique streamers watch games from this page
Game pages are responsible for 21% of total minutes watched
The Process Explained
Background and Goals
When the deal was being negotiated, we knew it would be a game-changer for our product and users. At this time, our app had provided everything a sports fan would need to stay up-to-date with their favorite teams and games (scores, news, play-by-plays, stats, game info, etc.) except one big missing piece: the game itself. And now here we were, absolutely giddy, figuring out how to include free(!!!) live streamed games in our app for NFL fans, our largest user base by far. It was a big freaking deal. Here, my work began as the design lead for the project.
Given Yahoo Sports’ focus on video engagement and the overall importance of the feature, we decided early on that we wanted a hub for live games in the app. I dove in with our fantastic PM through brainstorming, competitive analysis, early conception and sketching, lots of iterations, hi-fi mocks, and (of course) user testing to nail down a design direction. Through initial brainstorming and early user research on live-streaming behavior, we gathered three top goals for this dedicated video hub:
Highlight the live game(s) that a user can watch
Showcase upcoming games a user will be able to stream
Include game recaps and highlights from previous games
Early Explorations
Competitive analysis heavily informed the early-exploration stage of this tab as we examined nearly every video-centric feature or app that existed at the time; for example, YouTubeTV, Instagram’s discover page, Netflix, Facebook videos, and ESPN to name a few. I explored four distinct variants as a result of our research:
After assessing each options’ pros and cons with the broader team, we chose Option 4 as our starting point due to its clear hierarchy with emphasis on the live game. Next, I teased out Option 4 further in order to prepare for testing with User Research.
Iteration Nation
Having narrowed in on a direction, it was time to fill out the details. I collaborated closely with our team’s product manager to work through numerous questions and scenarios, for example:
What if there was more than one live game available to watch?
What if there are no live games at a given moment?
How many games would display in the schedule? Would it be too many for a horizontal carousel?
What if we offered live streaming for additional sports/leagues in the future?
Here you will find a sample of explorations stress testing this design, preparing us for user testing.
This Might Just Work!
Many iterations and user testing cycles later, we arrived at a design (portrayed in this prototype) that resonated well with our users. Several key elements made this design particularly successful:
The live game schedule carousel acted as a controller for the video playing above it
The game schedule was comprised of current live games, followed by upcoming streamable games in a seamless experience, whether a live game was playing or not
Live games were prioritized and autoplayed at the top of the page, fulfilling our most important goal
Live game cards were visually differentiated from future games (e.g. brighter color, selected state)
The video controller’s dark background helped it feel connected to the selected video
Highlights and game recaps could be explored in a stream below the live game content
Top navigation allowed users to filter by league, making this a scalable design for future partnerships
*This version was created in the app’s previous design, which was later translated in our newer redesign, which I subsequently led
Final Designs
Once we confirmed the prototype was well understood by users, it was time to finalize the nitty-gritty design details; for example:
Displaying our NFL partnership logo below the video in every location after learning it was a core requirement from the NFL
Linking users to stats from the game card after user testing revealed the need to easily access stats while streaming
Adjusting the header tabs to accommodate more leagues
Naming the tab “Watch” after much debate
*For the most up-to-date designs in our new design system, please see the mocks above in the Key Highlights & Features section.
