Case study: Designing an intuitive and innovative food delivery app
The Client
Driveway is an online food delivery platform and also a new player in the industry. Its main rivals are Glovo, Uber Eats, Foodpanda, Takeaway, Postmates, and DoorDash.
The Challenge
Driveway needed to establish itself in this market segment among the well-known rival apps. People have been using all these services for some time, and it isn’t easy to gain their trust with a new service.
Driveway wanted to do everything right and eliminate all the pain points that exist in today’s apps.
The Solution
For this project, the solution was to create an app design that offers unique features, eliminates all problems from competing applications, and retains a familiar user interface.
A research was conducted to see what people don’t like about the current apps and what they would like to see in a new application. This research’s results will be presented throughout this case study.
Regarding the UI, simplicity and practicality prevail. “Usability is always beautiful,” and so I thought, by creating an an interface that is more focused on the UX than on fancy UI. Following the KISS principle, everything is simplified to the max, resulting in a very lightweight UI.
Regarding the UX, the main philosophy was to create a clear, intuitive, and understandable product experience. This case study showcases each screen, outlining the most crucial design decisions.
0. Opening the app
As soon as the user opens the app, they are greeted by a splash screen and then taken directly to the home screen. This app has no onboarding.
This no-onboarding solution’s advantage is that the user gets in direct contact with the app immediately. At some point, if an account is needed to access some of the features, only then will the user be notified.
Instead of using pretty onboarding screens to lure the user into registering, it is better to let them experiment with the app and decide upon account creation.
1. The Home Screen
One of this app’s key features is the way the restaurants are presented. There are two ways of viewing the restaurants — List and Grid.
However, there’s more to it. A different solution was adopted for both view modes instead of a big banner next to each restaurant (as in other apps).
In most cases, the restaurant banner has very little relevance for the user because what they see there has nothing to do with what they receive in their order.
Thus, instead of an irrelevant banner next to each restaurant, a “film reel” is shown with the restaurant’s products. Using this approach, a much clearer picture of the restaurant is outlined. Instead of a fancy presentation image, only the sold products are presented.
The whole product area is also horizontally scrollable. Therefore, the user can scroll through the restaurant’s products right from the home screen. This kind of representation was also kept in the grid view. The grid view allows another perspective and much faster viewing of all the restaurants in the user’s area.
Throughout the entire app, there is no pickup option. The whole idea is for the user to stay home and to get food delivered to their driveway.
In the screen’s upper section, the user only has the option to choose their location. If the user taps on it, a pop-up will open.
Apart from this, the upper section offers frequently used controls like changing the view mode, a search bar, and some smart tags.
The search bar is contextual and has a different meaning on each page. Here, the user can search for restaurants, this being strengthened by the placeholder message and the restaurant icon, which replaces the usual magnifier icon.
The filtering was removed entirely and replaced with smart tags, for the most common scenarios.
Even though the app’s specificity is food, there is no hamburger menu. It was not implemented on purpose, and it was replaced with more efficient solutions.
The bottom navigation is unconventional for a delivery app but familiar to users. Instead of having buttons scattered all over the screen, this type of navigation has been implemented, inspired by social apps.
This type of navigation’s advantages are that users know where they are in the app and can always move elsewhere.
For the icons, a no-label approach was used, as they look common enough. The research showed that users could recognize at least 3/5 icons, so that’s a pass.
2. Discover Screen
Since the home screen is focused on restaurant presentation, the Discover screen is focused on product exploration.
This screen addresses the scenario where the user does not know what they want to eat or simply wish to discover new things.
Instead of sitting around and looking at products from all restaurants one by one, the user can have a much clearer visual representation on this screen. They can scroll through the images and decide on something.
This page is based very much on the products’ visual representation, users being able to choose a product based only on the way it looks. Product name, price, and ingredients are secondary issues in this scenario, as this information can be viewed later.
3. Search
The contextual search is different on every page. On the Home page, the user can search for restaurants, whereas on the Discover page, they can search for food.
For example, on the second screen, this aspect is strengthened by the placeholder message — “Search for food” and the food icon.
However, if the user presses on the search bar and, at some point, changes their mind, they can switch between product searching and restaurant searching.
The location is still relevant on this screen and remains here to remind the user that they will only receive results from their area.
4. Plates
“Plates” is one of this app’s core features. Besides the possibility of marking food products as favorites, this app offers the user the possibility of saving those products in Plates.
Plates are like pinboards or mood boards, a place where the user can get creative and start adding products from various restaurants.
The user can create a plate for breakfast, one for dinner, or even a wishlist.
The contextual search is changed again on this page, having the functionality of searching strictly among the user’s plates.
If the user taps on the lock at the top, a pop-up will appear, reminding them that all their plates are private and no one can see them. This app is not a social network.
5. Restaurant
The first thing the user sees on the restaurant screen is the title, big and clear, among other essential information — delivery time, rating, and delivery fee.
One of the most important parts of this screen is represented by “Badges.” Badges are only the first chapter of the gamification technique, which is spread throughout the entire app. This was added to motivate both restaurants and shoppers.
During the research, it was found that many users complained about the changes in delivery time and many other bad practices. Because of this, badges were introduced to motivate restaurants to adopt the best practices.
If the restaurant doesn’t keep up and starts doing things poorly, badges will be withdrawn. This doesn’t need to be reported by users because the app automatically observes the changes and withdraws a badge if necessary.
If the user taps on a badge, they will get more details about it in a pop-up.
The badges’ explanation is as follows:
In this app, restaurants cannot receive reviews. Only the products sold can be reviewed individually. All product reviews form the restaurant’s overall rating.
Suppose the restaurant has bad practices, such as frequent changes in delivery times or frequent reports about missing food. In that case, these things will be automatically notified by the app, and their badges and delivery times will be changed as such, for the worse.
Delivery time is calculated automatically and can’t be entered manually by the restaurant owners. If orders continue to be delayed, their displayed delivery time increases.
6. Product
Making use of the iOS modality, the product screen opens as a modal.
The product image represents the first and largest part of the screen. This image is the one added by the restaurant. Being the first and largest on the screen, it offers restaurants the opportunity to showcase their product in the best light.
Not only can restaurants add photos of their product, but users can do that too. The next section is called “Photos from clients”. The latest images uploaded by users of this product are shown here.
During the research, many users complained that in their past experiences, there were big differences between the way the food appeared in the presentation picture and how it looked in reality.
Thus, with this app, this new section was introduced, which automatically collects the photos from the users’ reviews and puts them in a grid to give a clear image of how the product actually looks.
It is essential to see the difference between marketing pictures and reality, what the user sees in the photo versus what they receive/put on their plate.
Further, the app offers the possibility of adding individual reviews on each product. Inspired by shopping apps, the rest of the screen is filled only with reviews.
Taste can’t be determined based on pictures, so that’s why reviews are important. When buying something, even food, reviews are the main thing a buyer is guided by, so this section is entitled to fill the entire rest of the screen.
7. Ordering and Checkout
There’s no notion of “Cart” in this app, only a floating button that appears every time the user is on a product page.
The notion of a cart is irrelevant with this type of app, as the user can’t buy several things from different restaurants simultaneously. With any food delivery app, immediately after a user leaves a restaurant page, the food selection previously made is canceled, so the cart approach is useless.
It is important to notice how this button says, in a first instance, “Add for”, and not “Buy for”, so as not to induce a wrong idea. Being called “Add for” suggests that the product is added somewhere in an imaginary basket, and only after several steps can the user buy it.
If the user presses it, a pop-up will appear with options to add extra stuff to the selected product.
Once the user is done with adding extra stuff, the app returns to the product list.
Here, the user can either order some other products or increase the quantity of the product already added.
Only on this screen, the word “Add” changes to “Order” so that the user clearly understands what will happen if they press it again.
If the user presses the “Order” button, they will be taken to the checkout page.
The checkout page is made in such a way as to be sure that the user goes through all the necessary steps and all the details are correct before placing the order.
The “Place Order” button is not floating here. It stays at the bottom to ensure that the user goes through all steps and all the details are filled correctly before pressing it and sending the order.
8. Delivery
To spice things up a little, the order’s progress is presented in the form of stories. This is another inspiration from social apps, and it is in stark contrast to the rest of the delivery apps, which present the order progress as simple, plain text.
The stories approach fits very well in this scenario, as it keeps users somewhat entertained during the waiting period while also displaying the information efficiently.
During the research, many users complained about their delivery experiences with similar apps. More exactly, after placing an order, they could not contact the restaurant anymore. This led to many frustrating situations and unpleasant events, so here it was added right away.
In the background, a series of thematic images with an illustrative character is displayed, offering the user an approximate visual representation of what is happening at that moment with their order.
The images are replaced by a live map that will permanently show the user the courier’s position from the moment the courier picks up the order. The Call Driver button replaces the Call Restaurant button so that the user can contact the driver at any moment.
If the user presses the “Review Order” button, a modal will pop up with all the order details, along with the possibility of canceling the order.
During the research, many complained about the impossibility they had with similar apps to cancel an ongoing order or the difficulty of finding this button. Here, this option was put in a visible place but not within reach so that the button couldn’t be pressed accidentally.
If the user presses the minimize button, the app returns to the Home page, and the story is minimized as a permanent banner. The user can tap to see the status of their order at any time.
After the order has reached the user, the user is prompted to leave a food review. As mentioned before, reviews can be left individually on each product.
The user is encouraged to leave a written comment and even a picture, not just a rating from how the UI is made.
9. Your Profile
This is the first section where the user is asked to create an account to access all the features. Everything that has been presented so far, including placing an order, can be done without an account.
If the user doesn’t have an account, they will be prompted with a screen that suggests making one. For registered users, pressing the profile button takes them directly to the profile page.
The profile screen can be divided into six parts: Level Indicator, Your Stats, Your Badges, Your Latest Orders, and General Sections.
9.1. Level Indicator
As can be seen at first glance, the app uses a lot of gamification. The mix used here is “BPL” (Badges, Points, Leaderboards).
In the first part of the screen, the user can see in the form of a progress bar their current level, as well as general information about themselves. The levels are given according to the accumulated points.
Points are received for each order placed, for each review with a picture, and so on. This directly motivates the user to accumulate more and move to reach the next level.
For example, here is what happens after the user leaves a photo review.
The user is informed that they have earned 100 points for their photo review and how many points are needed to access the next level.
Another place where the levels appear is in a product’s review section. An icon with a level appears next to each user name. This is a method of clarifying the social status among users. Also, a review written by a member with a high level gives readers more confidence.
The whole app is very much based on the community, and the community must be rewarded with points, badges, and levels for the effort made.
The community helps itself so that people don’t get stung and everyone receives good food. The app is focused more on the community as a forum rather than as a social network.
9.2. Your Stats
Returning to the profile screen, the next section is represented by Your Stats. The user’s number of points and their global and local rank are presented here.
If the user taps on the points, they will be taken to the points screen, showing a history of their gains. Also, the user can see there how many points they need to access the next level.
If the user taps on the rank, they will be taken to the rankings screen, where a global or local top is presented.
9.3. Your Badges
The user gets badges when they do various things. The badges obtained are colored, and those that have not yet been obtained are gray. Badges appear in the order the user unlocked them.
This is the only place in the app where other colors are used besides the thematic ones.
If the user taps on an earned badge on the profile screen, a modal will pop up, which shows the badge’s name and what they did to unlock it.
However, if the user taps on a gray badge that they haven’t unlocked yet, a screen will appear showing the badge’s name, what is needed to unlock it, and their progress with that.
When the user taps on someone’s name in the reviews list, they can see the following information: name, level, number of points, location and local rank, and a list of badges.
Badges have the following meaning for the user:
9.4 Your Latest Orders
Returning to the profile screen, the next large section is represented by a gallery with the user’s latest orders.
As the saying goes, you are what you eat. Thus, a gallery with the user’s latest orders is quite representative of the profile page. It also helps the user find a product they had ordered and liked to order again very quickly.
9.5. Additional Profile Sections
In the next part, there is a list of general sections accessed from the user’s profile screen.
9.5.1. Your Orders
If the user taps on “Your Orders,” a modal will open in which their last orders are presented in a list form. The user can sort the list ascending or descending by date or search for a specific order.
Since the orders usually contain more than one product, they are also presented in a film reel form, thus keeping the consistency with the app, where this method is frequently used.
This is in stark contrast to the rest of the delivery apps, where the users don’t even see pictures of the products in the order list, and they don’t know what they ordered, what those products look like, and so on.
The other way of viewing the orders is in the calendar view form. This one allows the user to see concretely, by day, what, and how much they have ordered.
If the user taps an order from the list, a modal appears with all the order details and pictures of the products.
9.5.2. Your Favorites
If the user taps on “Your Favourites,” a modal will open showing all the products they have marked as favorites.
Users, in general, tend to save a lot of things to favorites (hoarding). In this screen, the grid is the smallest of all to suit this scenario better.
Also, the user can switch between favorite food and favorite restaurants here.
9.5.3. Payment Methods
“Payment Methods” allows the user to easily edit their means of payment, thus having a visual representation of the card, inspired by neo-bank and neo-wallet apps.
10. Notifications and Messages
This app generates several types of notifications. Considering that they can appear often, the user can see them in a special place in the lower navbar.
What differentiates this app from others is that, in terms of notifications, they are much more substantial, more detailed, and not just plain text.
Depending on the notification’s nature, a different icon is displayed to help differentiate between them. Additionally, photos with the products and many other details may appear.
The types of notifications that can be received are:
Given the nature of this app, notifications and messages have been placed in the same place. The user can easily switch between them via a segmented control.
In terms of messages, the only people the user can talk to are the people from the support center (when they open a ticket) and the drivers.
When the user enters a conversation, the interface is very similar to the usual messaging applications so that users will feel familiar with it.
The app allows the user to call the driver with audio/video and attach pictures to the conversation, which can be very useful.
11. Settings
The Settings screen offers the user a simple yet powerful interface.
From here, the user can edit their profile information, see their activity throughout the app, or change the privacy and security settings. These are essential things nowadays, even for a food app, as many people value the possibility of managing these things.
A “Languages Switcher” option was also added. During the research, many complained about the impossibility of changing the language in the competing apps. There are certain scenarios when this is needed, for example, when a tourist visits a foreign country and needs to set the app language to English.
12. Help Center
During the research, many complained that the Help Center is ambiguously organized with other apps, and they cannot get the help they need quickly and easily.
Here, following Hick’s Law, the number of choices was minimized to 3 — I have a problem/question/suggestion.
Complex scenarios were broken into smaller steps to decrease the cognitive load. The entire process is progressive to avoid overwhelming users.
13. Empty States
Every app needs “empty states” to represent the moments when there is nothing to display.
The empty state screen consists of a neutral-colored illustration, a tagline, and in some scenarios, a CTA button.
Conclusion
And that’s pretty much it. This design succesfuly managed to eliminate the major pain points and create a clear, intuitive and understandable user experience.
Time will tell if users will enjoy this kind of approach.
Happy ordering!
Coming soon: The branding process
