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.

Prototype & Accessibility Notes

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.

Results & Feedback

After rollout in a staged experiment:

  • +38% increase in interactions on “Last 5” dots.
  • No visual regression or increased bounce reported.

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.

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.

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.

Opportunity

The idea was simple:

UI preview

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.

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:

UI preview

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.

Context/Motivation

Opportunity

Design Goals

My Solution

Implementation

Results & Feedback

My Role

Prototype

Accessibility Notes

Learnings

JUMP TO

UI preview

Team

UI preview

Boluwatife Olasupo, UX Designer

UI preview

Google Gemini, Design Assistant

Role

Feature Design

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.

With love, Tife

Email me

Projects

About me