Back to all projects
Google Scores
Google Scores
Hover over any of the last 5 fixtures of a team to view the scores without the extra click.
Team
Boluwatife Olasupo, UX Designer
Batman Boluwatife, UX Designer
Role
Feature Design
Context & Motivation
Context & Motivation
As a football lover, I often check match results on Google. While reviewing the “Last 5” indicators (green = win, red = loss, grey = draw), I noticed a gap:
As a football lover, I often check match results on Google. While reviewing the “Last 5” indicators (green = win, red = loss, grey = draw), I noticed a gap:
These dots showed match outcomes but lacked more helpful context. What team did they play? What was the score?
These dots showed match outcomes but lacked more helpful context. What team did they play? What was the score?
To get details, users had to leave the standings view and dig into each club’s fixture history — a multi-click journey that broke the experience.
To get details, users had to leave the standings view and dig into each club’s fixture history — a multi-click journey that broke the experience.
Opportunity
Opportunity
The idea was simple:
The idea was simple:
Let users hover over any of the “Last 5” form dots to instantly see the opponent and final score — without leaving the table view.
Let users hover over any of the “Last 5” form dots to instantly see the opponent and final score — without leaving the table view.
This interaction could surface richer data while maintaining the minimalism Google is known for.
This interaction could surface richer data while maintaining the minimalism Google is known for.
Design Goals
Design Goals
My goal was to:
Make match history scannable at a glance.
Avoid disrupting the lightweight UI.
Maintain accessibility (tooltip timing, screen readers).
Improve user satisfaction for casual and die-hard fans alike.
My goal was to:
Make match history scannable at a glance.
Avoid disrupting the lightweight UI.
Maintain accessibility (tooltip timing, screen readers).
Improve user satisfaction for casual and die-hard fans alike.
Design Solution
Design Solution
I introduced a hover state on each “Last 5” dot. When a user hovers over any result circle:
A small tooltip appears showing scoreline and opponent.
Colour coding (W/D/L) is preserved for quick visual parsing.
Tooltip respects spacing and doesn’t block adjacent UI.
I introduced a hover state on each “Last 5” dot. When a user hovers over any result circle:
A small tooltip appears showing scoreline and opponent.
Colour coding (W/D/L) is preserved for quick visual parsing.
Tooltip respects spacing and doesn’t block adjacent UI.
This instantly reveals who the result was against, and how convincing it was, without needing to click.
This instantly reveals who the result was against, and how convincing it was, without needing to click.
Implementation & Handoff
Implementation & Handoff
For proper implementation, I:
Prototyped the interaction in Figma.
Documented accessibility notes (keyboard navigation, tooltip delays, and screen reader actions).
Worked closely with engineers to ensure responsiveness and layout consistency across web breakpoints.
QA tested on all supported browsers.
For proper implementation, I:
Prototyped the interaction in Figma.
Documented accessibility notes (keyboard navigation, tooltip delays, and screen reader actions).
Worked closely with engineers to ensure responsiveness and layout consistency across web breakpoints.
QA tested on all supported browsers.
Results & Feedback
Results & Feedback
After rollout in a staged experiment:
+38% increase in interactions on “Last 5” dots.
No visual regression or increased bounce reported.
After rollout in a staged experiment:
+38% increase in interactions on “Last 5” dots.
No visual regression or increased bounce reported.
Prototype
Accessibility Notes
Accessibility Notes
My Role
My Role
I initiated and owned this feature from concept to delivery:
Discovered the UX gap as a user myself.
Pitched idea internally with supporting user flows.
Designed and tested the tooltip UI.
Collaborated with frontend devs to implement hover behaviour.
Documented for accessibility and future iteration.
I initiated and owned this feature from concept to delivery:
Discovered the UX gap as a user myself.
Pitched idea internally with supporting user flows.
Designed and tested the tooltip UI.
Collaborated with frontend devs to implement hover behaviour.
Documented for accessibility and future iteration.
Learnings & Reflection
Learnings & Reflection
Despite my love for micro-interactions, I learned again that:
Micro-interactions drive macro value. A small hover can significantly improve understanding and engagement.
Fan-first thinking matters. Designing from the perspective of a real user (me!) revealed a pain point that metrics wouldn’t have surfaced.
Details matter. Tooltips needed pixel-precision spacing and timing to feel “Google clean” without becoming noisy.
Despite my love for micro-interactions, I learned again that:
Micro-interactions drive macro value. A small hover can significantly improve understanding and engagement.
Fan-first thinking matters. Designing from the perspective of a real user (me!) revealed a pain point that metrics wouldn’t have surfaced.
Details matter. Tooltips needed pixel-precision spacing and timing to feel “Google clean” without becoming noisy.