Follow a Live Match Without Watching
Design a live sports match center that makes score changes, key events, statistics, and context easy to scan.
The brief
Understand the problem
Background
Fans often check a match while commuting or working and cannot stream it. They need a fast summary of what changed, why it matters, and which statistics provide useful context.
User context
Ben follows his football club during a train journey with inconsistent connectivity. He wants score alerts but not notifications for every minor event.
Product problem
Live data can change rapidly, arrive out of order, or stop updating. A dense statistics view must remain useful on a small screen and should not rely on constant animation.
Objective
Create a live match experience with configurable alerts and resilient status communication.
What to design
Define the experience
Required experience
- Match overview with score, clock, and competition context
- Chronological event feed
- Readable team and player statistics
- Notification preference controls
Screens and states
- Match overview
- Event timeline
- Statistics
- Alert settings
Core user flow
Follow the critical path
- 01
Ben follows an upcoming match and selects goal and final-score alerts
- 02
He opens the match after receiving a goal notification
- 03
He scans the event timeline to understand what happened
- 04
He checks possession and shot statistics
- 05
The connection drops and the interface communicates data freshness
Product rules
Requirements and constraints
Requirements
- Show when live data was last updated
- Distinguish confirmed events from events under review
- Use redundant cues for team, score, and event changes
- Allow granular alert preferences per followed team
- Preserve the latest known state during connection loss
Constraints
- Updates may arrive late or be corrected
- Some competitions provide fewer statistics than others
- The mobile experience should be usable with limited bandwidth
Reality check
States worth considering
Finish line
What to deliver
- Design four mobile screens and show both live and stale-data states.
Optional direction
Visual resources
Use these as a starting constraint if you want one. They are not part of the required solution.
Libre Baskerville & Montserrat
Clear interface writing gives people the confidence to understand what changed and decide what to do next.
Libre Baskerville & Montserrat
Clear interface writing gives people the confidence to understand what changed and decide what to do next.