NBA Game Story

Helping casual NBA fans understand the game as it unfolds.

My role

I led the project from research through final design, conducting user research, synthesizing insights, designing the feature, testing the experience, and creating the final prototype.

Scope

Adding a new feature to an existing platform.

Tools

Figma, FigJam, Typeform, v0

The NBA app delivers real-time scores, statistics, and play-by-play detail. For fans still learning the game, that stream of numbers rarely explains what is actually happening on the floor.

The challenge

Live scores and statistics, with little context for anyone still learning the game.

Casual fans often struggle to understand key moments or catch up after stepping away, making it difficult to stay engaged throughout the game.

Understanding the fan

Research explored how casual fans engage with live basketball and identified opportunities to improve comprehension without disrupting the viewing experience.

Attention is split

Fans multitask while watching games, and many aren't able to follow every possession in real time.

Answers live elsewhere

Users leave the app for explanations, relying on highlights or social media to understand what they missed.

Numbers aren’t meaning

Raw data doesn't explain why important moments matter. Statistics lack the context that makes them legible.

Storytelling closes the gap

Clear storytelling improves understanding, and simple contextual explanations help users stay engaged throughout the game.

Research Opportunity Design

How might we help casual fans understand what is happening during a live game without overwhelming them with more information?

Designing Game Story

Research findings informed the experience strategy, feature priorities, and user journey. The focus was on delivering contextual information at the right moment while keeping the experience intuitive and unobtrusive.

User journey

Three journeys carry the feature, each defined by what the fan is trying to do at that moment.

Following live

A fan watching in real time needs momentum and context surfaced beside the score, without leaving the game they are already following.

Catching up

A fan returning after stepping away needs the story of what they missed first, not a full play-by-play log to scroll back through.

Arriving from an alert

A fan tapping a notification lands on the moment it described, so the alert and the screen it opens tell one continuous story.

Early exploration

Early concepts explored how narrative-driven updates, highlight moments, and game context could be integrated into the live game experience.

Four NBA Game Story lo-fi wireframes: a lock screen game alert, the live Game Story screen with score, momentum bar and highlight cards, an expanded highlight moment with narrative summary, and a Since You Last Checked catch-up screen

Testing + refining

Usability testing with five participants evaluated the clarity of the Game Story experience, focusing on navigation, highlight discovery, and understanding game momentum.

Hi-fi prototype

Clearer highlight navigation

Refined navigation and labeling to better distinguish the Highlights tab from individual highlight screens.

More meaningful momentum context

Expanded momentum summaries with additional context around player impact, key plays, and scoring runs. A simple momentum indicator was introduced to better communicate shifts in game flow.

Stronger connection between story + stats

Strengthened the relationship between narrative summaries and the box score, helping users connect key moments with the statistics behind the game.

Final design

Four moments carry the feature: arriving from an alert, understanding a single play, catching up on what changed, and going further into the game.

Arrive

Full size

From an alert into the game

A notification names what changed, not just the score, and opens straight into the live game rather than a generic home screen.

Lock screen live game alert: a 10-2 run puts the Lakers ahead, with View Highlight and Watch Live actions

Notification

Live game

Understand

Full size

What just happened, and why it mattered

A play breakdown leads with the clip and explains the moment beneath it in plain language, then ties that explanation back to the box score.

Play breakdown

Box score

Catch up

Full size

Since you last checked

A catch-up summary reports what changed while the fan was away, with the full highlight list a tap away for anything worth seeing in full.

Catch-up

Highlights tab: a list of tagged clips including a 10-2 scoring run, LeBron clutch three, AD monster block, no-look pass to Reaves, and LeBron coast-to-coast, each with its quarter and game clock

All highlights

Watch

Full size

Watching, and passing it on

The video page is where a fan watches the game itself. From there a moment can be shared, or League Pass opened to view subscription options and sign up for full live game access.

Video

League Pass

Reflection

The numbers tell you what happened. Context tells you why it mattered.

Game Story taught me how much context can change the way users understand information. By pairing live statistics with narrative, highlights, and momentum, I explored how an existing NBA experience could become more approachable without adding unnecessary complexity. It reinforced the importance of designing for understanding, especially when users are trying to make sense of information in real time.