Back

FIFA Logistics Platform

FIFA events involve 500+ vehicles, dozens of venues, and thousands of personnel movements — all needing precise coordination.

FIFA Logistics is a web application that helps operations teams plan transportation for players and executives before major events. It allows planners to schedule trips, assign vehicles and drivers, and manage logistics efficiently to ensure smooth event operations.

Visit website

Role

Sr.UX Designer

Industry

Logistics SaaS · B2B

Platforms

Web and Mobile

Year

2025

Back

FIFA Logistics Platform

FIFA events involve 500+ vehicles, dozens of venues, and thousands of personnel movements — all needing precise coordination.

FIFA Logistics is a web application that helps operations teams plan transportation for players and executives before major events. It allows planners to schedule trips, assign vehicles and drivers, and manage logistics efficiently to ensure smooth event operations.

Visit website

Role

Sr.UX Designer

Industry

Logistics SaaS · B2B

Platforms

Web and Mobile

Year

2025

Back

FIFA Logistics Platform

FIFA events involve 500+ vehicles, dozens of venues, and thousands of personnel movements — all needing precise coordination.

FIFA Logistics is a web application that helps operations teams plan transportation for players and executives before major events. It allows planners to schedule trips, assign vehicles and drivers, and manage logistics efficiently to ensure smooth event operations.

Visit website

Role

Sr.UX Designer

Industry

Logistics SaaS · B2B

Platforms

Web and Mobile

Year

2025

disclaimer

Due to NDA restrictions, the visuals from my work at Fifa are limited and masked. Feel free to reach out for more details.

disclaimer

Due to NDA restrictions, the visuals from my work at Fifa are limited and masked. Feel free to reach out for more details.

  1. Creating Cluster Feature

Context

The FIFA logistics platform was built to handle transportation planning across multiple global events. As the platform scaled, operations teams found themselves managing location data from several events simultaneously — all visible on the same map, with no way to separate or filter them by context.

Client Requirement

The request came directly from the operations team — not as a formal spec, but as real frustration surfaced in planning sessions.

Debra Flores

5/12, 9:15 AM

“Users are finding it difficult to navigate the map too many locations are overlapping and it’s becoming hard to manage.”

Michael Brown

15/12, 12:06 PM

“The map is becoming too cluttered without clustering, making it difficult to identify and manage locations efficiently.”

Problem

In the early stages of the platform, clustering wasn't considered a priority. But as data volume grew, planners found themselves staring at a map full of points with no way to identify which belonged to which event. Finding a specific location in that noise meant scrolling, guessing, and losing time — on a platform where time directly affects event-day execution.

1

Users couldn't isolate map points for the event they were currently working on

2

No defined boundaries made it impossible to identify event areas at a glance

3

All location data was treated equally — no hierarchy, no grouping, no context

4

When zoomed out, individual points became indistinguishable from each other

Research Methodology

Before opening Figma, I needed to understand how planners and managers actually interacted with location data — not how they described it in meetings, but how they behaved under pressure during live planning cycles.

Interviews

Gathered detailed feedback from target users across two planning cycles.

User Personas

Created personas for two key user types based on research findings and behavioural patterns.

User Journey Map

Mapped the end-to-end planning experience to identify friction points and workflow gaps.

Wireframing

Explored multiple directions before converging — each concept tested against real user behaviours observed in research.

Prototyping

Built interactive prototypes to simulate the cluster experience and validate design decisions before development handoff.

Usability Testing

Validated designs with real users through task-based testing and iterated based on findings.

Wireframing

Explored multiple directions before converging — each concept tested against real user behaviours observed in research.

Prototyping

Built interactive prototypes to simulate the cluster experience and validate design decisions before development handoff.

Usability Testing

Validated designs with real users through task-based testing and iterated based on findings.

Interviews

Gathered detailed feedback from target users across two planning cycles.

User Journey Map

Mapped the end-to-end planning experience to identify friction points and workflow gaps.

Prototyping

Built interactive prototypes to simulate the cluster experience and validate design decisions before development handoff.

User Personas

Created personas for two key user types based on research findings and behavioural patterns.

Wireframing

Explored multiple directions before converging — each concept tested against real user behaviours observed in research.

Usability Testing

Validated designs with real users through task-based testing and iterated based on findings.

Wireframing

Explored multiple directions before converging — each concept tested against real user behaviours observed in research.

Prototyping

Built interactive prototypes to simulate the cluster experience and validate design decisions before development handoff.

