DIRECTVs’ NFLST Sunday Ticket (App) user interface had not been majorly refactored in over 10 years. As a result, Apple App Store ratings had been trending downwards. Collaborating with a small team of writers, researchers, producers and developers, this was my game plan.

Role: Lead Product Designer

Platform: iPhone, iPad, Apple TV

PROBLEM

  • Customers failed to understand game chips used in the app.
  • Frustrated customers could not tell which games were blacked out.
  • Customers also had legibility concerns.

 

THE ASK

Explore opportunities to improve the designs by addressing customer pain points.

RESEARCH

Research Goals
  • Understand NFL user’s mental modal by studying what appeals to NFL fans.
  • Identify types of emotions that correctly represents these fans.
  • Inform design decisions based on key findings.

Card Sorting

By discerning user expectations and decision- making processes, we conducted an in-house card sorting exercise with 14 participants.

Key Insights

  • Live game watching experience was the most important.
  • Many users separated terms “live game” vs. past / future games.
  • Current game score, ball possession, field position and time remaining were crucial information for during live matches.

Affinity Mapping

Partnering with user research team, we talked to 20+ NFL fans, we asked:

  • What makes the NFL captivating?
  • What goes through your mind during the game?
  • What do you remember as a fan?
  • What differentiates it from other major sports?

Emotional Pillars

Distilling data from the affinity mapping exercise, thought patterns were identified and grouped together as emotional pillars such as Intensity, Physicality, Chaos, Strategy, and Pace & Rhythm.

Narrowing Down

To show alignment on user’s conscious/subconscious associations with the underlying emotional pillars, we conducted implicit associations testing.

Key Findings

  • NFL has the strongest emotional appeal (compared to other major professional sports leagues in the United States.)
  • Translates directly into strong viewership and loyalty.
  • Intense and Physical – the two most tangible attributes of the eight attributes tested.

Competitive UI Audit

I conducted a competitive audit across mobile, web and TV looking at several NFL apps and NFL affiliates. KEY FINDINGS
  • Dark and high-contrast backgrounds drive more visual impact.
  • Focus on team branding, with the use of color sparks instant team recognition.
  • Bold typography strongly resonates with brand.

DESIGN

  • One-screen destination to find Live games
  • Fresh & easily accessible content
  • Cross-platform consistency
  • An extensible and modern UI

Moodboards

Working with the copy-writing team, I leveraged emotional pillars to create and associate visual drivers.

For example, Intensity could be associated with high contrast, strong, bold and vivid imagery, typography or color.

These were some visualization ideas around emotional pillars as they translate into visual drivers.

Themes

From moodboards, visual drivers translate to the following UI elements such as font sizes, weight, color, button styles, iconography etc.

UI Explorations

Various game chip concepts were explored with the following design considerations:
  • Size
  • Color/contrast
  • Placement/order
  • Layout (for mobile and tablet)
  • Edge-cases
Shorter Game Chips

Shorter versions of game chips were explored with the following conclusions from user tests:

  • Less legible with smaller fonts for team status/scores.
  • Less branding opportunities for team logos.
  • Provided minimal breathing room, visually more cluttered.
  • Displayed “more tiles” when arranged vertically.
Taller Game Chips

From the same user tests, taller versions:

  • Scored better for legibility.
  • Aligned better with team branding opportunities.
  • Allowed for more breathing room and helped with visual hierarchy.
What Didn't Work

After A-B user testing, we addressed issues such as:

  • Field goal indicators: wasn’t fully understood (still) so we removed them.
  • Team background color conflict: resolved by secondary color option.
  • Panel branding – initial use of cropped logos violated NFL style guide rules.

Tying it Together

Everything ties back to previous research studies (i.e. card sorting and emotional pillars):

  • Each game chips redesigned to represent live vs past/ present games.
  • Visual drivers represented by using strong and bold team colors, typography and diagonal lines.
  • Blacked out tiles more legible and clearly represented.

Results

  • Social media feedback improvements by 75%.
  • Apple App Store ratings improved to five stars.
  • For NFL fans, NFL Sunday Ticket is still the no. 1 app among competitors.