Ordering food is becoming a popular activity. Delivery apps, like Glovo, Deliveroo or Just Eat, are growing in number and represent an opportunity for restaurants to increase their visibility.
Many people order food by themselves, but order food in a group is also a good option if you don’t want to cook or don’t have enough time. When people don’t have cash, paying the bill can be a nightmare, especially for the one who is ordering with the app.
The purpose of this 5-days project was to add a feature to the well-known delivery app called Glovo. The feature tried to solve the previous situation by adding an option to split the payment. It was developed during my 4th week of the UX/UI Design Bootcamp in Ironhack Barcelona.
Our challenges during this project were: improving our prototyping skills, implementing animations in the prototype, evaluating the app using heuristics and putting the user in the center of every design decision.
How well is the app Glovo working?
This process started with a careful analysis of the app Glovo. We used heuristics and we focused on the task “Order sushi to Ironhack to 13:00”. We took into consideration the following criteria: findability, accessibility, clarity, communication, usefulness, credibility, controllability, value, learnability and delightfulness. The app punctuation was over 3 in all of them (scale from 0–5), except in the last one (delightfulness). We found out some problems of findability, accessibility, clarity and communication and all of them were interconnected. Next, you can find only some of the issues we identified:
- It is very difficult to change the language of the app.
- There is no information about the meaning of some icons, which can be confusing.
- There is no direct telephone to contact the restaurants, and the Glovo riders can only be contacted after doing the order.
- There is a lack of control on the payment page, there is no information about the number of steps it includes and what is happening when you press “confirmation”.
- There is a lack of consistency between the native app and the web. For example, the text inside the buttons is different between them.
This analysis gave us a better understanding of the flow of the app and a good sense of the theme too.
Hungry people ordering food together
To understand better the context and the target user, we developed a short survey which was answered by 45 users. It was complemented by a semi-structured interview that allowed us to dig deeper into the problem. We interviewed a total of 5 users.
What did we learn from the surveys?
- 60% of people order food with the same group of people.
- 37,8% of people order food 1–3 times every 4 months.
- 71,1% of people are used to ordering food with delivery apps.
- 84,4% prefer the division of the food at the end of the process, instead of having separate baskets.
- 48,9% prefer that people pay for their stuff instead of dividing the bill equally.
- Opinions about leaving or not a tip are varied.
On the other side, some of the things we found out in the interviews were that:
- People order food together for special events, and not as a frequent activity.
- Culture determines if the people feel more comfortable splitting the bill equally or not (e.g. in France, it seems rude while in Spain is normal).
- People confirmed that there was a real need by explaining problematic situations in which people never paid back the money.
These are some interesting quotes we extracted from the interviews:
“I love going out and discovering new places, but sometimes it’s difficult because I don’t have time”
“Every time we play a football match, we order food for all the team”
“Almost all my friends have a profile in different delivery food apps”
“When each person wants to pay only his food, it’s annoying and a waste of time because we have to calculate it mentally”
The research enabled us to know the target users and their main problems, which can be summarized in the following problem statement:
“People who order food in a group need an easy way to split the bill to avoid complex calculations and problems of change”
To represent our users and design the new feature with their needs and goals in mind we created Juan López, a 42 years-old-man with a strong passion for football.
This person represents well our users’ interests and his story inspired us to introduce the feature with a meaningful context.
Juan López & his friends ordering food together
If you wonder how Juan interacts with the new feature of Glovo you can see it in the next video which shows the final prototype of the product:
From a paper to a digital product
This final product was the result of days of testing and iterations, but as always, the process started with a paper prototype.
What were the two most important changes after the users’ feedback?
1.How to assign food to each person. We explored 3 different patterns and we chose the last one because it was easier and simpler for the users:
- Drag and drop the food item to each person profile.
- Click on the person profile and then, click on the food the person has ordered.
- List of items with an “add a person” icon. Once you select the item, you have to add the person, and not the other way around. This last option allowed the users to share the bill of one specific food item (e.g. one pizza between two), which was something that was mentioned during the interviews.
2. How the “confirmation” page looks like. This screen didn’t change a lot, but the introduction of colors, information and elements like “!” helped the users to understand the content. The final version included the same information but displayed in rows instead of columns. This last change solved the problem of having many people in the same order.
As it was mentioned in the beginning, one of the challenges of this project was the introduction of animations. In the following video you can see one of them:
Color palette and accessibility
This project didn’t start from scratch, but it aimed to introduce a new feature within an existent app -Glovo. This is a common situation for UX/UI designers and implies a good understanding of the style guide of the original design. The main colors of Glovo are yellow, green and white, which were respected in our first high-fidelity prototype.
However, these colors were problematic in some points of the app. According to the Contrast Checker tool, our design wasn’t accessible, and this was something we wanted to correct.
This situation led us to try different variations of the same color palette. In the final version, the predominant color was white and the second one was green. This change overcame the accessibility problems, but it also provided more “credibility” to the app.
This project was part of our training as UX/UI Designers in Ironhack. It was a key exercise for us because it allowed us to work on a very common task in the real world (add a feature to an existent design). Starting with an already created product leaves you energy and space to focus, learn and train different skills. This project was interesting for us because we learned and practice how to perform a heuristic evaluation, evaluate and correct the accessibility issues and develop animations.
We also learned how important is to adapt the app and business to cultural differences. As I explained in the research part, splitting the bill equally wasn’t acceptable in some cultures, while it was normal in others.
UX designers and developers have to work hand to hand in the process of designing a product. Some of our testers were developers and they gave us valuable feedback to design and improve the product.
Finally, we tried many different versions of the same design and it was hard in the beginning to accept this. The takeaway for us was
“the first prototype is never the final one, accept you’ll have to get rid of the majority of things as soon as possible”.
Thank you Ironhack Barcelona for this great and meaningful project and thank you reader for keeping your attention until the end :-) Feel free to drop a line if you have a comment or questions.