Made the Shipment Timeline easier to follow so that the Track and Trace user can avoid mistake in their daily operations
Shipment Timeline visualisation for multimodal shipment
.png)
My Role
Desk Research, Benchmarking, Brainstorming, Interaction, Prototyping, Remote user testing
Product
Multimodal shipment visibility at FourKites
Duration
4 weeks
Team
Worked with a Senior UX designer(Rohit Menon) a Product Manager( Ashley)
Impact
Reduced information overload and streamlined the tracking process, significantly decreasing the time required to read data and make decisions.
Impact
Improved daily operations for dispatchers and attract new users seeking a more efficient, user-friendly logistics management solution.
My Role
Research, Brainstorming,Interaction, Prototyping, Usability testing
Product
Yard Tool at FourKites
Duration
16 weeks
Team
Me(UX designer), Rohit Menon(Sr. UX designer),Austin Joerger(Product Manager), Dhawal Sharma(Product Manager)
Problem
The current interface has a busy look which makes it hard for the user to read the important data and track their shipment effectively. It's also confusing to understand how each part of the journey connects to the next. Plus, finding past timestamps is not easy.
Solution
The design presents a streamlined overview of shipment statuses, featuring a vertical timeline layout and color coding for easy identification of key details. Real-time updates, including recent timestamps and ETAs, provide users with timely information on shipment progress.
Impact
This approach effectively addresses information overload by simplifying the user interface and streamlining the tracking process. Users can quickly identify shipments requiring attention and track progress without the need for extensive scanning. Overall, the design enhances user efficiency and clarity in managing shipments.
What is a Shipment Timeline?
A Shipment Timeline in the context of logistics and supply chain management, such as in FourKites' shipment visibility, is a visual representation of the entire journey of a shipment from its origin to its final destination. It includes key milestones, events, and timestamps along the way, providing a comprehensive view of the shipment's progress.
Some of the Shipment timeline UI from the daily apps
Current Journey Timeline of FourKites
This is how the current Journey Timeline looks like in shipment visibility page of FourKites.
-1.png)
A little Context
Currently the FourKites is revamping the whole UI of the product. The above reference picture is the classic version of the product for which I need to revamp only the Journey timeline UI. The design system has been updated and I will be following this language for this current project.
Research
What users are saying
Users have been facing a lot of difficulties with the current interfaces. These are some of the pain pain points.
-1.png){kind=avatar}
"Shipment visibility Journey Timeline has inconsistent data points, undigestible data, and unfocused visuals."
- Shipment visibility user
Problem analysis
Lacks Focus
The indicators are too small and ambiguous for users to understand at a glance.
Lacks Continuity
There is a lack of continuity when users scroll up and down the stop cards.
Limited Mode Visibility
Users cannot easily see how many modes are associated with a shipment.
Multiple ETAs
There are numerous Estimated Time of Arrivals (ETAs).
Design Process
Some of the initial iterations
Each of these design shares one goal of giving user easier understanding of what's going on with their shipment in just one glance, but each differs in a way a few elements shows itself based on the priority.
Design that made its way to users satisfaction
This is the final design which tackles all the important pain points of the user and got validated by the user in testing stage.
_gif.gif)
1
User's main focus area- Active stop for the shipment
Directing the eye of the user mainly on the important item through the use of hierarchy
Usability testing
Users found this new Timeline to be effective
We went through numerous user validation stages incrementally, these are some of our best customers who found this new Journey timeline to be more effective than the classic(old version) one.
%20happy-1.png){kind=avatar}
Users have overall positive reaction to this new look and are excited to use this in their daily operations.
Reflection
This project was one amongst the first I tackled in FourKites. It really helped me to understand the design language used in the company and how I can effectively contribute my creative side while still sticking to the design language to maintain the consistency.
The major challenge was to how to make the interface very simple such that the user at one glance can understand what's important and what's not for their shipment and not sift through the data like the way it was happening in the older version.
Currently this design has been implemented and the users are using this for their daily tasks.
2
Clarity and minimalism - Stop bubbles
Keeping secondary information as simple as possible to avoid distractions to main elements through
3
Transparency in the different modes associated with the shipment - to avoid confusion
Users will be able to understand with one glance how many modes are associated with the shipment without much scrolling
.jpeg)
4
Placement of Journey Timeline in the new interface
Previously the journey timeline was hidden inside the tabs with stop information, now this timeline will be always visible without user having to track it down thus reducing the clicks and ambiguity.