Usability Testing

Validated designs with real users through task-based testing and iterated based on findings.

User Personas & Focus Groups

Built two personas from research — a Cluster Manager focused on control and configuration, and a Category Manager focused on day-to-day visibility.

Persona 1 - Manager

Show

Persona 2 - Planner

Show

Two user types

This feature required to consider two user types — each with different needs and different levels of access.

Manager

Setup & configuration

M

Responsible for setting up cluster structure before events. Has access to a dedicated management screen.

Can do

Create and name clusters

Assign location points to clusters

Sync data from database

Cannot do

Plan routes or assign vehicles

Planner

Day-to-day planning

P

Primary map user. Plans routes, assigns vehicles, manages logistics. Uses clusters as context — not infrastructure.

Can do

Select active location via dropdown

Interact with active cluster points

See other clusters as reference

Cannot do

Create or modify clusters

Research & discovery

Before touching Figma, I mapped how both user types interacted with location data differently. The manager needed control. The planner needed focus. Two separate problems, one connected system.

Key insight from user sessions

"Planners weren't asking for clustering — they were asking to stop seeing things that weren't relevant to them right now. The solution wasn't about grouping data. It was about controlling context."

Research & discovery

Before touching Figma, I mapped how both user types interacted with location data differently. The manager needed control. The planner needed focus. Two separate problems, one connected system.

Key insight from user sessions

"Planners weren't asking for clustering — they were asking to stop seeing things that weren't relevant to them right now. The solution wasn't about grouping data. It was about controlling context."

Two user types

This feature required to consider two user types — each with different needs and different levels of access.

Manager

Setup & configuration

M

Responsible for setting up cluster structure before events. Has access to a dedicated management screen.

Can do

Create and name clusters

Assign location points to clusters

Sync data from database

Cannot do

Plan routes or assign vehicles

Planner

Day-to-day planning

P

Primary map user. Plans routes, assigns vehicles, manages logistics. Uses clusters as context — not infrastructure.

Can do

Select active location via dropdown

Interact with active cluster points

See other clusters as reference

Cannot do

Create or modify clusters

Two user types

This feature required to consider two user types — each with different needs and different levels of access.

Manager

Setup & configuration

M

Responsible for setting up cluster structure before events. Has access to a dedicated management screen.

Can do

Create and name clusters

Assign location points to clusters

Sync data from database

Cannot do

Plan routes or assign vehicles

Planner

Day-to-day planning

P

Primary map user. Plans routes, assigns vehicles, manages logistics. Uses clusters as context — not infrastructure.

Can do

Select active location via dropdown

Interact with active cluster points

See other clusters as reference

Cannot do

Create or modify clusters

User Journey Mapping

Mapped the planning experience before the feature existed — to identify where the current flow was breaking and costing planners time.

User Journey - Manager

Show

User Journey - Planner

Show

Research & discovery

Now I mapped how both user types interacted with location data differently. The manager needed control. The planner needed focus. Two separate problems, one connected system.

Key insight from user sessions

"Planners weren't asking for clustering — they were asking to stop seeing things that weren't relevant to them right now. The solution wasn't about grouping data. It was about controlling context."

problem framing

HOW MIGHT WE

Help operations teams navigate hundreds of location points without losing sight of which assets belong to which event — at any zoom level?

User Stories

A user story is a concise description of a specific feature or functionality written from the perspective of an end user. It captures what a user wants to do and why they want to do it.

Standard Format

As a [user type], I want to [action/capability], so that [benefit/outcome].

Purpose

Converts user journey map insights into actionable features — translating the frustrations planners and cluster managers experience on the FIFA GIS platform into clearly defined design and development requirements.

User Stories

Show

User Flows

User flows for both personas map the step-by-step paths needed to complete key tasks inside the FIFA GIS platform — from navigating event location pins on the map to keeping cluster data current across planning cycles.

User Flows

Show

Exploration & Design Decisions

Three approaches were considered

OPTION 1

Color coding by event

Ruled out

Assign each event a unique pin color. Fast to implement but broke down past 4–5 events. Added cognitive load instead of removing it.

OPTION 2

Filter panel to toggle visibility

Ruled out

Let users hide/show events via a sidebar toggle. Solved visibility but felt heavy — planners had to manage the filter every time they switched context.

OPTION 3

Contextual dropdown

Chosen

