I like food! A lot… Especially when it’s delivered right in my doorway. During the pandemic, I treated delivery food as the only disconnection from my isolated world. It helped me realize that the outer world still existed in some way. My go-to way of ordering food at home is by an app called “Efood”, the leading food delivery company in Greece.
There were times that I didn’t pay much attention when I ordered something from Efood. This resulted often in unpleasant errors such as having food delivered at an unintended address. And if this happens at 3 a.m is a hell of a problem. Other errors had to do with the time and day of the delivery as long as the payment methods. That’s why I decided to figure out a solution to this kind of problem.
The problem statement
How could we prevent errors when ordering from “Efood” delivery app?
Important note: I do not work for Efood neither I am associated with it. I absolutely love using the app and I made this personal project to explore possible solutions to the issue I had.
I chose the Error Prevention heuristic among Jakob Nielsen’s ten heuristic principles to assess the potential flaws of the app.
The best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
I selected the specific heuristic based on the struggles I had while using the app. Heuristics are a broad rule of thumb and not specific guidelines. I decided to examine and evaluate the whole order and check-out flow, to identify some gaps and opportunities.
I found that:
i. type of pick-up, ii. address, iii. payment method, iv. order details, v. sum
There were presented for the first time to the user and all at once. If you are a recurring user the information of address, payment method, and pick-up method is implemented automatically without any awareness from the user. In particular, the address is determined automatically by your current location as the system picks the nearest one (from your saved ones). The issue is that many times I order something to be delivered to my home when I’m at work or at the gym. This often results in incorrect address input.
2. In particular, when you order from a supermarket the system automatically picks up the next available delivery day and time and the info is placed on the top right of the screen inside a small rectangle. I have many times confirmed an order to a supermarket without checking the delivery time. After confirming the order I realized that I won’t be home during the delivery time, so I had to call the store and change it for another. Also, it is a bit hard to find the contact info of a store when you‘ve gone into some steps of the order flow.
3. The buttons to proceed from one screen to another until the final one are identical as for the color and position. This makes it relatively easy to click unconsciously the final button if we consider the seamless and fast transitions between the screens.
I then went to Google Play Store to review the comments of the app and identify any overlap with my heuristic evaluation. The main issue I discovered was about the delivery time. Users are informed of it only after they submit their order. So they are unable to cancel it if the delivery time is too long. This violates the 3rd heuristic principle which is User control and freedom. That is, if the users are unhappy with something they ordered or made an error, there is no way to cancel it through the app. Instead, they have to go through an extended process to change the unwanted action. This creates a major pain point as the users would cancel the order if they knew beforehand.
The fun part begins! I gathered my findings and tried to focus my effort on figuring out ways to improve the last steps of the order flow, as I thought those were the most crucial. I didn’t want to stick to an idea early on, so I came up with three (3) basic concepts.
Users want to have enough options to handle all of their special needs, and to accomplish them in a simple and intuitive way. Progressive disclosure is one of the best ways to satisfy both of these conflicting requirements. It is an interaction design pattern that sequences information and actions across several screens.
I thought of splitting the final screen before order submission. The first one would include the order information (quantity, type of food, sum). Then, the user would proceed to the next screen where he would select the delivery information. Finally, the user would land on a final screen where all the info would be gathered. I thought, also, of changing the submission button to a different color (green) to inform the user visually that this button will ignite a diffferent action than the previous ones.
At the second one, I tried to be the least invasive I could. That is, I didn’t expand the flow with more screens but I thought of having the users select (not input) the 3 most crucial delivery info (address, time, payment method). This would make them more aware of them. I also changed the position of two buttons, delivery selection, and coupon input. I placed the delivery selection button next to the payment method and the coupon button took its place on the upper right section. This way, I grouped the crucial info together.
I thought to leave the automated data inputs as is, but to add a confirmation screen where users will see beforehand the estimated delivery time (serious pain point) as long as the other delivery info. I thought also of changing the final submission button’s color and position to prevent misclicks. I understand that this solution could contradict the app’s KPIs. In particular, I think that the most critical is the conversion rate. This solution is very possible to reduce it, as many users will be deterred from ordering when they will see that the delivery will be delayed a lot. Despite that, I think the user’s satisfaction will take a boost as long as the credibility through the transparency it will provide.
Now, I had to choose one concept to go on to the high fidelity state. So, I needed a way to prioritize them. I thought of two basic criteria to assess the effectiveness of each concept.
I assumed that Concept #3 matches best the above criteria as it demands subtly the user’s attention before they submit their order, it reminds them of the critical delivery info (address, time, payment method), so it should minimize the potential errors. What is more, it doesn’t disrupt the current order flow but it only adds a screen before order submission.
The Figma engines were running and now I explored 3 different directions to implement Concept #3.
This direction was the one I thought initially. I included a “Back” button at the final screen. I found it a little plain, so I wanted to explore further.
Then I decided to remove the “Back” button having in mind the conversion rate. The design nonetheless felt dull again.
With this direction, I decided to add the store’s image and logo to make the screen more interesting and remind the user of it as well. I retained the absence ao the “Back” button.
Check the Figma Prototype on your own HERE
This was a fun exploration. I understood once again how crucial is the overall UX of a Product and what is the impact of even the smallest tweaks. I think that as a Product Designer it is super important to take into serious consideration the goals the business has set. You could easily design the experience to be “beautiful” or “easy”, but you should keep in mind what the business is trying to achieve. Finally, I am so amazed that a small frustration of mine could generate a simple problem statement that had so much depth.
