Dispatcher Dashboard Redesign — Tranzport

Tranzport · 2020ux

Enhancing user experience for dispatchers

Roles: UI/UX Designer · UI Engineer
Duration: 6 weeks
Year: 2020

UXUICSSResearch

Tools

Adobe Illustrator
Google Docs
Miro
Slack

The problem

The table was unstable, slow to load, and had a horizontal scroll. Developers and stakeholders, aiming for profitability, initially built the application using Material Design components with simplicity in mind. But as we added more features and customization, clients began to find it slow and difficult to navigate — mainly due to the horizontal scrolling. Dispatchers needed to scroll down and horizontally to check on a specific load, making them slow.

Old-school logistics dashboards — Old-school dashboards: the industry standard we were working against

The pain: horizontal scrolling made the dashboard slow and hard to scan

The solution

Custom solution for a custom problem. A custom lane component packed 3× more information in the same space, organized more meaningfully. Notifications grouped in one area of the table. Fully responsive on any device for easy tracking anywhere, anytime.

Mobile table design — The cards scale gracefully to mobile — no horizontal scroll

Redesigning the dashboard

I conducted a survey with 5 dispatchers about their process, pain points, and wishes for the next version of the platform.

Research questions

01
Daily routines
Describe daily routines?
02
Driver interaction
How is a typical driver interaction?
03
Exceptions
Tell me about a time when the load had exceptions?
04
Non-responsive drivers
How is your process when the driver is non-responsive?
05
Critical dashboard elements
What are the critical elements in the dashboard to keep track of?
06
Most important information
What is the most important information in the dashboard?

Takeaways

Dispatchers are always multitasking and working against time constraints
The load ID and the lane (pickup, dropoff, dates) are the most important for identifying loads (scan data)
They require constant updates on status
Market apps are outdated, decades-old, with complex information

“The market is old-school, and the dashboards look like Excel sheets.”
DanielDispatcher

The first attempt: prioritize parts of the table

The initial idea was to customize the table, prioritizing specific columns by making them static. This provided a visual anchor of the load ID and actions that could be taken. The next step was to validate this change and get feedback from dispatchers.

Scroll area concept — First concept: static columns with scroll area

First attempt: freezing columns kept the load ID visible but scrolling remained painful

Validating the idea: it was a bandaid

I went back to the dispatchers and showed them the design. It partially solved the issue, but they still found scanning the dashboard and dealing with the horizontal scroll difficult. The problem was more complex than expected.

Out-of-the-box thinking

The developers, CTO, product manager, and I debated whether to update the interface. Despite their view that our long-standing dashboard didn't need major changes, I was sure we could create a unique, more valuable solution for our users — even if it were risky. We chose to take that risk.

Explorations: variations and progress

I needed to be more aggressive with the grouping while thinking about the responsiveness of the table. The groups needed to make sense, and the scan process related to the lane — pickup, dropoff, dates, miles — the essential fields dispatchers rely on.

We validated again with stakeholders and dispatchers, getting fantastic feedback and excitement.

Worth the risk: custom components made it easy to scan

The dispatchers were on board. The developers and stakeholders could see my vision and the benefits of taking the long road.

Final design: expanded card view showing all load details without horizontal scroll

The impact

10× faster dashboard scanning

Dispatchers can scan the dashboard 10× faster than before.

Meaningful information grouping

Grouping of data helps to keep meaning in the information.

5× faster dashboard load

The dashboard loads 5× faster than before thanks to the custom component approach.

Fully responsive

The cards and dashboard are responsive — works on any device.

Dispatchers identify loads faster

Visual anchors make loads identifiable at a glance.

Since 2020, the custom-component card layout has been in production. Dispatchers have become more productive, and the table has become a key point of the company platform.