A dropdown at the top right of the map view lets the planner select which location they're currently working on — for example, "Location: England." Points from that location become fully interactive. Points from other locations remain visible on the map but are non-interactive — present for spatial reference, but not a distraction. This preserved the full map picture while giving planners a clear working context.

Exploration & Design Decisions

Three approaches were considered

OPTION 1

Color coding by event

Ruled out

Assign each event a unique pin color. Fast to implement but broke down past 4–5 events. Added cognitive load instead of removing it.

OPTION 2

Filter panel to toggle visibility

Ruled out

Let users hide/show events via a sidebar toggle. Solved visibility but felt heavy — planners had to manage the filter every time they switched context.

OPTION 3

Contextual dropdown

Chosen

A dropdown at the top right of the map view lets the planner select which location they're currently working on — for example, "Location: England." Points from that location become fully interactive. Points from other locations remain visible on the map but are non-interactive — present for spatial reference, but not a distraction. This preserved the full map picture while giving planners a clear working context.

Before / After

Before

Before

Before

After

After

After

↔

Before

No grouping or context

No zone boundaries

All points interactive

After

Active cluster highlighted

Zone boundaries visible

Other points muted/passive

Solution details

I introduced a two-layer system: a manager-facing setup screen and a planner-facing contextual map experience.

For the planner

A location dropdown sits at the top right of the map view. When a planner selects a location — say, England — that cluster becomes their active context. All points within it are fully interactive. Points from other clusters remain visible on the map as passive reference markers but cannot be clicked or edited. This prevents accidental edits across events while preserving spatial awareness.

Dropdown + active cluster

Active vs passive pin states

For the Manager

A dedicated cluster management screen where they can create clusters, assign location points, and sync data from the database. This screen is separate from the planning view entirely — keeping the two workflows clean and distinct.

Manager — cluster setup & database sync screen

Design Considerations

How does a planner know which location they're working in?

The active location is always shown in the dropdown at the top right of the map. It's persistent and visible at all times — no guessing which context is active.

Why keep other location points visible instead of hiding them?

Planners need spatial awareness. A route in England might connect to a pickup near a venue that overlaps geographically with another event's zone. Hiding those points entirely would remove useful reference. Making them non-interactive was the balance — visible but out of the way.

How does a planner know a point belongs to a different cluster?

Visual treatment differentiates active vs passive points — passive points from other clusters are visually muted, signaling they're present but not in scope.

What happens when a manager syncs new data?

The cluster structure updates on the planner's map automatically. Planners don't need to refresh or manually update — the manager's setup work flows through to their view seamlessly.

Solution details

I introduced a two-layer system: a manager-facing setup screen and a planner-facing contextual map experience.

For the planner

A location dropdown sits at the top right of the map view. When a planner selects a location — say, England — that cluster becomes their active context. All points within it are fully interactive. Points from other clusters remain visible on the map as passive reference markers but cannot be clicked or edited. This prevents accidental edits across events while preserving spatial awareness.

Dropdown + active cluster

Active vs passive pin states

For the Manager

A dedicated cluster management screen where they can create clusters, assign location points, and sync data from the database. This screen is separate from the planning view entirely — keeping the two workflows clean and distinct.

Manager — cluster setup & database sync screen

Design Considerations

How does a planner know which location they're working in?

The active location is always shown in the dropdown at the top right of the map. It's persistent and visible at all times — no guessing which context is active.

Why keep other location points visible instead of hiding them?

Planners need spatial awareness. A route in England might connect to a pickup near a venue that overlaps geographically with another event's zone. Hiding those points entirely would remove useful reference. Making them non-interactive was the balance — visible but out of the way.

How does a planner know a point belongs to a different cluster?

Visual treatment differentiates active vs passive points — passive points from other clusters are visually muted, signaling they're present but not in scope.

What happens when a manager syncs new data?

The cluster structure updates on the planner's map automatically. Planners don't need to refresh or manually update — the manager's setup work flows through to their view seamlessly.

Impact

The map finally made sense.

Measured during UAT by comparing the same planning tasks before and after the cluster feature shipped.

30%

Faster location lookup

Planners found specific map points significantly faster once they could filter by active location.

82%

Wrong-event interactions

Accidental clicks on other-event pins dropped from ~6.2 to ~1.1 per session.

P

"I can actually tell what belongs to what now. Before this I was constantly second-guessing myself."

— Transportation planner, post-UAT feedback

  1. Creating Custom Road Feature

Context

