Delivery tracker
The Outnet’s customer service team had raises they had a large number of contacts from customers asking about order updates within SLA periods.
My role: Lead UX.UI · Web
Problem space
The existing order details page provided little to no information on the status of a customers order, the aim of this project was to allow customers to be informed and up to date on the latest progress of their order without needing to contact customer care.
FocusWhat information to customers want to know about their order
At what stage do they tend to call
What information does the courier provide to us
Research & insights
On this project I utilised quantitive and qualitative data received by customer care teams, this helped to give an insights into what customers were saying. In addition I spend a day with agents listening in to real customer calls to get a feeling for their frustrations.
A combination of data from customer care teams and NPS helped give a holistic view of where the main problems were.
Lack of information
An order’s status was summarised by one or two words at most, this gave no context as to where the order has been or how many steps left until they received it.
Incorrect status mapping
Working with engineering teams we found that couriers had a large number of status’s that told us where the parcel was, however on the business side they had all been mapped to processing. As a result even if the parcel had moved through multiple stages the user would not be aware.
Main request
The common request from the majority of users was they wanted to know when their order was going to get delivered
Design decisions
Timeline tracker
I developed a timeline delivery tracker so the user was aware of where their order had been and how many steps were left till it reached them. Using a timeline meant at a glance it was easy to understand how far along the process their order had got to.
Status mapping
Working with product we looked at all the status’s courier would send via the API and begin to map them to user friendly terms that were easy to understand. We based the mapping on our research and highlighted the key stages we found users wanted to know about.
Primary and Secondary status
As an order could have an infinite about of updates I developed a primary and secondary status system. The purpose of the primary status was to highlight the stage of the order, and the secondary status would give more detail.
This meant at a glance a user could easily understand the status order, but they also had the opportunity to expand it for further information
Status previews
To improve user clarity on the order process, I implemented status previews at key points in the journey. On the order confirmation page, users now see an overview of the steps involved, providing immediate visibility into the progress of their order. Additionally, on the order page itself, users receive updates without needing to navigate to the order details page, ensuring they stay informed throughout the process.
Highlighting delivery date
The key ask from users was knowing where the order was, I added estimated delivery dates along the key journeys and ensured visually they stood out from the rest of the information on the page making it easier to find.
Working with engineering
On this project I worked closely with engineering teams throughout so I had a deeper understanding of how the backend technology worked before coming with design solutions. The constant communication also meant I was able to provide short informal demos to receive feedback from the team and it also gave the chance for engineering teams to have an input.
Outcome
This project was a success and dramatically reduced the number of contacts to customer care from users asking for updates on their order
-40%
Calls to customer care for order updates