Supply Chain Timeline
Invented a new way to visualise an order's supply chain journey
Overview
The Supply Chain Timeline (SCT) is a reusable widget that visualises the lifecycle of a Purchase Order (PO) from creation through final delivery.
Before this project, users had to navigate multiple modules to track a shipment’s status, making it difficult to answer a simple question: "Where is my shipment right now, and does it need my attention?"
I was responsible for designing a visual language that could communicate complex logistics processes at a glance. The solution highlights completed steps, upcoming milestones, delays, and critical actions in a unified interface, giving users a clear overview of where a PO sits in its end-to-end supply chain journey.
The Challenges
Communicating performance and update status independently
The timeline needed to communicate two distinct dimensions of time that are easy to conflate: whether each leg is on track against the agreed timeframe and whether system records were updated promptly.
Handling complex, real-world data
A single milestone can have multiple associated records (e.g. multiple vendor bookings, shipments, containers etc) with each requiring its own detail.
Dynamic timeline context
A PO can have multiple shipments, each with its own supply chain journey, and each shipment can have multiple deliveries, each at a different stage of completion.
Supporting multi-leg shipments
A shipment can travel through multiple ports before reaching its destination.
The Design
Horizontal timeline with milestone nodes: Upper and lower track nodes alternate to maintain readability.
The timeline communicates two independent dimensions of time.
Line colour reflects whether a completed leg met its agreed timeframe, while status labels alongside milestones indicate the freshness and urgency of system updates that may require user attention.
Each milestone node is interactive with data hidden in popovers
The widget surfaces complex data without overwhelming the user, using progressive disclosure: a summary on the timeline, detail in a popover, and further detail in a modal where needed
Dynamic timeline
Switching between records against certain milestones updates the downstream timeline accordingly, ensuring the widget always reflects the correct state.
/ snippets /
Figure 1: Shows PO progress at a glance, including milestones completed on time and delayed. The late update indicates the system record was not updated promptly and the critical status label highlights urgent action is required.
Figure 2: Expected Time of Arrival (ETA) has changed. It is now one day behind the original ETA. The red status pill draws users’ attention.
Figure 3: The PO has multiple shipments. The shipment shown in the above timeline passes multiple ports. Popovers display container and transhipment details without cluttering the main timeline.
Figure 4: The status label draws users’ attention to a urgent matter.
Now
The first iteration of the SCT is shipped and actively used. It provides a complete visual picture of order progress, replacing the need for multiple cross-referenced tools.
Further development is ongoing, with the SCT being considered as a portable UX component to embed across EV Cargo native applications.