Web · SaaS

MaxOptra Track & Trace

Bringing live location context into operations so teams could understand delivery reality at a glance and act faster, without leaving the product.

Role
UX / UI Designer
Timeline
Q2 2023 to Q1 2024
Platform
Web / SaaS
Team
PM, 2 Devs, QA
Methods
Stakeholder interviews, observation
Overview

Who is MaxOptra?

MaxOptra is a route-optimisation and delivery-management platform. Logistics teams use it to plan routes, dispatch drivers, and track deliveries in real time. Track & Trace is the screen operators live in during a shift. It is the live picture of where every vehicle is and whether each drop is running to plan.

I redesigned Track & Trace around the question dispatchers ask all day: where is my driver, and will it arrive on time? The work replaced a slow, multi-tool workaround with one glanceable view. A four-minute scramble became a one-click answer.

Track & Trace redesigned list view, showing delivery status, ETAs and inline timings
The redesigned Track & Trace list view
01 The Problem

Good data. No context.

MaxOptra had timestamps, status flags, arrival times. What it lacked was location. When a stop flipped to “at risk”, operators opened a second browser tab, cross-referenced GPS data, and called their drivers. That sequence took four minutes, several times a shift. The data existed. The context to act on it did not.

“I’ve got the timestamps, but I don’t know if they’re moving or sat in traffic. I end up calling the driver just to know where they are.” Operator, stakeholder session
02 Discovery

Five findings nobody had found.

Before touching wireframes, I ran a structured discovery phase. I facilitated stakeholder walkthroughs and watched a dispatcher work through a live morning run. The second a stop flipped to “at risk”, the dispatcher opened an external GPS tab, cross-referenced the timestamp, and called the driver. The whole sequence took about four minutes. The same information should have been available in under ten seconds. Asking people to narrate a real exception, a late delivery, surfaced pain points that were never in the backlog:

01
Every operator kept a legacy GPS tab permanently open. It was an invisible habit, and nobody had flagged it.
02
“Late” and “stationary for 20 minutes” look identical in the table, but they need opposite responses.
03
No location data meant phoning the driver, around four minutes per exception.
04
Multi-vehicle days broke focus. Switching runs meant navigating back to the full list each time.
05
Dispatchers could not tell whether off-route readings were real deviations or GPS noise, so they defaulted to calling the driver either way.
Affinity map, research synthesis
Affinity map, research synthesis
03 What I Designed

A map that equals the table.

The output of discovery shaped a focused brief: a Map view embedded inside Track & Trace, showing the vehicle’s current position alongside the full route and stop context from the existing table.

The original concept was a “Map” button on each row that opened a modal. I pushed back. A modal makes it impossible to reference map and list at the same time. I proposed page-level tabs instead, List and Map sitting side by side with equal status. That also unlocked a run-selector sidebar for multi-vehicle days, so dispatchers can switch between runs without returning to the list.

Three principles shaped every decision:

01
Location without context is useless
The vehicle is always shown against its planned route and remaining stops.
02
Stale data shown as current is worse than no data
Every position carries a “last seen” timestamp, and if it is old, the UI says so.
03
The map is for exceptions, not the default
Most of a shift lives in the table, so the map is one click away, not in the way.
Map view, live vehicle position with route context and stop pins
Map view, live vehicle position with route context and stop pins
04 Key Decisions

Decisions that shaped the product.

Four calls did the heavy lifting.

Architecture
I rejected the modal and used tabs.
That single decision shaped the sidebar, the multi-vehicle workflow, and everything downstream.
Trust
Every position shows its age.
If it is stale, “last seen 4 mins ago” appears instead of a current-looking marker. A previous integration had caused incidents where dispatchers acted on minutes-old data, so freshness became non-optional.
Interaction
Map and list talk to each other.
Click a stop in the list and the map focuses it. Click a pin and the list highlights the row.
Visual clarity
Planned versus Actual is a toggle, not an overlay.
During stakeholder testing, three out of four people could not distinguish the planned route from the actual GPS track when both lines displayed at once. I replaced the always-on dual-line display with a three-way toggle: Planned, Actual, Both.
05 Before / After

Same question. Different answer.

Before

Open a second tab, cross-reference GPS coordinates, call the driver, wait, update the customer. Four minutes minimum, multiple times a shift.

After

Open the Map tab, see the live position against the route plan, click the at-risk pin, update the customer. Ten seconds.

06 Edge Cases & Outcomes

Designed for the messy reality.

Roads and warehouses are messy, so I designed for the failure modes too. No or stale GPS shows “last seen X mins ago” rather than a masked gap, and slow polling flags as stale automatically. Dense urban pins cluster into a count at lower zoom levels.

The off-route decision is worth calling out. When the actual track diverges from the planned route, the UI shows it factually, not as an error or violation. During the observation session, a dispatcher mentioned that ad-hoc route changes are common and legitimate. Labelling deviation as a problem would have created false alarms and eroded trust in the tool.

Stale data warning state, GPS signal lost
Stale data warning state, GPS signal lost

How we would measure success

Success criteria were agreed with the product manager before build: faster time to locate a driver, fewer “where is my driver” support calls, a higher success rate for exception triage, and Map-tab adoption by the majority of dispatchers in the first month.

07 What I Learned

Context is the product.

01
The gap is always context, not data.
MaxOptra already had the data. The work was building the right frame around information that already existed.
02
The walkthrough format surfaces what tickets don’t.
Asking people to narrate a real exception, step by step, produced insight that open-ended questions never did.
03
Pushing back on the brief was the highest-impact decision.
Choosing tabs over a modal shaped the sidebar, the multi-vehicle workflow, and the whole experience. The team agreed quickly once I showed the alternative in low fidelity.
04
Next time, I’d test with live dispatchers earlier.
Internal stakeholder feedback was valuable, but getting the map in front of real operators during an active shift, even as a rough prototype, would have surfaced edge cases faster and built adoption momentum before launch.

Specific UI details and client data are anonymised or altered due to NDA. The design process, decisions and rationale are my own.

Try it yourself

View the prototype

Open prototype →
Available for new projects

Let's work
together

Currently taking on new briefs for design, UX, or motion.