As this post of 10 Reasons why Apps Conquer the Top of E-Commerce says, the e-commerce companies with apps have more income thanks to this mean. More and more customers are asking us for some information about the development of a delivery app to be able to provide their service at home and grow more in the market.
For this reason, we have decided to investigate this type of apps and analyze their functionality, structure, user experience and user interface. In this way, we will see what parts they have in common, which ones are the best and we would see how we could design the perfect delivery app.
The best applications in Spain are the following: Glovo, Deliveroo, Uber eats and Just eat. There are many more, but we will analyze these four. They find restaurants near your location (or near your delivery address introduced) and facilitate you their menu, the payment and an estimated time of delivery. Glovo, in addition to restaurants, offers home delivery of gifts, pharmacy, markets … anything. Also, I have included Telepizza to see an example of particular restaurant.
With these examples we can check three types of levels in delivery type apps:
1- They pick up / bring anything or food home (or another place).
2- They have associated restaurants so you can choose between them.
3- Franchises or restaurants with home delivery.
First, we will make a brief summary talking about some aspects from UX and UI, we will show the most relevant views analyzing the important features and the best highlight of each apps. Next, we will collect all the interesting points in common and finally, we will create the perfect delivery app joining and adding pieces as if it were a recipe. Let’s get started!
Glovo
Level: type 1. Delivery app with more than one million downloads and a rating of 3,9.
Glovo is a startup created in Barcelona in 2015. It is dedicated to buy, collect and delivery of orders in less than an hour through independent messengers known as “glovers”.
Summary: It has flat and geometric illustrations with a lot of colors and details. Bluish-green as corporate color, yellow icons and white backgrounds. Animations in tutorials and opening menus.
✔What’s cool about the delivery app: It allows you to select the item and bring it to the basket with a single click. From the list of products you can see what you have added to your orders and the quantity.
Home and drawer menu
– Menu with sections in circles forming a flower.
– Use of icons in full color and very detailed.
– Search field in navbar.
– Delivery location at the bottom.
– Drawer menu with Orders, Profile, Promotional code, Invite your friends, FAQ and Contact us.
List of restaurants
– Search for restaurants in navbar.
– Filter of type of food as tags with icons underneath.
– List of restaurants with professional image as background and info on semitransparent black mask. (Name of the restaurant, short description, delivery time and cost per shipment).
– The masks have a gradient on the top and bottom (maybe something old-fashioned, it gets a bit dirty the screen) We could improve it!.
Restaurant detail
– Header with image and search field to find dishes inside the restaurant.
– Card with some info about the restaurant: name, shipping cost and estimated time.
– List of dishes divided into sections such as Top sales, Starters, Salads, Meats, etc (headlines).
– List with name of the dish, description, price and a button to add immediately to the basket.
– Once clicked, the amount, the extras and the option to reduce or eliminate the dish appear.
– Button to access the basket has the summary of the selected dishes (quantity and price).
List of my basket
– Quantity, name, short description of the dish, price and buttons to add or remove units.
– Delivery address.
– Delivery time with a switch to activate “as soon as possible” or “for later”.
– Telephone contact.
– Price of products + delivery price + total.
– Button to finish the order (it is not activated until all fields are completed).
Just Eat
Level: type 2. Delivery app with more than one million downloads and a rating of 4,3.
It finds restaurants with home delivery near you, it shows you the menu, information, opinions and the possibility to make the order.
Summary: Numerous bright colors, predominantly red. Sans-serif typography but rounded and slightly cursive in the logo. In the app, use typography of the system in both platforms, simple design and native elements. Use of tabbar in iOS and drawer menu in Android.
✔The coolest thing about the delivery app: its restaurant filtering, the discounts highlighted in the list and the restaurant detail screen segmented with: menu, opinions and information (fairly ordered).
Home screen (iOS)
– Restaurant search (entering address or geolocation).
– Logo, slogan, corporate colors.
– Access to the last order.
– Tabbar with Restaurants, Orders and Settings.
Home screen (Android)
– Drawer menu showing the user info on the top.
– List with the features discussed in iOS + Help and Disconnect.
List of restaurants
– Search, filtered by type of food and sorting by relevant, valuation, shipping costs, minimum orders, new, etc below the navbar.
– Each restaurant shows the logo, postal code, name, rating, type of food, price range and deal if it has one.
– The image with the logo is quite small and there is also a lot of unused space on the right side of the cells. We could re-organize it and make it better, don’t you think?.
Restaurant detail
– Shopping cart with products added in the navbar.
– Header with essential information about the restaurant (logo, name, rating, postal code, time and image with the type of food)
– Segmented with Menu, Opinions and Info.
– List of the menu with the main sections. They take you to subsections or directly to the list of dishes (it forces you to take a step further, this will be avoided in our ideal app).
– Has a search bar for dishes.
List of selectable dishes
– Name of the category where you come from, description of the dish and price.
– Button to add it in each cell (interesting point).
– Chilli icon if the dish is spicy.
– You can add or remove dishes from the list (very practical).
– Too little difference between title, description and price (in terms of typography used).
My order
– Information about allergens in the navbar.
– Deals highlighted in the header.
– Total price in big + number of dishes + button “Order now”.
– List of dishes with name, price and edit option.
Uber Eats
Level: type 2. Delivery app with more than 10 million downloads and a rating of 4.2.
It offers the menu of nearby restaurants or searching by address and allows you to order at home and get special discounts using the app. It belongs to Uber.
Summary: Nice UI, quite simple and clean. Black and green corporate color, sans-sherif typography and high quality pictures. Use of tabbar with no text on both platforms.
✔The coolest thing about the delivery app: To be able to add a note, make a restaurant favourite from the list and track your order in real time.
Home
– Navbar with when and where.
– Horizontal scroll with featured restaurants such as “Popular near you” or “Less than 30 min”. The rest is on the list with vertical scroll.
– List of nearby restaurants (image, name, price range, favorite, estimated time and if it is open or not).
– Tabbar with Home, Search, My orders and Profile.
Search
– Search bar under “Search for restaurants”, why not take advantage of the navbar? also the text is repeated.
– Main categories in grid with professional darkened images and text on top.
– More categories (with the same grid).
Restaurant detail
– Header with image, share and make it favorite (has a gradient mask to show the icons).
– Essential information in a card: name, rating, type of food, price range and schedule.
– Menu divided into sections such as Recommendations, Starters, Salads, Tostas, etc:
– List of dishes with images, name, description and price. Access to the detail. There are restaurants that do not provide the images of the dishes.
– To select the plate you have to go to the detail (next screen).
Detail of the plate
– Image of the dish as header with share button.
– Name and description.
– Add extras (checkboxes).
– Price.
My orders
– Simple header without image, only name and estimated time.
– “Where” with address, map linked to google maps and possibility to add note.
– “When” (editable).
– List of my order with title, selected extras, quantity and price.
– Option to add a note, account and order edition at the end.
Deliveroo
Level: type 2. Delivery app with more than 1 million downloads and a rating of 4.2.
App very famous lately, it is British but is used throughout Europe, Australia, Dubai and Hong Kong. Offer the menu of nearby restaurants or search by address and allows you to order at home. It is known because they send you the order by bicycle.
Summary: UI and UX very simple, quite native. It uses aquamarine blue as a corporate color plus purple as a secondary color. Bold and geometric typography for the logo and for the app the source of the operating system of each platform. Simple icons, very minimalist, clean and easy to use. Use of tabbar in iOs and Drawer menu in Android.
✔The coolest thing about the delivery app: Selectors of “when” and “where” at the top, restaurants featured in the list with horizontal scroll, autocomplete and suggestions in search view
Tabbar
– Filtering goes on a floating button.
– Tabs with the three important sections.
– “Account” has the rest of the functionality.
List of restaurants
– Menu, search field and filtering by “When” and “Where” in the header.
– List of restaurants with large image, approximate delivery time, name of the restaurant, type of food, special diets and ratings.
Restaurant detail
– Very clean, neat and pleasant screen.
– Header with professional image and delivery time.
– Name, type of food, price range, description, share button, special diets.
Restaurant detail (scroll)
– When you scroll the image is dyed in turquoise and gets as a normal navbar with the name of the restaurant.
– Menu with sections and dishes with name, description and price. Tap on it and get it to your basket.
– Number of dishes chosen on the left side. It can not be subtracted or deleted, it should be done in the basket view. We could improve it!.
– Access to the basket with summary of the order (number of items and price) in the lower part of the screen on white box. Small button with “See basket”
Detail of the basket
– Time (editable).
– Add allergies.
– Description of your products (quantity, name of the dish, price).
– Suggestions with horizontal scroll.
– Shipping price, tip for the rider and total price at the bottom (sticky).
– End purchase in large button occupying the entire width of the screen (different from the “See basket”).
– Navbar with empty basket button.
Telepizza
Level: type 3. Delivery app with more than 1 million downloads and a rating of 2,7.
Delivery app to order pizzas of the franchise for pick up and delivery at home.
Summary: It has a very easy UX and the result is quite nice. The backgrounds that they use are pictures from their pizzas and use the corporate red, black and vibrant light green. They use drawer menu, for the types of food a home grid with photographs and titles. All typography used in the app has a fairly large size
✔What’s cool about the delivery app: The clean list of my orders and the good pictures in backgrounds and headers. In a way, you feel hungry as soon as you open the app and navigate over it.
Login (first screen)
– Background with a darkened image of pizza.
– Logo + drawer menu in a transparent navbar (both in iOS and Android).
– Two cards with Login / Register in one and “Make your order” in another.
First step (enter address)
– Background with darkened photography.
– Search field with autocomplete.
– Very large button “Continue” on white box.
Second step (enter when you want the order)
– White background.
– Two buttons with the time closest to the time of the order as primary and “For later” as secondary.
Categories Grid
– With white title and icons over the images.
– Shopping cart in navbar.
Category detail
– Header with image, transparent navbar title, slogan and shopping cart.
– List of pizzas with white background, image, name, price and stepper for choose the quantity.
– The number of selected pizzas appear at the bottom of the screen with a button “Add to the cart”.
My cart
– Background with image, above the orders in cards.
– Option to remove or add dishes with a stepper.
– Dropdown to see ingredients, supplements and sizes of the pizzas.
– Option to apply promotions and pay at the bottom of the screen.
What delivery apps have in common?
Well, once we have analyzed each delivery app, we can see what they have in common and get some conclusions that we have appreciated during the analysis. We will exclude the last app (Telepizza) because it has a simpler functionality:
Regarding the content, they all have a list of restaurants, search fiel, my profile and where / when selector to my order.
Everyone has a section of my cart that allows you to see your orders with the possibility of adding more dishes or eliminate them.
In the restaurant listings, they all have the name, type of food, price range and only some of them, such as address, distance, minimum order and offers (but not all of them).
About UI, we see that they use bright colors. Blue, green and red predominate.
In the headers they all show an image of the restaurant’s food.
The categories of the dishes are highlighted with headlines and all (except Glovo) do not have images of each of the dishes they offer, only the text description. This would force the clients to take professional pictures of every dish.
Quality images (photographer) used in listings and headers.
They all use sans-sherif fonts in their logos and a simple or system type for the app.
Conclusions
The conclusions that we can obtain from this analysis are the following:
✔The delivery apps with the best user experience are the ones that use tabbar like Uber Eats and Just eat. In this way you have the list of contents in one tab, my orders in another and profile in a different one. The navigation would be simpler and more linear than if it were in Side menu (you have to go back to change section).
✔The most attractive colors are bright and energetic colors.
✔Of course, it is necessary the content filtering for restaurants.
✔The applications that most appeal visually are those that use white backgrounds such as Deliveroo, Just eat and Uber eats and with large professional images.
✔Simple icons accompanying the labels reinforce the content and help the user. The type of client is quite varied (according to the restaurant, we would say 18-45 years old).
✔Being able to add a note, make a restaurant favourite from the list and autocomplete + search suggestionsimprove the UX.
✔It is quite attractive and useful the function of tracking your order in real time as in Uber Eats.
✔Something that breaks a bit the monotony of the listings, are the horizontal scrolls (for example with the featured restaurants).
✔The restaurants with discounts in the list stand out from the rest of the restaurants.
This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Strictly necessary cookies
Strictly Necessary Cookies must always be enabled so that we can save your cookie setting preferences. They are not considered as regulated cookies because they are necessary for the correct functioning of the website, so they are exempt from regulation.
If you disable this cookie we will not be able to save your preferences. This means that every time you visit this website you will have to activate or deactivate cookies again.
Third-party cookies
This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, or the most popular pages.
Leaving this cookie active allows us to improve our website.
Please enable strictly necessary cookies first so we can save your preferences!
