Football Match Tracker · 2023–2024

Unifying live football data into one Match Tracker

I helped define the rules that turned different sports-data feeds into consistent live match behavior across web, mobile web, and app.

Role · Senior Product Designer

Focus · Product definition, data mapping, interaction, animation specifications

Status · Launched to production

The challenge

Different providers describe the same match differently.

Event codes, locations, team information, and supporting data could vary from one provider to another.

The product needed to hide that complexity and give users one clear, consistent experience during a live match.

Raw provider inputs

Provider 1

event_code_id: 262
zone: CR_R

Provider 2

Type: 5

Provider 3

team: Home
isConfirmed: true

Provider 4

fixtureActionTypeId: 108
sendTypeId: 5

Feed Aggregator Map · Normalize · Standardize

Common MT action

Corner Kick Home · Top Right

My role

Turning product goals into rules engineering could implement.

I worked closely with the Product Manager and Department Head to turn product goals into clear rules for engineering.

I mapped provider data and specified how the frontend should handle interactions, animations, pitch positions, responsive layouts, and match states. I also created the supporting design mockups.

I also worked with a Systems Analyst who consolidated many of these requirements in the formal SRS and documented the broader system architecture and implementation flows.

Business requirements → product behavior → technical specification → visual implementation

How the solution worked

Turn different data feeds into one consistent experience.

01 Sports data providers

02 Normalize the feeds

03 Match Tracker and content

04 Web, mobile and app

Simplified product architecture

Sports data feed Provider 1

Sports data feed Provider 2

Sports data feed Provider 3

Sports data feed Provider 4

Feed Aggregator

Ingest
Parse
Normalize
Prioritize

One common Match Tracker model

Match Tracker + Match Content

Match actions
Ball position
Lineups
Statistics
Supporting content

Web · Mobile web · App

Provider-specific feeds were normalized into one product model before reaching each customer-facing surface.

Key contributions

Turning raw provider data into consistent product behavior.

1. Standardizing provider data

I defined how provider-specific fields and football events should map into common Match Tracker behavior.

Different providers could describe the same match state in different ways. Ball position, for example, could arrive as a pitch zone from one provider and X/Y coordinates from another. Both had to resolve into the same frontend behavior.

Some events also required multiple fields or related feed events to be interpreted together before the correct product state could be shown.

Ball position normalization

Provider 1 Pitch zone

Safe
Attack
Dangerous Attack

Provider 2 X/Y coordinates

Field: posX
Field: posY

Feed Aggregator Normalize provider ball-position data

Standard X/Y Model

Match Tracker Ball on pitch

Different feed formats, one product model. Provider-specific location data was normalized before reaching the Match Tracker.

2. Turning live data into visual behavior

I guided the designers on how match states should appear on the pitch, including ball position, attacking zones, action states, and animation behavior. They translated those requirements into mockups and animation assets.

Together, these specifications turned provider event and zone data into consistent visual states for moments such as Free Kick, Attack, Dangerous Attack, and Corner Kick.

Pitch-zone and ball-position rules showing Safe, Attack, and Dangerous Attack zones with coordinate boundaries. — Pitch-zone rules used to map incoming position data into visual match states.

3. Defining supporting match content

The experience extended beyond the pitch animation. It also included Standings, Head to Head, and other supporting match views.

I defined how these views should open, load, and behave depending on match state and data availability.

Standings view showing the Apertura league table as supporting match context.

Head to Head view comparing recent matches for Deportes Tolima and Jaguares de Cordoba.

4. Designing across devices and match states

I specified how the experience should behave across desktop, mobile web, and app, including different pre-start and in-play states.

This included rules for which content should appear, expand, collapse, or remain unavailable depending on the context.

Football Match Tracker content system across mobile and desktop, highlighting the Scoreboard, Momentum, Lineups, Head to Head, Statistics, Timeline, and Standings widgets. — **Supporting content across mobile and desktop** View full-size image

Production setup

How animation assets reached the frontend.

My tools Figma · Power Query

Frontend JavaScript · Lottie

Animation Adobe After Effects

[ASSET: OPTIONAL DIAGRAM — After Effects → Lottie → JavaScript] Optional. Include only if it adds value to the final story.

Outcome

The Match Tracker launched into production.

The Football Match Tracker was released across the platforms covered by the project. The site was later discontinued following regulatory changes, so the live product is no longer publicly available.

[ASSET: PRODUCTION — shipped Match Tracker] Future enhanced production still used as closing visual proof.

What I contributed

Connecting provider data to clear product rules and interactions.

Product requirements Provider data mapping Real-time product behavior Interaction specifications Responsive product design Turning business needs into technical rules Working with product and engineering