top of page
Traditional Mexican Food
Picture1.png

UX Design:
iFood

This is a fictional project designed to improve the user experience in the Brazilian app for food delivery named ”iFood”.

About the App: iFood is one of the most popular apps in Brazil, with menus of thousands of restaurants and in-app discounts.

 

As a competitive benefit, it usually accepts more payment methods than other apps in the same category. Also, the app qualifies the restaurants according to the users feedback and comments. The average score is based on the food quality and restaurant service.

The Project

The project is based on the double diamond design thinking process, which is divided into four distinct phases: Discover, Define, Develop and Deliver.

Double Diamond Design Proces

1. Discover

1.1 Research, Interviews and Shadowing:

The research was based on: on-line feedback from users on Google Play, notes from new users I showed the app to and also my own experience since I’m a heavy user.

All the feedback were gathered on April 2019, when the app didn't have all the features.

Most of the design complaints is about:

• The additional notes field is too short (50 characters);

• The communication between the customer and iFood or the restaurant is not efficient;

• The search filters don’t work properly;

• The information design is too confusing;

• There is no full description of the ingredients.

 

The issues were classified into the three categories, listed below.

• Sorting criteria, filters and search engines;

• Communications methods;

• Information architecture.

 

1.2 5Ws:

As the issues were classified into three categories, the 5Ws process (what, who, when, where and why) was applied in order to understand the causes and solve the problems more accurately, according to the following table.

5 w

1.3 Empathy Map:

 

An empathy map canvas was built, with the details about who is the user and their feelings, including information about what they see, listen and talk about the app.

Empathy Map

2. Define

2.1 Overview of the app:

Order food delivery, choosing between several options, categorized by cuisine (e.g. Japanese) or by a specific menu item (e.g. pizza).

Overview

.2 Journey Map:

The complete user journey map is described below.

Journey Map

2.3 Certainties, Assumptions & Questions Toolkit (CSD) and Guiding Criteria:

The Certainties, Assumptions & Questions Toolkit (CSD, Certezas, Suposições e Dúvidas, in Portuguese) is an agile method to start a new project. This toolkit helps identify false positive assumptions.

All the information are written in sticky notes and fixed to a canvas, divided into three columns: Certainties (verified information), Assumptions (hypotheses) and Questions (possibilities).

 

And through the Guiding Criteria design process, we have classified, in a spreadsheet, each detailed solution generated and its risks, so the team can decide which solutions should be prioritized.

 

With the information gathered in both methods, the project headed to solve issues on:

 

• Filters;

• Recommendations;

• Communications.

3. Develop

3.1 Archetype Wheel:

Using the Archetype Wheel as a reference, the following personas were built according to the iFood users:

Wheel
Personas

3.2 Ideation Sessions:

Through the ideation sessions process, the team considered the following solutions to be implemented in the app:

• Develop three new sessions in home screen, including recommended restaurants, discounts according to the last orders and favorite restaurants discounts, in order to make it more accurate to show what the user is looking for;

• Improve the filters and implement new categories;

• Develop the search engine using double quotes, so the user can search for a specific item composed by two or more words as written using double quotes around it;

• Improve the communications channel.

3.3 App Sketch: Home Screen

Develop three new sessions in home screen:

• Recommended restaurants: ”Top Restaurants for You”;

• Discounts according to the last orders: ”Best Offers”;

• Favorite restaurants discounts ”Your Favorite Ones”.

 

Below these sessions, there’s a ”Categories” strap and all the other restaurants as a list.

3

3.4 App Sketch: Search Engine

 

Improve the filters and implement new categories.

Once the user clicks on ”Search Restaurant or Cuisine” on top of the screen, it shows a list of categories and the keyboard at the same time. It also displays a tip to use quotation marks for specific items with 2 or more words.

4

3.5 App Sketch: Search Engine Filters

 

If the user type an item to search, they can also filter the results.

The filters are: Sort by (distance, rating, price, delivery time and delivery fee), Maximum price for delivery fee, Maximum delivery time, Categories and Payment Method.

5

3.6 App Sketch: Communications channel

 

If the user type an item to search, they can also filter the results.

The filters are: Sort by (distance, rating, price, delivery time and delivery fee), Maximum price for delivery fee, Maximum delivery time, Categories and Payment Method.

6

4. Deliver

4.1 Wireframe:

Wireframe

4.2 Prototype:

This prototype was built on Adobe XD, following the steps bellow.

1. Log in to the app

2. Browse restaurants in the home page

3. Browse through categories

4. Search for ”sushi”

5. Filter the results by ”Customer Rating”

6. Click on a restaurant to browse their menu

7. Select a meal to see the detailed information

8. Add the meal to the cart

9. Review and place the order

10. Track the order

11. Give feedback

Mockup 01
Mockup 02
Mockup 03
bottom of page