Transportation Management System: UX Redesign
Before Redesign
Project Summary
After Redesign
Objective: Update the robust Transportation Management System to improve business efficiencies.
The Team: Me as Lead UX/UI designer. Development team.
Company: Trinity Logistics, Billion Dollar 3rd Party Logistics/ Shipping Company.
How: Research old systems, Interview users and stake holders, Journey Maps, Wireframes, Team Communication, Design System
Result: Successful redesign of full TMS as well as improved Data Visualization and use of AI to improve sales processes.
UX Research Phase
Developing Personas
The best way to get to know people is to talk to them. One of my favorite parts of User Experience work is talking to people from all walks of life about what they do. Who they are, what motivates them, what are your pain points. An open ended approach to talking with people is the secret to getting a lot of information that you would not think to ask about.
Task Flow
Task flow focuses on a single path. It tell the story of a user completing one goal even when interacting with others in different applications. They are more focused and show a straight-way path, usually without decision junctions. My technique is to keep all of my users and stakeholder in mind when creating them. I keep them visually distinct using high contrast colors and easy to follow by flowing information from left to right.
Screenflow Diagram
This Diagram shows the different users working on this Shipment’s Information Screen.
This shows how the screen will change as the shipment evolves from “Create New Shipment“ to “Pending” to “Booked” and finally “Completed”.
AI for Business
Business moves quickly. A major part of the job for a Logistics Assistant is finding a carrier(truck) to transport a shipment of goods for a profitable price.
I designed this Carrier Matching widget to sort through our historical data to find a Carrier who matches and let the user accept or reject them. The first iteration returns a carrier that has a contract on the lane, later iterations utilize AI.
The location of the widget is the current location of the Carrier details. This location is where they expect to see their chosen carrier's details.
User is alerted that the system has selected a matching Carrier for this shipment.
Added friction is added if user rejects the found carrier.
Confirmation shown. Shipment is locked until carrier confirms the price to take the shipment. A timer is started at top of the screen (not shown)
UX Designs: Before and After
Goals
Current User Experience featured many pop ups to edit the information. The UX redesign features inline editing which would be active when area is enabled.
Header and Shipment Details
Before redesign
After redesign (Inline editing mode)
• Header evolves as the workflow changes with the “cycle of a load”
• Colors are used to strategically call attention to areas.
• Most common workflows are integrated into the header.
• Header is designed to allow Managers and Logistics Specialists can quickly see most important info at a glance.
Rate Negotiations
Before redesign
After redesign
After redesign (expanded rows)
• Header shows number of entries.
• Row currently being edited is displayed in WCAG compliant yellow to ensure user can visually track their edits.
• User can now “book” from the row.