Did you know that the first food delivery ever was for “naengmyeon” noodles restaurant in Korea in 1768? and here we are in 2020, still using food delivery option quite often! nothing has changed, and nothing will change.
Now I’m here to discuss the user experience of ordering food, the current experience — which is ordering from the 3rd parties mobile apps that has a lot of options for restaurants/bakeries/cafe’s…etc. It has been a very active sector here in Saudi Arabia and most of the world counties. A great amount of apps are in the store right now and even more are coming, a very intense competition between them is going on and a lot of apps can’t handle it, so they shut down. So, I though I will study the UI/UX part of these apps, and try to make it as easy-to-use as it could ever be! because it’s a very important factor for the customer overall satisfaction on his food delivery experience.
Goals
- Design a minimalistic UI & humanized UX.
- Design an app with visual perceptions.
- Consider designing with consistency, Fitt’s law, and Hick’s law.
User Research and Survey Findings
I conducted a survey to collect some customers opinions over the UI/UX of the food delivery app(s) that they’re using. I came up with 18 participants. Here’s the result which indicates the participants were very much into the delivery food apps.
Also to proof one of my point in our local app store lack of having one/two good apps I asked how many food delivery apps are their phones, the average answers is shocking but was expected to me.
40% has 5 or more of an app that serve the exact same purpose! I know the reason wont be just for the lack of user experience and design, but also for restaurants variety/fast delivery…ect. But design is one of the main facts that we should not ever ignore.
To investigate more I asked this question “Have you ever changed the delivery app cause the menu of the restaurant you wanted to order from wasn’t very clear?”
As you see only 11% didn’t do it. more than 35% actually changed the app completely which means the app loosed a customers just because of their bad UI/UX.
Now certainly we have a design issue with our existing apps. I have some assumptions and a design goals I’d like to achieve, but also in order to support them I asked the participants these questions:
From my perspective, and from the above results, “search” is really an important feature in any food delivery app. Also we have the “filter” feature, which is not as commonly used as the search, but since 50% are using it once in a while, it shouldn’t be a neglected feature.
The Design
Here we are! I will share with you the experience of the most important features and screens. let’s start with the “Home” screen where the list of restaurants/bakeries…etc are.
From the top, we have the main category slider which enable the user to choose what to show him. This is the most generic filtering option that could jump to the user mind. Does he want to have a dinner? a coffee? or a baked muffin?
Regarding the “Search box”, I assumed -with the survey finding support- that searching is used most of the times! it’s so important and critical feature. considering all the possible scenarios, users tends to search either at the beginning ( they already know what restaurant they want) or after a long browsing, thinking, and comparing, they will settle on an option and go for it directly by searching. That’s why I designed the search box to be in the most comfortable to reach area -following the “Fit’s Low”- thumb zone.
To the next design element, I choose to show the restaurants as a grid with the logo image so the user can catch it and recognize the restaurant even faster. The user will be in either browsing/searching mode, so why bother him with a list and extra information like “short description, ratings, distance…etc where all the user need is recognize the restaurant he wants. Also as a small encouraging info I added “Free Deliver” & “Offers” tags to the grid box.
One last thing to mention in this screen is the small filtering icon you can notice it the top right. The user can filter by more specific categories.
The Menu
From left to right of the next screens:
1) the design of a menu has the same grid view experience & category bar. The section at the bottom is ‘Bill Summary’ and a view cart CTA — fitt’s law is considered here also.
2) A Modal will open when the user clicks one of the menu items, to select the options & quantity
3) The cart screen, a simple summary of the order, total price, selected delivery location, selected credit card and a voucher text input. with the same design of the bottom section but this time with a CTA to submit the order.
I tried to make the journey of ordering as simple and neat as possible!
The last icon to show you in the tab bar is the profile. it’s pretty simple profile screen with the only necessary info to view/add/edit.
