Discovering TV content for 2024 March Madness
Timeline
3 weeks (Dec 2023)
My Role
I was the sole designer and led interaction/visual design and prototyping. I worked closely with our PM on defining requirements and our tech lead on implementation.
Figma Prototype
Context
Deliverables
DISH TV is a satellite TV provider. Sports is the #1 reason for subscription and March Madness is one of the biggest annual events for viewership.
Every year, DISH launches a centralized content hub for viewers to find, record, and keep track of scores of games.
I designed an TV app for DISH receivers where viewers can discover live, scheduled and recorded games, view game statistics, and track tournament progression in bracket.
I created design and interaction specs and handed them off to the dev team.
Impact
Used by 430K+ households which resulted in 1.5x usage and 2x engagement lift compared to previous years.
The successful rollout under the new Android TV software architecture also provided the benefit of faster load times, smoother transitions, and greater feature access when the receiver is offline. In addition, the app serves as a modularized, reusable template for future seasonal events and campaigns, and therefore accelerating the release process.
Creating a tailored, yet reusable experience
The goal is to not just replicate experience from past years; but to create a template for future seasonal events that could be reused under the new Android TV software architecture.
Given engineering resource constraints, it was my PM’s and my priority that we reuse existing patterns and pull already available data while finding room for design improvements and customizations to the event.
Before: Generic game thumbnails
Before: Poor layout and information overload in content detail page
Existing research shows that viewers care about supporting their favorite teams and knowing how the game is progressing right away. I redesigned the generic game thumbnails to make teams playing easily recognizable and include timestamps and scores.
After: More metadata but still scannable
The existing content detail page is not capable of showing metadata specific for sports. I proposed a new interaction pattern showing the GameFinder app instead, which already has high daily usage and engagement from sports viewers.
After: Relevant scores and stats for sports fans
The ‘Spotlight’ shelf was not yet implemented, but I aligned with engineering and provided specs so that it will be added to future app templates once ready.
Negotiating old & new patterns
I drew inspiration from the official NCAA app, YouTube TV and Fubo TV to combine required content shelves and functional features.
Knowing that our customer demographic of 55+ prefer, predictable experience, it was important that the layout and components were largely familiar.
Where I decided to break the pattern
Pressing the <Options> remote key typically activates the Options menu in DISH experience. This pattern requires excessive attention shifts between the screen and the remote and unnecessary key presses for this app with only 2 options.
Surfacing the Recording and Score Visibility options directly on the screen should give them more discoverability.
‘Record all games’ and ‘Show scores’ were set-it-and-forget-it features that should be highly discoverable.
High fidelity and prototypes
The first step was to rework game tiles into 4:3 ratios to fit the home screen template and add seed information.
In the upcoming game tiles, I moved the second team’s seed from the end to the front of the team name to prevent it from truncating off with longer team names.
Ongoing/Completed game
Recording flow
➡️
➡️
Offline experience
Upcoming gameAs the most reusable and implementable solution, the existing apps shelf in the home screen was used to format links to bracket view, other viewing apps and the recording and scores buttons. Initially, I arranged them based on what I assumed to be their order of popularity. However, upon realizing that bracket view, college sports multiview, and Game Finder all direct to different views or apps, while the other two primarily function as settings, I decided to visually group and separate them for added clarity.
Given that recording all games in the tournament would be the sole recording option available, the tile only required toggling between two states. After exploring a few color and toggle options, I settled on just adopting the ‘recording’ badge from Game Finder and changing the tile text according to the recording status. I wanted to avoid drawing too much attention to the tile with intense colors and to prevent any potential confusion in this less-than-ideal use case for the toggle.
I am working with the marketing team to finalize artwork for the banner image, app icon, etc.
Bracket view
The bracket view will primarily reuse the layout and UI from previous bracket challenges, incorporating refinements on typography, spacing and color to reduce visual clutter and complexity and enhance overall legibility.
After prototyping and testing the full bracket view (left) where an overlay indicated the focus state on each region, I realized that navigation would be too confusing and clunky, especially moving from the ‘Championship’ section to the other regions. Since TV remotes only provide 4 basic directional navigation keys, navigating such a layout would be ambiguous. Therefore, I proposed a tab-based navigation scheme instead, mirroring the pattern in the official NCAA app. This will be much more intuitive to navigate between regions.
Offline experience
When the receiver is not connected to the internet, some features become unavailable. Thankfully, as Game Finder already supports most features offline, the experience will be mostly identical except not being able to show scores or stats.
Stretch goals
Front load show/hide score setting
In Game Finder, scores are shown by default and usage for toggling it off is extremely low. The caveat is that this setting is hidden in the bottom most shelf. Those who wish to hide scores to avoid spoilers might feel way more strongly about it than others. It would create a more sensible experience if they could pick their preference upon launching the app for the first time to avoid seeing any possible scores at all. I plan to run this concept through an unmoderated user test to determine if we should add it as a nice-to-have feature.
Similar example on DirecTV Stream