Skip to main content
Tranzport · 2020ux

Keep users aware of events on the web application at any time and any moment

Roles
UX Designer · UI Designer
Duration
3 weeks
Year
2020
UXUIInteraction Design
Tools
  • Adobe Illustrator
  • Google Docs
  • Miro
  • Slack
Real-time event notifications, located all in one place

The problem

I need the information, and I need it now

The system has two central dashboards: Quotes (for sending and receiving price quotes) and Loads (for communication, document sharing, and tracking). Each dashboard shows multiple loads with private chats and sends quote requests to carriers for direct negotiations. Dispatchers had to monitor updates like messages or changes in quotes or loads — but the current interface only provided simple notifications, forcing dispatchers to switch between dashboard pages to check for updates indicated by a small blue icon.

Two separate dashboards — Loads and Quotes — each with their own notification system
The old system: blue dots scattered across pages, easy to miss
The friction: dispatchers flipping between Loads and Quotes pages to spot blue notification dots

The solution

Global notifications

A system that promptly alerts users about essential events — accessible throughout the application. We added a filtering feature allowing users to customize and receive only the notifications relevant to them.

The context

Why timely alerts are crucial in shipping price negotiations

Brokers, shippers, and carriers in this industry need to constantly communicate — particularly during price negotiations for lanes (start and end points of a journey). A shipper might request quotes from 100 carriers and chat with 20 at once. Prices vary by mile and depend on route difficulty, weather, load type, and fuel surcharges. Missing a notification can cost real money.

The goals

  • Reduce dispatcher stress by building trust in the system
  • Ensure timely and accurate notifications for load updates
  • Cut down the time dispatchers spend on resolving issues
  • Prevent delays and misunderstandings among involved parties
  • Provide a centralized overview of all events

The research

Internal needs, feedback from experts

I gained insight into essential needs through unstructured interviews with experts, stakeholders, customers, and dispatchers.

Highlighting events

Important events from Quotes and Loads in one place

Filtering by type

Messages, status updates, bids, exceptions, attachments

Read / unread

Clear visual differentiation

Centralized actions

Act on an event without navigating away

Chat messages

Never miss a reply during active negotiation

Exceptions & cancellations

Immediate alerts when plans change

Design variations

First explorations

Exploring iconography, colors, the information needed for each event, and the position of elements in each card. Early on, users could not distinguish between seen and unseen events — a signal I needed to improve read/unread affordances.

Card variations showing different information layouts

User feedback: different users have different needs

Based on feedback from initial concepts, I realized the necessity of tailoring the platform to meet the diverse needs of users. Dispatchers focus on managing exceptions and messages tied to loads. Accountants review account balances for completed loads. Other users are involved in quoting and sending RFQs. Each had different filtering priorities.

Early filter design with role-specific presets

The results

Real-time event notifications, located all in one place

  • Centralized real-time event notifications
  • Simplified issue resolution — directly impacted the business
  • Dispatchers could multitask without losing context
  • Significantly reduced miscommunications
  • Personalized filtering reduced information overload
Other work

Explore more case studies