For a FIFA event, temporary access roads appear overnight. Parking zones are built for a single day. Emergency routes get rerouted around stadium crowds. None of that exists in any standard map dataset — and the FIFA Logistics platform had no way to account for it.

Operations teams were planning transportation on a map that didn't reflect reality. The gap between the digital map and the physical ground was a risk — and on event day, risk means delays.

Problem

During event setup, operations teams needed to account for temporary roads and parking zones that don't exist on standard maps. Without a way to create and connect these custom routes inside the platform, planners were forced to work around the system — leading to coordination gaps, slower planning cycles, and increased risk of errors on event day.

challenges

Identifying and handling edge cases such as intersections, overlapping roads, and complex routing scenarios.

Ensuring existing map annotations and data were not affected or disrupted by the custom road creation flow.

Designing an intuitive interaction model for users to easily draw and manage custom roads on the map.

The system initially only supported basic custom road drawing connected to existing roads.

Users

Transportation planners and operations teams who manage and plan transportation for players and executives before the event.

challenges

Identifying and handling edge cases such as intersections, overlapping roads, and complex routing scenarios.

Ensuring existing map annotations and data were not affected or disrupted by the custom road creation flow.

Designing an intuitive interaction model for users to easily draw and manage custom roads on the map.

The system initially only supported basic custom road drawing connected to existing roads.

My process

Four stages from listening to shipping.

  1. Discovery — listening before drawing

Ran structured sessions with transportation planners to understand how they currently handled custom routing. Three recurring pain points surfaced: no way to define temporary roads, no method to link parking zones, and no visual confirmation of traffic flow direction. These became the three design requirements the feature had to satisfy.

  1. Exploration — two competing models

Sketched two fundamentally different interaction models: a freeform drawing mode where users drag to draw roads freely, and a point-to-point connection model where users click to place nodes and connect them. Both went in front of stakeholders and users. The point-to-point model won — planners found it more predictable and easier to correct mistakes.

  1. High fidelity — building within the system

Designed production-ready screens within the existing design system to ensure the custom road feature felt native to the platform. Worked closely with developers during handoff on the edge cases that matter most — what happens when two roads cross, how undo behaves, how errors surface to the user without breaking their flow.

  1. Usability testing — iterating on what I saw

Ran task-based usability tests on the UAT build with the same operations staff I'd spoken to at the start. Watched where they hesitated, where they made errors, where they recovered confidently. The intersection popup design and the road parameter panel layout both changed based on what I observed — not what I assumed.

Solution details

Created a map-based tool that lets operations teams draw, manage, and connect roads and parking spots right inside the system. It makes event planning a lot easier. People can handle intersections, add details about each road, and link parking locations—all in one place.

Preview

Design Considerations

How to handle the intersection of two roads?

The issue was resolved by introducing a popup when two roads intersect during creation, allowing users to choose the type of intersection they want to define.

Road intersections

How can road parameters be set easily in a user-friendly way?

Road parameters like direction are configured from the left panel, with traffic flow shown as arrows on the map, along with settings like speed—ensuring a simple and user-friendly experience.

Road parameters form

Created road in the map

Impact

15%

Time Reduction

Every transportation planning cycle is now completed 15% faster, indicating improved efficiency and a smoother workflow for operations teams.

25%

Improvement

Enhanced planning accuracy by 25% by minimizing manual workarounds and improving route clarity.

Impacts were measured during the UAT stage of each feature by comparing performance with previous iterations.

Impacts were measured during the UAT stage of each feature by comparing performance with previous iterations.

More to this project than what's shown here

NDA limits what I can share publicly — but there's a lot more work behind this. I've designed and shipped multiple complex features across this platform.

Mobile App for Drivers

Rule manager

Map Editor

Rute simulator

Reach out and I'll walk you through it.

Get in touch

Get in touch

Linkedin

Linkedin

FIFA Driver App on Playstore

Play Store

More projects

Energy

B2B

2025

Serentica Renewables

Real-time power market analytics and revenue optimization platform for India's renewable energy operators.

View case study

Ed-Tech

B2C

2021

Smart Class

Mobile learning platform for civil engineering and architecture students — video lessons, quizzes, and progress tracking for complex material on the go.

View case study

Healthcare

Web App

2026

Care Connect

Call tracking platform for healthcare front desk teams — inbound queue management, instant patient context, and zero missed follow-ups.

View case study

Create a free website with Framer, the website builder loved by startups, designers and agencies.