Role
Product Designer
Date
One week in February, 2022
With
Myself
Where
Product design candidate assignment for Apple Development Program, completed in Edinburgh
Link
Background & Problems
Widgets on the Home Screen on iPhone make it easier for users to access information without having to open an app — for Deliveroo users, food delivery is not just about opening an app and choosing what they want to eat, it’s also about waiting, picking up, eating and so on — a journey that can take a long time. During this process, the user’s experience would be greatly enhanced if they could get valuable and timely information at a quick glance at a widget on the Home Screen.
Deliveroo’s existing widget reflects only one stage of the user's ordering journey — about to order (it’s called ‘Get food’ on Deliveroo’s widget). It does not provide information for the other stages of the user journey. Users had to open the app multiple times after ordering to get information such as whether the food was ready, when it would be delivered, the location of the rider, etc. So clearly it has a lot of room for improvement.
Deliveroo’s existing widgets by Shaun Tollerton. Source: Dribbble
Purpose
The purpose of the design is to provide glanceable, timely information at different stages of the user journey (ordering, waiting, collecting, dining), so that the user does not have to repeatedly open the app or check a large number of notifications to get valuable information. With the Smart Rotate and Widget Suggestions of the iOS widgets, we can do this by donating information to the system.
Analysis & Ideation
User journey
Firstly, I tried to find out what the user’s needs were at different stages of the user journey, in particular, what problems they might encounter and what information they would like to know. After that, I filtered out the problems that were suitable to be solved with widgets.
How might we ...
Next, based on different scenarios and needs, I conceptualise what kind of information and functionality we can provide through widgets.
Design
I quickly completed the interaction and UI design of the widgets. In brief, I have designed two different widgets based on the needs of users at different stages of ordering with Deliveroo.
1. Restaurant recommendations. Mainly useful before ordering. It is similar to the existing widget, but I managed to make it more visible and intelligent.
2. Order tracking. It changes over time, containing two main states:
1. Restaurant recommendations. Mainly useful before ordering. It is similar to the existing widget, but I managed to make it more visible and intelligent.
2. Order tracking. It changes over time, containing two main states:
(a) Waiting for food: tracks the status of the order and the location of the rider.
(b) After receiving: reminds the user to tip the rider.
In particular, these two widgets work more intelligently when Smart Rotate and Widget Suggestions are enabled. I will explain this in more detail later.
Restaurant recommendations
Before ordering, it’s convenient to see your favourite restaurants in the widget and click to go directly to their pages. But obviously, users will probably not always have the widget prominently displayed, as they will only want to see this information when they need to order. How do we predict the user’s intention to order and intelligently surface the widget with restaurant recommendations at the right time?
By donating intents to the system, we can increase the visibility of the widget. Deliveroo can donate the intent of what time of the day the user will often open the app to place an order, through some certain API — INRelevantShortcut or INInteraction. The system can use this information to learn user behavior and rotate stacks or suggest the widget to recommend restaurants at the right time — when Smart Rotate and Widget Suggestions are switched on.
Order tracking
Waiting for a meal to arrive can be a bit of a pain, yet full of anticipation. Users want to know how long until their food arrives and this is where the Order Tracking widget is very useful.
Order Tracking has three different states:
1. Waiting for food. It can be further broken down into three statuses: ‘preparing the order’, ‘being delivered’, and ‘about to arrive’.
2. Tipping the rider. When the delivery is complete, the user is encouraged to thank the rider and give them a tip.
3. Other states. ‘no order’, ‘multiple orders’.
Intelligent control of the priority of widgets at different times
The order tracking process is long and involves a number of different stages, but the user doesn’t really need to check the status of the order all the time, and the widget does little if there is no order — so it’s likely that the Order Tracking widget won’t stay on the user’s home screen. However, there are certain key moments, such as when an order is ‘about to arrive’, that we would like the user to be aware of. So it would be great if we could control the visibility of the widget based on the status of the order and surface it at right time.
With the API TimeEntryRelevance, we can do this by simply assigning a score and duration to the different order statuses and we can control the priority and duration of the widget that is displayed each time the information is updated.
The example below shows the priority of the widget at different points in time when there are two orders. As the score of ‘about to arrive’ is the highest, the system is more likely to put the widget at the top of the smart stack at this point. Now you can prepare to recieve your food.
One more thing: voucher reminder
‘How might we avoid forgetting to use our vouchers?’
I talked with some friends who use Deliveroo and they mentioned this problem of always collecting vouchers and then forgetting to use them until they expire — I do the same!
So I designed another widget to remind us of the expiry dates of the vouchers.
Dark mode
Here’s what the widgets look like at night :)
