Redesigning our global order tracking experience
Every day, many customers worldwide choose our apps to order food or groceries. They open the Just Eat (or its local equivalent) app, pick their items, pay for their order, and end up on the order tracking screen which provides them with live updates.
What’s happening in the background seems straightforward, but there’s a lot going on. The restaurant or store accepts and prepares the order. Meanwhile, the system searches for a courier, who then travels through all kinds of weather across the city to deliver your order.
In this complex process, many variables come into play, such as the restaurant’s busyness or availability of couriers. Traffic conditions play a role too: delivery in Mallorca is different from central London or Sydney. Additionally, we see diverse customer expectations. In our research rounds, we observed customers who diligently monitor the order tracking screen for updates, while others barely pay attention to it.
In all of this, the order tracking screen is the place where users expect to see the right updates. But what are the ‘right updates’ in these situations? And how do we design a screen that shows just enough information?
At the beginning of 2023, our Customer Design team initiated an extensive process to revamp the user experience of the entire Just Eat app, partly in preparation for our new global platform. The order tracker screen played a central role in this effort. Through research, user testing, and heuristic evaluations, we implemented a significant number of improvements.
This case study walks through a few highlights of the design process and some of the challenges we encountered along the way.
The problems we were trying to solve
To understand where opportunities and challenges lay, it was important to start from observed problems with our platform (screenshot below).
- The old order tracking screen increasingly hindered us in implementing improvements. Just Eat Takeaway.com now delivers not only meals but also groceries, electronics, and even toys. This creates a new dynamic where our old tracking experience was no longer scalable enough.
- Placing an order should be a carefree, positive, and above all, reliable experience. We wanted to be more empathetic and supportive throughout the order tracking experience.
- We identified the need to enhance the information customers received while awaiting their orders. We noticed that users often had an inaccurate understanding of what was happening, partly due to the order statuses we provided. These statuses varied depending on the order type, restaurant-provided updates, and other factors. We wanted to be more consistent, clearer, and reliable, regardless of the order type.
Reimagining the order tracking experience
As the design team responsible for the ‘After Order’ experience, we’ve set our goal to offer customers trust, transparency, and reassurance with every order. Drawing from prior research and design sprints, we already had a strong foundation and vision with which to begin this project.
Order statuses
At the core of the order tracking screen are the Estimated Time of Arrival (ETA) and order updates. Users develop a mental model in their minds of the steps they believe their order goes through, based on expectations, previous orders, and experiences with other platforms.
When we asked customers during research about the steps their order would go through, we always received diverse answers. This was partly because of the different types of order updates we give.
For example, we have many partners on our platform who deliver orders with their own couriers. For these orders, we could only provide limited updates because we were unable to track live location. But for orders delivered by our own couriers, we provided highly detailed order statuses. These, however, were focused around logistics: we told in detail what the courier did, even when we didn’t have to.
All of this made the experience appear inconsistent and ambiguous.
We redesigned the ‘Order statuses’ aiming to find the right balance. On one hand, we wanted to be transparent; on the other hand, we aimed to avoid ambiguity. After several iterations, we introduced a clear ‘core’ process for every order, streamlining it to a few key steps. This led to the removal or replacement of previous order statuses, with detailed information now available in sub-statuses.
For instance, ‘Awaiting confirmation,’ the first visible step in the ordering process, brought about uncertainty. If almost every order gets confirmed, why do we leave users waiting in uncertainty? Instead, we can proactively reach out if an order is not confirmed to keep the experience positive for the majority of customers. As another example, we replaced a few updates regarding courier assignments with a new status ‘Preparing your order’, aligning better with users’ expectations.
While user research offers valuable insights, testing these adjustments is crucial. A minor change to order statuses has a potentially significant impact once rolled out at scale. We examined, among other things, effects on the number of customers contacting our customer service. Running A/B tests gave us the clarity needed to globally deploy the new order statuses.
Information hierarchy
As a product designer, it’s essential not only to design beautiful screens but to set them up in a way that ‘works.’ Understanding customers’ wants and needs was a primary focus in many research sessions we conducted.
After order placement, most customers check the estimated delivery time and order status. Then, customers usually put aside their phones. They probably check-in on their order once in a while amid their daily activities. But there’s still a significant portion of users who carefully double-check their order. And especially when something goes wrong or unexpected, all necessary information must be available.
Presenting all needed information on a small screen without overwhelming customers poses a challenge. With this in mind, we divided the order tracking screen into roughly three sections:
- The arrival time & order statuses are prominently visible at the top, providing primary updates about the order.
- In the middle are the animated illustrations or the map. Animations offer a sense of joy and avoid the screen from becoming cluttered with info, while visually supporting the order status.
- Finally there’s the bottom section, easily accessible with your thumb, containing all additional information.
In order to subtly inform customers of events which might need their attention, we designed a new component: the stacked notifications. These show up during a significant event but are still visually separated from the estimated arrival time and order status.
Improved order details
Further down the screen, we made improvements to the order details. For example, we changed the receipt to only display essential information. We found that the majority of users required a brief overview of their order, but just a small percentage needed a comprehensive breakdown of the receipt. By showing a summary of the order, we reduce content overload, while allowing customers in need of a full receipt breakdown to access this with a simple tap.
Enhanced tracking experience
Many customers closely follow along with the courier on the map. However, the joy and clarity it brings to see your order getting closer, this can also lead to anxiety. For instance, we observed customers in densely populated cities waiting by their windows until the courier arrived, then rushing to the door to ensure the courier finds them.
We changed the map design to bring more clarity to the tracking experience. We adjusted the amount of information on the map to have a better level of detail. Additionally, we introduced route predictions so customers can better anticipate the courier’s actions and we improved the way we talk about grouped orders.
Finally, to capture the joyful moment of a successful delivery, we introduced a playful animation to close off the experience.
Accessible order tracking
Our apps are used by a wide variety of people from diverse backgrounds and in different contexts. We design our products to be inclusive and accessible for everyone.
Through close collaboration with engineers, we ensured optimal support for enlarged fonts and contrast levels, catering to users with visual impairments, and ‘reduced motion’ for those sensitive to motion. We also built targeted support for both large and small screens, and dark mode.
For example, various feedback channels revealed challenges faced by customers who had enabled enlarged fonts on their device and accessed our previous order tracking screen. The map with live tracking, for instance, became almost unusable, causing understandable confusion. By considering these scenarios from the start and conducting testing sessions throughout development, we aimed to address these issues.
Validating with customers
Throughout the entire design and development process, we extensively tested everything to ensure our ideas actually enhance the user experience. While some aspects are verified through A/B testing, we heavily relied on user research interviews too. Feedback on our prototypes helped us understand if we were heading into the right direction in terms of aesthetics, order transparency, and information architecture.
Ongoing improvements
Just Eat Takeaway.com has multiple different platforms across many countries. In the process of consolidating these platforms, we were able to draw lessons from all of them to build the best global order tracking experience.
The process of redesigning such an important screen in the customer journey was a highly collaborative effort between designers, developers, QA, analysts, product management, and many more.
This redesign gives us a new baseline that will be rolled out in phases in the coming period; a new foundation from which we can further improve. We can’t wait to share many more upcoming improvements and features soon.
Just Eat Takeaway.com is hiring! Want to come work with us? Apply today.
