Based in Madrid, Spain
Loading amazing data...
Introduction
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
Co-Founder & Head of Design
Date
April 01, 2019
Responsabilities
Developing the idea, building the product, going to market
Time line
12 months
Value proposition.
This first step consists in the creation of vector graphics and the organization of layers to work correctly in After Effects.
Research.
Field study
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.
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.
| App | 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.
See here the test plan
Design decisions.
Ordering restaurants
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.
“I had a hard time figuring out how to order them, and now…. I don’t remember what order I put them in.”
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
Design System.
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.
| Typestyle | Weight | Size | Line height |
|---|---|---|---|
|
Heading 1 |
700 |
24px |
36px |
|
Heading 2 |
700 |
20px |
30px |
|
Body 1 |
500 |
16px |
24px |
|
Body 2 |
500 |
14px |
20px |
|
… |
… |
… |
… |
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.
