Sports Zone on Roku

I designed and shipped the first-ever Sports experience on Roku. Sports fans can now find and stream their favorite teams' games from one place instead of having to navigate through a sea of apps.

Role: Design strategist responsible for the end-to-end design lifecycle from discovery to launch.

Duration: Phase 1 Oct 2021 to Sep 2022

Sports streaming is fragmented. Prime owns Thursday Night Football, Apple owns MLS, and so on.

Sports fans are increasingly confused about which streaming providers are broadcasting their sporting events.

The problem

Opportunity

Create an experience that aggregates all live and upcoming sporting events in one place. Launch Phase 1 with the top 5 most followed sports in the US.

Target audience

Of the 70 million Roku subscribers, 74% regularly watch sports. We targeted avid and casual fans.

Design strategist

  • The one and only designer on this large-scale feature

  • Worked with Product and Engineering leads to scope, prioritize, and plan each phase of the project.

  • Worked with Research to inform the final designs.

  • Contributed new patterns for Sports to Roku Design Systems.

My role

Foundational research showed that users:

  • Want a consolidation of sports in one place.

  • Want a better connection to their favorite teams (browse filter; getting alerts).

  • Want a schedule and links to live and upcoming games.

  • Want to be able to follow teams, players, and leagues; and set notifications for start times both on the TV and the mobile app. 

  • Want to see scores and progress indicators that are customizable.

Foundational research

My design goals were based on the foundational research:

  • Game tiles: Create an emotional connection between sports fans and their favorite teams

  • Browse screens: Design an experience that helps sports fans find their games as quickly as possible

  • Watch details: Offer watch options based on ML and personalization

Design goals

Designing the Sports experience consisted of 3 parts:

  1. Game tiles

  2. Browse screen

  3. Watch Details screen

Components of my designs

These points of discovery in the Browse experience are crucial to user paths that enable quick identifiers to teams and offer optimal clarity on who is playing, when, where, and how to watch.

Goals of the tile design

  • Design tiles that help users quickly identify matches and start streaming immediately. 

  • Create custom artwork unique to the Roku Sports Zone.

  • Develop a pipeline for metadata that would enable quick programmatic generation of tiles.

Comparative research on game tiles

I looked at several of our competitors to try and glean some insights into how others were displaying sports metadata on their browse tiles.

Component 1: Game tiles

Final tile designs

I worked with Engineering to deconstruct the available metadata (team logos, team colors, team names) and then reconstruct the game tiles to be programmatically generated through code:

  • Enabled Engineering to automate the creation of the tiles, saving hundreds of hours in cost and time

  • Delivered custom game tiles that were unique to Roku

  • Delivered artwork that sparked an emotional connection with sports fans

  • Aligned with Usability test results that revealed that sports fans recognized team colors and logos and did not need team names spelled out on the artwork; we took advantage of this so as not to clutter the bold look of the game tiles.

Tiles on the Sports Discovery Browse experience

I pulled apart the unstructured metadata and reconstructed it again to communicate league, away team and home team; and event date and time. This event metadata displayed under each tile as the user hovered over each event.

The browse experience on the Roku Sports Zone is the meat of the experience. It’s how sports fans find what they’re looking for. We enabled discoverability via a left-hand nav link on the Roku home screen.

Each row on a browse screen is made up of the programmatically generated event tiles as described above.

Component 2: Browse screen

Tile ordering

Based on usability data on our Sports fans, I sorted the tiles in each row by recency, with implicit favorites taking priority.

I also prioritized the “On Now” row over “Upcoming” event tiles; with a two-week broadcast limit.

Row ordering

I worked with the AI team and User Research to define the order of the rows:

  • Live events

  • Upcoming events

  • Location

  • League popularity

  • Seasonality

  • Tentpoles (World Cup, Olympics)

  • Favorited teams (Phase 2)

Component 3: Watch Details screen

Selecting a game tile navigates the user to a game details screen with the most relevant watch options.

I leveraged our existing Design Systems template for TV shows and movies and applied them to the Sports watching experience. The goal was to create an immersive experience that would keep the user engaged while viewing ways to watch the event. I worked with the ML team to order the watch options based on:

  • Entitlement

  • Recency

  • Broadcast air time

The Roku Sports Zone launched in September 2022. We continued to expand on the feature by adding more leagues. Streaming hours on the Roku platform increased by 30% month over month since launch.

Outcome

Post launch, I introduced a monetization strategy so that advertisers and sponsors could showcase their brand through the design of immersive sponsorship experiences. I built the framework within the zones for us to monetize leagues including the NFL and Formula E. This enabled $10 million in sponsorship revenue.

Post delivery