Our order tracker — designing a product that crosses the physical and digital divide

How embracing the physical and digital improved our order tracking experience

Stephen Macvean
May 2, 2019 · 7 min read

It might seem like a simple action when a customer clicks a button to place an order — but it actually sparks a complex series of human interactions. Restaurant staff are notified of the order, then begin preparing the meal. They hand it over to the rider, who’ll navigate through complex cityscapes to get it to the customer. Almost every product we design at Deliveroo forms part of a system that bridges the physical and digital worlds.

This fundamentally human system, combined with intensely short delivery times and hungry customers results in a bunch of unique problems, variables and order possibilities. And it’s the job of our Order Tracker to communicate an order’s status with customers as it makes journeys through this system.

In early 2018 we’d reached a point where the Order Tracker, a window into our service, had begun to cause some concern. At times we were showing too much, and at times communicating too little. This was a balancing act we hadn’t mastered. Where the Order Tracker caused uncertainty and didn’t provide answers, it was up to our customer service teams to step in on behalf of the product.

With the Order Tracker harming the customer experience and adding load onto our customer service teams, we began a project to redesign it. Our objective was clear — for the tracker to keep customers informed and updated throughout an order, no matter what happens.

Here are a few of the things we learned and changed when working on products that cross both physical and digital worlds.

Know the physical context of the product

Understanding the people that use a product through quantitative and qualitative research as deeply as possible is a given for any product designer. In our case understanding the environment that they use your product in was just as important. It’s opportunity to observe unspoken moments of emotion, learn how your product fits into — or possibly contradicts — the environment it finds itself within. There’s a wealth of insight that can guide thinking.

We carried out a series of research studies where we observed people placing and tracking orders in the environments they normally order from. From a busy family apartment in Kowloon, Hong Kong, to a flatshare in Peckham, London, we saw cultural nuance and themes that spanned the globe.

A persistent behaviour we saw was how after placing orders people often wanted to get on with other things — do some chores, play with their children or maybe listen to some new music. But often the Order Tracker was interrupting these moments. A quick glance at theOrder Tracker could result in prolonged worry as customers watched for a sign of progress.

“The waiting portion of a service encounter can significantly affect customers’ overall satisfaction with the transaction”

While an order was being prepared by the restaurant, customers were left to tap around on a map that was empty except for the pin representing the restaurant. For upwards of 10 minutes very little would change. As is noted in The Experienced Utility of Queuing, “the waiting portion of a service encounter can significantly affect customers’ overall satisfaction with the transaction”. We saw how lack of transparency was doing exactly that and could reduce the enjoyment of the final eating experience.

We wanted to make sure customers feel informed about their order whenever they feel the need. A segmented progress bar that fills up continuously as the order makes progress forms a large part of the experience now. Each time a customer comes back to the Tracker there’s a visible sign of progression. They can have the confidence to put their device down when there’s other things they’d prefer to be doing — a momentary glance is enough.

But there’s a time and place for your product to grab attention. For example, we saw that when a rider picked up the order from a restaurant it was a moment of sheer joy for customers. They began watching in excitement as their rider travelled across the map towards them. A notification highlights this moment to the customer, and after opening the app, they now see a screen completely focused on the map, designed to build upon this excitement as the rider gets closer.

We saw vividly how digital products influence the physical experience and the appropriate points where we should both tone down and amplify the product experience.

Use digital to facilitate understanding for the physical

Before we got to prototyping, we undertook research on the original order tracking experience to understand existing problems and usage. We were seeing a disconnect between what we were communicating and what was really happening during an order.

At this point riders were represented only by a pin on a map. A pin has a difficult time telling the story of a rider navigating across a busy city — it was doing little to facilitate empathy for the riders’ role in delivering an order. Opening the front door to a rider who until then was represented by a pin, didn’t encourage a warm interaction between the customer and rider. We wanted to change this.

A clear first step we took was revealing the rider’s name to customers. It’s quite reasonable to dismiss this as a minor change, but we witnessed it completely change how customers perceive and interact with riders. Unprompted, the research participants acknowledged the rider’s name when it was shown in the tracker. And when their doorbell rang they would use to the rider’s name to greet them — adding some warmth to an interaction that had previously been very transactional.

Since then we’ve also added animations to the order tracker for each stage of an order. These don’t just bring more playfulness to the experience — they set better expectations on how the transport type (moped, bike, car or walking) can impact rider travel time.

These changes are taking the product experience in a direction that lessons the divide between what a customer sees in the digital product, and what’s happening in reality.

Let the product’s context dictate tooling and process

As we took prototypes to test with customers in a range of countries, we quickly realised that ‘smoke and mirrors’ prototypes wouldn’t do the job. They didn’t take into account the sometimes unpredictable human element of ordering, and how the neighbourhoods we were in could influence the ordering experience.

We experimented with Framer and other tools, but we found we couldn’t replicate the realities of tracking orders that we needed to learn from the prototypes. We turned to our engineering partners who were already closely involved in the project.

Pairing 1:1 with our team’s Android engineer became the most valuable way to prototype, test and iterate. Barely above wireframe in fidelity but crucially fed by real production order data, we created prototypes that enabled us to test how and what we communicate with customers. We could move from a study based in a high rise residential block, to one in a suburban neighbourhood and see the impact of geography and other variables on an order.

A change that came out of this was reframing how we communicate order arrival times. A troublesome building entry system or a rider searching for a safe place to park space would have previously bumped up what the customer sees from ‘arriving 20 min’ to ‘arriving 23 min’. Seeing a countdown timer increase rather than decrease inevitably caused worry.

Between sessions we changed the arrival time from a countdown timer (e.g. ‘Arriving 20 min’) to a ranged clock time (e.g. ‘Estimated arrival18:00–18:05’). A 5 minute range means small changes to arrival times can occur without causing alarm. A range sets the right expectation that, in a system with human inputs, estimates can change for absolutely reasonable reasons.

Prototypes brought to life by live production data meant the ordering experience became much more visceral for research participants. And the research was all the more insightful for us. While collaborating with engineers throughout the design process it meant when it came to making changes big and small, we had a shared understanding of the user and business benefits.

Since shipping the MVP in early 2018, we’ve continued to iterate upon the experience. With each step, we’re reducing the enquiries that come through from customers about their order is or what’s happening with their rider. Transparency and clear communication have been fundamental to this. We’re also seeing a much more empathetic relationship between our customers and riders as a result of the changes. The gap between the physical and digital has reduced.

This was a perfect example of cross-discipline work — from user research, content design, engineering, data science and product. Together everyone played a vital role in shaping the order tracking experience and improved it for our customers and business alike.

Interested in working on similar projects? We’re hiring!
Find out more about opportunities at Deliveroo here

Deliveroo Design

Stories, tidbits and musings from the content, research and design team at Deliveroo

Thanks to Tim Davey

Stephen Macvean

Written by

Deliveroo Design

Stories, tidbits and musings from the content, research and design team at Deliveroo

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade