Delivery Calendar
A new way to see the schedule: replacing legacy booking tools with a visual calendar
Overview
The Delivery Calendar is a new tool that never existed in the company’s legacy system: a shared, visual view of the delivery schedule for the logistics and warehouse teams.
It consolidates three disconnected legacy tools serving different user groups into one shared interface, bringing all three teams onto the same platform, with each accessing the actions relevant to their role.
The Challenges
Handling complex, real-world data
A single time slot could contain many concurrent bookings, and a single booking could span multiple time slots.
Presenting a large amount of data while maintaining a clean, uncluttered appearance
Booking blocks needed to present two distinct layers of information: booking-level and container-level, without overloading the block itself. This was solved by dividing the block into clickable zones, each triggering a different popover.
The calendar needed to serve multiple user groups simultaneously, each with different tasks and levels of access, within the same shared view.
The Design
Due to the scale of the project, design and development were divided into two phases.
The first phase delivered a read-only calendar. The second phase, fully designed in Figma and awaiting development, transforms the calendar into an interactive tool serving multiple user groups within a shared view. Logistics teams can create bookings, warehouse teams can review and approve or decline them, and warehouse operatives can record receipt of goods.
Through extensive exploration and testing, I landed on a timeline-based calendar with a horizontal hour axis. This design allows a time slot to accommodate unlimited bookings while keeping each booking block large enough to convey key information at a glance.
To preserve a clear weekly overview, only two bookings within a time slot are displayed by default. Any additional bookings are collapsed into a summary indicator, making high-volume periods immediately visible without overwhelming the interface. Users can quickly see the number of bookings in any given slot. They can also click either the indicator or any empty space within the row to expand the selected day and reveal all bookings.
To balance information density with usability, detailed data is revealed on demand. Users can access one of two contextual popovers depending on where they click within a booking, enabling efficient access to operational details without overwhelming the main view.
Please note some screens may have been modified to protect confidential information.
What it replaced
The original tools in the legacy system followed a four-step linear flow: Search, Select, Booking, and Complete. Users had to fill in a 20+ field search form from scratch, with no indication of what needed urgent attention. Action labels were misleading: "Select" triggered a search, and finalising a booking meant clicking a "Complete" tab that looked like navigation rather than a confirmation.
There was no visual representation of the schedule, so teams had no way to see what was booked, when, or where conflicts existed. The broader workflow was also fragmented, with booking, approval, and receipt handled across three separate tools with no shared context.
/ LEGACY system /
Now
The read-only calendar is now live and in active use, providing logistics and warehouse teams with a shared source of truth for delivery scheduling.
The next phase has been fully designed and is awaiting development. By consolidating booking creation, approval, and receipt recording into a single interface, the interactive calendar will transform the calendar from a planning tool into the operational hub for warehouse scheduling.