Designing Food Delivery UX for Hangry Users
Too many delicious photos, too little goals.
Restaurant delivery services have been booming since 2014, and for good reason. It is insanely convenient to get on your phone and have any meal from any restaurant you want at your door in an hour. With the COVID-19 pandemic, food delivery became even more vital to keep many restaurants afloat and their customers well fed. But more options are not always better for the user. Instead, it leaves users with decision paralysis: feeling completely overwhelmed by the options and unable to make a decision.
Let’s take the Cheesecake Factory for example. If you’re familiar, than you know they have a monster menu with 250 items (and amazing breadsticks). While there is something there for everyone to love, it takes forever for anybody to actually read through and understand that entire menu. Personally, I feel pressured to order by the third time the waiter comes around, and am never confident in my decision. When the food comes around, sure it’s good… but I always wonder what else I could have gotten. What about the one that got away? The meal I’ll never know? This is the dilemma many restaurant lovers face today.
How does this experience look online, on food delivery menus? Way worse. Users now have to choose between different food delivery services: grubhub, postmates, doordash, and ubereats, all of which have hundreds of restaurants with their own hundred item menus, leading to thousands of options for the customer to make. How can anyone be confident that they are making the right decision?
Let’s take a look at how we can simplify this experience, so the user ends up satisfied with their final decision.
Understanding the Differences
First we must acknowledge the key differences between somebody that orders in a sit-down restaurant, and somebody who places a delivery order from the same restaurant. Here are user personas to emulate both.
For the restaurant goer, Vanessa, the experience is a path of discovery. She sits down and has some time to explore and truly absorb the menu. Since she is already at the restaurant, the time it will take for the food to get to her is short and she can order in stages. First drinks, then appetizers, main course, and dessert.
The delivery orderer, Mark, is mainly interested in convenience. He’s working on a big project due tonight, his fridge is empty, and he’s starving. He turns to the delivery app hoping for a quick and satisfying solution. He gives preference to restaurants with a quicker service time, good discounts, and reviews. He can only order once, so he makes sure he orders enough to satisfy his hunger and to exceed the delivery minimum. We will focus on Mark for the remainder of this study.
Reducing Cognitive Load
In order to improve the user experience of delivery apps, we need to understand what our user is thinking when they are placing an order. The human brain simply isn’t designed to process and compare the sheer amount of information it is often given. If you factor in hunger (or hanger), the brain’s capacity to assess information is even lower.
Hick’s Law states that the more choices you present your users with, the longer it will take them to reach a decision. In Mark’s case, the overwhelming number of options on online menus impedes his primary goal, which is to eat as quickly as possible. However it is still up to him to make the final decision. How can we clear his mental roadblocks and reduce his cognitive load, to get him to that delicious meal?
Filters
Many food delivery apps use filters to help narrow things down for their users. This helps users sort through and make use of their information based on what goals are important to them. Grubhub takes this approach.
I would argue that this approach is still overly complicated. There is way too much on one screen — Mark doesn’t know where to look. Although there are filters on the left side of the site, they don’t seem too helpful. They get lost next to the other data features being used: sort by, and categories. Won’t the ratings or delivery time filters be better utilized under the sort by feature? Mark’s vulnerable, and hungry, senses are being overloaded with photos of food too early. This further impedes his ability to focus on and make decisions.
Categories
Another approach is to focus primarily on different categories the user may be interested in, in order to narrow down on options. Uber Eats follows this approach by showing different categories which are revealed by scrolling down.
The problem here is that our user, Mark, still has to work to find his category. He is still being recommended food far too early, and it feels a bit too forceful. The “View all” button is small and not noticeable. In addition, there is no filtering option at all so he has to pick a category or restaurant in order to continue. Most important, there is no focus on goals. What does the user want? Where is the agency?
A Better Way
When it comes to decision making, you want to start from the top level goals or main priorities and narrow down your options as you go. First decide what you care about most — for your food to get there quickly? Best deals? Do you already have a craving to itch? As you go along, you can adjust.
Here’s a quick and dirty low fidelity user flow I invented to help the user narrow down some of his options, slowly, and reduce his cognitive load as he does so.
Homepage
The user sees the following homepage as soon as he decides he wants to order food. The user enter’s his delivery address which is vital no matter what type of food he’s looking for. We then ask him to pick a primary goal right upfront, before we show him any food options. This gives him a chance to think about his goal before his senses are overloaded with photos of yummy food.
Sorting to Primary Goal
We show Mark the restaurants that will be able to deliver fastest to him. He can change the primary goal simply by clicking on it. He may also search for a specific food up top, but it will still sort by “fastest delivery” unless he changes that goal. He has already identified that he is hungry, and we better get the food to him fast.
Secondary Goal
Mark notices all of his food options are relatively unhealthy, as fast food often is. He goes into search to look for something different. Here he can click on a fast category or enter in his own search query if he already knows what he wants.
Exploring Restaurants
Mark now sees restaurant options (with photos) for food that is healthy and fast, and will likely end up with something he is happy with.
Now you may be asking, why not allow the user to select a food type (healthy) AND a primary goal (delivery speed) in the beginning? Because in the end, ordering a product or service is still largely a process of discovery and exploration. The goal here is to help our user make the important decisions, all while preventing cognitive overload. At the start of the flow, the user may not know exactly what he wants to eat. If he did, he probably would’ve just googled “food delivery from Potbelly’s” and ordered it from there. By allowing him to make little decisions along the way, Mark feels as if he has agency over his decisions, but is still discovering things along the way.
We need to consider the user’s state of mind when they are using our applications. The last thing you want is for your delivery platform to leave a bad taste in your user’s mouth.
I am by no means an expert in this field, but food delivery has been on my mind lately. If anybody has any thoughts or further reading recommendations, please share in the comments below!
