Eats for you — a case study

Homemade food delivered anywhere.

First fold of the eats for you website with top menu. The fold text is Family Food an app away. There is also a hand holding a smartphone with one of the app’s screens open. It also has buttons for google play and app store where the person can download the app.

Eats for You is a Brazilian initiative whose mission is to prepare and deliver quality meals to its customers, all with the homemade touch that everyone likes. Thus, through their cell phones, customers can place orders and receive their meals at the pre-defined address or pick up at the various food trucks located throughout the cities.

In this post, I will talk about the redesign process that I am proposing for the application in order to improve usability and user experience.

Motivation

It is very easy to talk about redesigning something, but when you want to do that, you should always have a motivation, that is, what led us to want to propose a redesign.

In my case, when I was allocated with my squad at a client located in Alphaville, we wanted to have lunch faster and more conveniently, instead of taking the bus and going to the Shopping Center. In addition, we found that the meal prices for Eats for You were more affordable. Finally, we wanted to have lunch knowing what to eat and where the food came from.

Eats for You food truck located in Alphaville. Orderers can pick up at this foodtruck located in the parking lot of a commercial building.

So, our squad decided to place orders and then after going to the food truck to take our orders and eat the meal, we discussed the experience we had.

Challenges

• Understand user difficulties when using the app.
• Improve the customer experience.
• Make the app to be recommended by more people.

Steps

To solve the challenge, I followed the following steps:

1. Guerrilla Usability Test with current version
2. Affinity Map
3. User Tasks
4. Prototyping
5. Prototype validation with users

Guerrilla Usability Test

The first four photos represent the foodtruck and people lining up to pick up their orders. The last two photos are users placing orders in the current Eats For You application. The author applied usability tests with these users to discover potential friction during the order flow. Both users are sitting at their workstations with the notebook open.

The target audience for this stage were people who:

• They work near the food truck.
• They like homemade food.
• They want convenience when ordering a lunch.
• They want affordable lunch.

And the proposed test scenarios were:

1. You want to have homemade food in a practical and quick way. A friend recommended Eats for You and you decide to place an order.
2. Now that you have placed the order, how would you go about checking its status and knowing when you can pick it up at the food truck?
3. Once you have tasted the food, it is interesting to evaluate the order, how would you do it?

Analysis and Synthesis

I set up an Affinity Map to better understand the points of greatest difficulty that users had when performing the tasks. In addition, the map provides us with valuable information to understand user behavior.

The image represents an affinity map. In it, there are four distinct groups: My Profile, Home, Make lunchbox order, List of orders and Aunt. Each group has several post-its that represent the friction encountered by users during the usability test.

So, I identified some points for improvement:

• Overall usability.
• How to show the information.
• Give feedback to the user.
• App interactions with the user (controls, notifications, etc.)
• Color palette contrast and no usage of complimentary colors.

As well as the following users difficulties to understand:

• Iconography and what it is for.
• How to start an order.
• If the photo of the lunch box corresponds to the real photo of the food.
• For which food truck the order was placed.
• Find meal reviews.

Then, I put together the Importance Map to identify which features should be worked on first and which ones could be left for later without negatively affecting the user experience. In this way, we are able to align the expectations of the business with those of the users.

The Importance Map contains two perpendicular axes. The vertical axis represents the importance for the business and the horizontal axis represents the importance for the user. A dashed cross is made in the middle of these Cartesian axes so that we can map in this kind of matrix two by two the frictions and desires raised by the users.

User Tasks

I listed three main tasks that users perform in the application. In each task, I identified the points of friction that I observed during the tests (highlighted in red).

Place an order

The image represents the flowchart of the current app when the user is going to place an order. The flowchart also punctuates the moments when there is friction with the use of the app and which results in a bad experience.

The following points of friction were encountered while the user wants to place a new order:

1A) Moment: The app presents the map with the nearest foodtruck.

1B) Attrition: The foodtruck icon doesn’t say much. It is necessary to have an on-screen instruction to say what the icon means and what the user can do.

2A) Moment: The app shows the distance and the time limit to place the order.

2B) Attrition: For each option it could have the price and the meal rating, so the user does not waste time having to enter the option to search for this information.

3A) Moment: The app presents the details of the meal.

3B) Friction: The photo of the food is not the one that actually matches. It is necessary to have real photos of the meal.

4A) Moment: The user chooses the payment method.

4B) Attrition: If the user has not yet registered any payment method, the app asks to register on the spot, but in the end there is an error and the user has to exit the "Place an Order" flow and go to the "Register Payment Method" screen.

View orders

The image represents the flowchart of the current app when the user goes to consult an order he made through the app. The flowchart also punctuates the moments when there is friction with the use of the app and which results in a bad experience.

The following points of friction were encountered while the user wants to view a placed order:

1A) Moment: The app lists the orders placed.

1B) Attrition: For each option, the user could check the amount paid in an order, so the user does not waste time having to enter each option to search for this information.

2A) Moment: The app presents the detailed information of the chosen order.

2B) Attrition: In the type of delivery, it would be interesting to have a reference to which food truck was chosen. In addition, it could show the picture of the meal for the user to relate, because only with the number the user can't remember what it was.

Rate an order

The image represents the flowchart of the current app when the user is going to evaluate an order made by the app. The flowchart also punctuates the moments when there is friction with the use of the app and which results in a bad experience.

1A) Moment: The app displays the order information.

1A) Attrition: There is a lot of information that comes from the previous screen. It would be interesting to leave only the essential information.

2A) Moment: User chooses the number of stars to give.

2B) Friction: The size of the rating stars could be larger.

3A) Moment: User makes some comments.

3B) Attrition: The typing field could be larger to make the user more comfortable when writing.

Sketching

Friction points identified. I started the sketching phase to then evolve them to high-def screens.

They are sketches of the main screens of the new app. Includes: registration and login screen, side menu, find a food truck, place an order, view orders, evaluate the order, view my profile, change the password and delete account. Each canvas was hand-drawn by the author with a black pen on white paper.

Hi-def screens

The image shows screens drawn in high-def. The tool used to design the screens was Adobe XD. The screens that were once scribbled, are now presented in high fidelity and with their variations according to their respective flows (register, login, place an order, consult order, evaluate order, etc.).

Results

The image represents usability test results for the current app and the new app. To place an order on the current app, two out of five people reported having a good experience, while for the new app all five people had a good experience. To Consult an order in the current app, two out of five people reported having a good experience, while for the new app four out of five people had a good experience. Finally, to evaluate an order on the current app, four out of five people reported having a good experience, while for the new app all five people had a good experience.

Takeaways

With this case study, I learned that it is very important to test solutions with users. In addition, when it comes to meals the most relevant information is the meal pictures, the order status and the ratings of a particular meal.

It's also worth noting that the field trip to test with users within the context of use, in this case the location and lunch time, provided me with more accurate and rich information.

And that’s it! I hope that this case study has helped you to understand a little more about the tools used in it and what results we can achieve with the adopted process.

It's worth remembering that this is the process I followed and it's not the only one that can be adopted. Each project is a project, it's up to us to understand its context and decide which process is the most appropriate and which tools we will use to extract the information we want in order to solve a problem.

Thank you! Until the next post!

PS.: You can check the process in slide show format and the comparisons of AS IS with TO BE at this link:

Click here to check the presentation slides

PPS.: This case study was carried out between April-2018 and May-2018 and I was able to document only December-2018.