Tlf :
+34 680 28 05 85
Email :
diegovillarroelzaballos@gmail.com

Introducción.

Easy Food is a mobile application that allows diners of any restaurant to order and pay for their food directly from their mobile device. This project was divided into B2C side (view, order and pay) and B2B side (configure, receive and manage orders).

Role

Head of design

Date

April 1, 2019

Category

Real projects

TAGS

Mobile App, Agile, Startup

Value proposition.

Research.

Estudio de campo

In this first phase of the research is where I empathize with the user who frequents restaurants (in this case, Madrid center) and begin to understand their behavior and what needs they have when viewing the menu, ordering and paying.
In this field study I use a sample of 10 users and I focus on two methods to collect the information: direct observation and qualitative interviews.

Direct observation is done in their natural environment, i.e., a la carte and/or menu restaurants. Translated with www.DeepL.com/Translator (free version)

The output I get from this phase is the Persona who would use my product and its Journey Map.

Benchmark

This is a very important stage in projects because it shows us how others are currently doing the job.
The result of a good benchmark is not to copy the competition, but to thoroughly analyze every detail, learn and finally design an even better solution.

In the benchmark stage I like to take the opportunity to create comparative tables analyzing some usability heuristics. This would be an example of two important functionalities.

Sorting lists Deleting a product
Just Eat
2 clicks | 0 screens ✅
3 clicks | 2 screens ❌
Glovo
3 clicks | 1 modal ✅
1 click | 0 screens ✅
Deliveroo
4 clicks | 2 screens ❌
4 clicks | 1 screen ❌
Uber Eats
3 clicks | 0 screens ✅
4 clicks | 2 screens ❌

Usability testing

For usability testing I recruit 5 users, following the good practice of testing with 5 users from each segment that has been defined in the field study and interviews.

The usability test plan consists of 10 tasks, objectives, localization, business case, etc.

Decisiones de diseño.

Ordering restaurants

"I had a hard time figuring out how to order them, and now.... I don't remember what order I put them in."

Pablo R. (Deliveroo tester)

During my competitive analysis I find that the functionality of ordering restaurants involves too much work and intuition on the part of the user. In addition, several comments during user testing validate this hypothesis.

So my design decision is based on minimizing the user's cognitive friction by displaying the necessary information and optimizing heuristics.

Filtering restaurants

In my research I come across filters that do not accept multiple selection, that open unnecessary screens, that require more taps than they should and that are not visual enough.

As with the sorting functionality, I see a need to decrease cognitive friction by adding quick filtering functionality and optimizing heuristics.

Choosing what to eat

The process of filling the cart is undoubtedly the most frustrating for users in usability testing, even leading them to give up by closing the App (testing Uber Eats).

This is due to the tasks of editing products and navigating between categories.

These two tasks should be simple and intuitive, otherwise they are blocking the completion of the order.

Slide to confirm

In this App there are delicate actions that require more security than a confirmation button can provide, as it can be touched unintentionally.

Therefore I choose to implement a Slide Right to confirm such actions.

The following example shows the screens for placing the order and paying the bill.

Information architecture

In Easy Food the landing screen is the list of nearby restaurants, as this is where the other functionalities start from.

From here the user has access to all the side menu options, see all the restaurants filtered by type and view their menus to order food and finally pay the bill.

Sistema de diseño.

Colors

In this project, after a study of possible colors, I ended up choosing blue as the primary color, while the background of the App is in white.

In this case I decided to manage the colors as Material Design, so there is also the dark shade of blue.

Components

This is a crucial point to save future labor and gain consistency throughout the product.

The whole interface is studied following the laws of Gestalt psychology to ensure a correct visual perception by the users.

Typography

To achieve visual harmony in terms of shapes, I chose a rounded dry stick typeface.

In this case using three variants: Light, Regular and Bold.

Graphics

All graphics, both illustrations and color icons, carry a flat design to bring cleanliness to the interface.

Colored icons are used in areas where more visual information is required than that provided by a black/white icon.

Line icons are used in areas such as the side menu, bottom tabs, top menu, etc.

Animations

The animations follow the same visual pattern as the graphics, and are used at certain points in the App where some dynamism is required.

The illustrations are created in Adobe Illustrator and the animation process in Adobe After Effects.

*Some of them are a redesign of mine from animations used in UberEats.

Complete interface.

© 2021 No rights reserved.
Actually, share, steal (like a pro) and get inspiration as much as you want.
We live in a free world!