Designing a product that crosses the physical and digital divide

Redesigning Deliveroo’s order tracker to ensure customers are more informed and updated throughout an order, no matter what happens. In doing so we improved the experience and reduced customer service operational costs.

The order tracker is a key part of the Deliveroo ordering experience. Helping to keep customers up-to-date as they wait for their order. Work began with a large scale redesign of the order tracker. This gave us the platform to then incrementally improve the tracking experience for the business and users

I wrote an in-depth case study of the product development process applied for the redesign work here. Below is a quick overview of the notable features we've built along the way:

Live status card

The focal point from the beginning to the end of an order. The live status card provides users with everything they need to know about their order, communicated in a concise manner. A progress bar visually breaks the order into its 4 distinct steps and fills up through the duration of the order. Each time a customer comes back, they can quickly grasp progress and the order's status from the live status card.

Order tracking live status card
Order animations

Animations are used to represent each stage of an order into the tracker. These bring more playfulness to the experience and help set better expectations on how transport type can impact a rider’s travel time. The animation seen during delivery reflects the rider’s transport type - moped, bicycle, car or traveling by foot.

Order tracking animations
Contextual Delay messaging

We saw from data that a lack of transparency when orders experience delays during preparation caused a spike in contacts to customer service. Delays here are especially evident as there's limited signals to understand what's happening in a restaurant's kitchen and communicate back to users. We saw opportunity to use rider data to show progress. Based on the rider's whereabouts, we send messages to customers when an order is running behind preparation estimates to show although there's been a delay, progress is happening behind the scenes.

Order tracking contextual Delay messaging
Adapting to web

Positive experiments of the order tracker redesign on iOS and Android saw the need for us to bring the functionality to Web. We wanted to make full use of the increased space, with the map-based UI designed to provide an immersive tracking experience during the delivery stage of an order.

Order tracking on web
Product marketing banners

A system of product marketing banners designed to support internal business units and growth. We ensured the logic behind a banner's display has knowledge of the customer and their context to maximise the impact, likelihood of engagement and relevance to the customer.

Order tracking marketing banners
Cancelling orders

Orders can be accepted by restaurants fast. To improve the experience and ability to cancel orders, we brought the functionality directly into the order track from order help.

Order tracking cancel order
Customer to rider calling

Riders could already call customers, but if customers needed to contact their rider they had to call customer service. We removed this need by directly connecting the rider and customer. We focused on privacy by masking phone numbers and allowing connections only during live orders. To protect riders’ safety, customer can only call when the rider's GPS signal shows them to be near to the customer address - a point when they are likely no longer driving or cycling.

Order tracking calling riders