Case study · India
IndiaMatch summary and live score ticker concepts for a cricket scoring app
Answered a CricHeroes design brief with coded prototypes: a result-first match summary with eight views under one tab bar, and four live score ticker concepts for streamers that trade screen space for context in different ways.
Live pages
Role
Product Designer
RoleScope
Design brief · 1 match summary · 4 ticker concepts · Coded prototypes
ScopeTools
HTML, CSS, JavaScript, Figma
Tools01 Context
Who, why, and what
01 ContextCricHeroes set a two-part design brief: rebuild the summary page for a finished match, and design a live score ticker that streamers can lay over their video.
Designed forCricket fans reviewing matches and streamers showing live scores
02 Problem
What needed to change
02 ProblemPeople open a finished match to answer one question — who won — and a streamer's frame is expensive real estate. Both problems come down to what earns the space.
03 Approach
What I did
03 ApproachI put the result first and moved the recent-matches rail below the match, folded eight views under one tab bar, and asked one question for the ticker: how much of a streamer's frame is a score worth?
- Prioritized the match result and grouped eight supporting views under one tab system.
- Explored four visual weights for the live score overlay across a streamer's frame.
- Tested contrast and legibility against bright, real-video conditions.
04 Solution
What shipped
04 SolutionA result-first match summary that defers rather than removes detail on phones, and four working ticker concepts — broadcast bar, corner card, baseline strip, and replay wall — that all run on the same live match model.
A coded summary concept and four tested score-ticker directions designed around live video constraints.
05 Reflection
What stayed with me
05 Reflection