With love, Tife
Email me
Projects
About me
resume
SPIN OFF @ ALEX OYEBADE
Back to all projects
G-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
Google Gemini, Design Assistant
Role
Feature Design
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:
These dots showed match outcomes but lacked meaningful 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.
Opportunity
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.
This interaction could surface richer data while maintaining the minimalism Google is known for.
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.
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.
This instantly reveals who the result was against, and how convincing it was, without needing to click.
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.
Results & Feedback
After rollout in a staged experiment:
- +38% increase in interactions on “Last 5” dots.
- No visual regression or increased bounce reported.
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.
Prototype & Accessibility Notes
Accessibility Notes
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.
Previous project
Next project
With love, Tife
Email me
resume
Copyright © 2025
With love, Tife
Email me
Projects
About me
resume
SPIN OFF @ ALEX OYEBADE
Back to all projects
G-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
Google Gemini, Design Assistant
Role
Feature Design
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:
These dots showed match outcomes but lacked meaningful 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.
Opportunity
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.
This interaction could surface richer data while maintaining the minimalism Google is known for.
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.
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.
This instantly reveals who the result was against, and how convincing it was, without needing to click.
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.
Results & Feedback
After rollout in a staged experiment:
- +38% increase in interactions on “Last 5” dots.
- No visual regression or increased bounce reported.
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.
Prototype & Accessibility Notes
Accessibility Notes
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.
Previous project
Next project
With love, Tife
Email me
resume
Copyright © 2025
With love, Tife
Email me
Projects
About me
Back to all projects
G-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
Google Gemini, Design Assistant
Role
Feature Design
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:
These dots showed match outcomes but lacked meaningful 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.
Opportunity
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.
This interaction could surface richer data while maintaining the minimalism Google is known for.
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.
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.
This instantly reveals who the result was against, and how convincing it was, without needing to click.
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.
Results & Feedback
After rollout in a staged experiment:
- +38% increase in interactions on “Last 5” dots.
- No visual regression or increased bounce reported.
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.
Prototype & Accessibility Notes
Accessibility Notes
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.
Previous project
Next project
Context/Motivation
Opportunity
Design Goals
My Solution
Implementation
Results & Feedback
My Role
Prototype
Accessibility Notes
Learnings
JUMP TO
With love, Tife
Email me
resume
Copyright © 2025