How do Businesses track all their deliveries?

Project Focus:

Information Architecture, Storyboarding for Context & Micro Interactions

Tools used:

Client briefings, User Interviews, Observational Research, Storyboarding, MoSCow, Comparative Analysis, User Flow, User Testing, Paper Prototyping, Mid-Fidelity Prototyping, Material Design, Principle, Sketch, InVision,


Client Brief:

Design a monitoring tool for our Enterprise clients.


Stuart Delivery SL - One hour or next day delivery service for Businesses in metropolitan areas.

Enterprise Clients:

Stuart has recently started working with brands like Nike, Just Eat and Franprix, delivering retail goods, groceries and food.

The context:

Stuart has recently started working for brands as big as Just Eat, which send out up to 90 deliveries a minute in London, UK, their current monitoring tool, which was deigned for smaller businesses with a low quantity number of deliveries, is not fit for Enterprise clients.

The Challenge:

  1. Design a single monitoring tool appropriate for 3 different users: In-store Dispatchers, Store Managers and the Brand’s own Customer Service.

  2. Use Material Design elements to ensure easy implementation.

  3. Design a way for rapidly changing data to be displayed in a way that isn’t overwhelming or distracting to the users.

Getting to know our Personas

WhatsApp Image 2019-05-22 at 11.20.00.jpeg

To kick things off we visited some of Stuart’s existing clients in Nike and Pizza Hut to see them using the platform in action and to interview them.

Despite the complexity of large scale deliveries, we were able to define 3 clear personas, understanding their goals and motivations. Some brand related and some efficiency related:

Key Persona Findings.png

Storyboarding to understand context of environment and triggered thoughts


Storyboarding helped us understand when and where our three personas would interact with the software. It also helped us imagine the kind of trigger thoughts that users would have leading them to use the software.

For example: “Once the Dispatcher has finished preparing the package, he wonders what time the driver will arrive to pick it up.”


Developing micro interactions help the user invisibly


Bookmarking Function

Giving Customer Service Agents the ability to save and come back to specific searches and orders within the main navigation.

Bookmarking Function

Prioritising rapidly changing data

Displaying and prioritising data based on errors or problems without making the user notice or worse, feel seasick.


Predictive Search Function

Displaying the most important information to Personas when they need it most (when there’s a problem with the pick up or the delivery).

Predictive Search Function

Rapidly changing data

Interpreting user testing feedback into features

Throughout the design process we kept in close contact with users that matched our personas, regularly doing user testing and listening to their feedback. These comments were extremely helpful and informed all of our decisions relating to information architecture (how to lay out the information correctly) and specific features. Below are user comments followed by interpretations and our resulting iterations.

Where is the courier? I want to see exactly where they are.
  • User asked to include map of where the courier is (did not understand that the live address was already there).

  • Asked specifically for map because it helps make the customer who is calling to calm down. Also said that customer lives in the same city as where the courier is, so naming the street where the courier is on would be understood by the customer. 

  • Want to be able to rebook another courier directly from within the card if there is a problem, via the map

Include a Map

Map Iterations
In an ideal world, I would just edit the delivery time
So that I don’t have to chase the customer service of DPD.
Right now we have to go to our manager when there’s a problem who speak to DPD, who come back to our manager who tell us the updated delivery time, and we then have to call the customer back.
This can take 2 days due to 24hr Customer Service email tickets turn around on their side.
  • Action: Tries to click delivery time despite there being no button or link, explains why above.

  • Within a certain time period the delivery should be editable (aka when the driver isn’t already on the road or close to drop off)

  • ‘Best Endeavour’ - a term in delivery to describe ‘we’re going to try our best to deliver  this package’ 

  • Suggests that you add a ‘desired delivery time’ so that the customer can select when they will be in. 

Make the delivery time editable

CS: Deliveries: Order View Copy.png
We know that DPD delivers within 2-4 working days, so if someone calls and asks for the delivery status, we have to click on the calendar at the bottom right and count the days to tell them when to expect the package.

Display the ETA of the Package so that the customer Service doesn’t have to calculate Delivery Date in their heads

Order View Time .png
First we ask for the order number, but the most important piece of info that we confirm is the delivery address.
It’s so easy for people to accidentally write the incorrect number of their house. By the time they’re calling us there’s a problem with the delivery, so we have to establish whether the error was made by the customer before we bother our logistics partner DPD and ask them what has happened.
  • Want to be able to edit or change the address themselves because it immediately resolves the issue

  • Address is also important for GDPR data protection questions at the beginning of the call

Reorganise Hierarchy of information as the CUSTOMER ADDRESS is the most important

I don’t know why, but I think that the package status should have a line with some dots under it as I see on a lot of package tracking apps.

Include a TimeLine Layout for quick Reference

User draws this as an example.

User draws this as an example.