Project 5: Foodea (UX/UI)

Weeks 5 & 6 — UX/UI Project — Designing a Recipe App (English version)

Estelle Martini
6 min readOct 26, 2020

INTRODUCTION

During weeks 5 and 6 of the Bootcamp, we designed our first individual UX/UI project.

We had to find a problem about Wellness or Finance and our instructors had to validate it, in order to start. On Monday, I came with a problem related to padel, but my teachers did not validate it, so I had to find another problem quickly. Thanks to a Crazy Eights I had made for a challenge, I had an idea about wellness and health.

I first formulated the problem as follows:

When it comes to cooking, people have no inspiration, and they don’t make the most of what they have in the fridge.

UX PROCESS

Duration: 5 days

Empathize

The most important thing in order to start the project was to validate the problem through the research process. I then started using the Lean Survey Canvas. Thanks to that tool, I formulated the questions of my survey. I also started interviewing people to have more qualitative information. Thanks to the 50 answers of the survey and the 10 interviews I made, I get the following insights:

I also analyzed the competition thanks to a Competitive Analysis. I realized that there were already many applications on the market, but that the world of recipes was a complicated world and that there was a lot of room for improvement.

Define

On the second day, thanks to all the information gathered from the research, it was time to define the problem better. In order to do this, I did the Lean UX Canvas. This tool has been very useful for me to understand better in which direction the project was going, what the problem exactly was, who my users were, what the business opportunities were and what possible solutions my tool could provide.

Next, I created an Affinity Diagram to analyze all the answers from the research and from there I made the User persona to put myself in the shoes of my user. I also made an Empathy map to help me in the process.

Affinity Diagram & Empathy Map
User Persona
User Journey

To put myself in the situation of my user, Ana Marrero, I started writing the User journey. It was very helpful in detecting the problems I was facing and finding possible opportunities to develop my tool. From there, I have been able to elaborate the User scenario that allowed me to see how my tool could affect the day of my user.

Ideate

On Wednesday, we entered the ideation phase. Thanks to the previous tools, I did a brainstorming with all the ideas and information that I had collected. I also made a mindmap, to shape my ideas and thoughts. I love this exercise because it allows us to drop it all on a white page and start to shape the initial problem. It also helps us to see how our thinking evolves as we get information and we are making the tools. I also did a Crazy Eights again and I was able to compare with the first one I had done.

Brainstorming

Solution

From there, I began to have a clearer idea of ​​the solution: an application that allows users to have inspiration for cooking thanks to a lot of recipes, but above all an app that provides them recipes from ingredients that they have in the fridge or in the pantry. In addition, the application would have an organizer that allows users to plan their weekly recipes and thus worry less daily about what they will have to cook. Finally, a functionality for users to save their best recipes, but also add their own ones to get them all in one place.

Prototype & Test

With this possible solution in mind, I did a Card sorting to organize the information and be able to make the Sitemap of the App. Next, I drew the Low-fi, tested it, and then drew the Mid-fi. At the beginning, I had the idea of ​​a fridge that users would fill and from there be able to find recipes. However, by doing tests, I quickly realized that it would suppose an effort from the users and that it was not going to be possible. Also, it was a problem to record quantities. From there, I had to modify the Mid-fi prototype and consider another way to solve the problem. Here you can see the last version of the Mid-fi prototype.

Mid-Fi Prototype

UI PROCESS

Duration: 5 days

Week 6 was dedicated to the UI part. On Monday, I started making a moodboard to define the attributes of the brand and from there define the colors and typography. Also, I started to think of a name and a logo for my brand. Thanks to a survey, users defined the brand as: fresh, pleasant and alive.

From there, the colors came out. Green and orange were the principal colors of the moodboard and those colors correspond to the attributes of the brand. However, it was not easy to choose the exact colors because I wanted them to be accessible so I had to test them. Finally, I decided to use the SF Pro Display typeface because I wanted a clean, easy-to-read typeface, very suitable for a recipe app.

Moodboard, Brand Attributes & UI Kit

The following days, I made the Style tiles as well as the UI Kit, as I was testing with some Mid-fi screens to get an idea of ​​how it could look and I did tests with users to see if everything worked well.

Finally, I was short on time, so I started drawing the High-fi and preparing the keynote for the presentation on Friday.

Below, we can see the final prototype. Our user registers in the application, reaches the main page where the app indicates its main functionality with a tooltip. Then the user looks for a recipe with ingredients that she has at home. The app suggests ingredients but they can also be added manually. Finally, our user saves one of the recipes in the planner and decides to cook it later.

High-Fi Prototype

NEXT STEPS AND MONETIZATION

The next steps could be the creation of a shopping list based on a list of recipes selected by the user. With regard to monetization, it could be considered in different ways: a freemium model, with premium recipes within the app or offering services (such as cooking workshops) within the app.

LESSONS

This first individual project has been the biggest challenge so far. However, it has been the best way to test my learnings. I have learned a lot about UX and UI, and I can say now that I love both parts. At first, I had a lot of respect for the UI process because I doubted my abilities, but the tools have helped me a lot and little by little I have been doing everything. I am very happy with what I have done in just 10 days. I feel like the UXUI is getting into my veins and I can’t disconnect.

I hope you enjoyed my first individual UX/UI project and see you soon for the next one,

Estelle.

P.S. I’m waiting for your questions and I’m open to work. If you’re interested, drop me a line: e.martini26@gmail.com.

Puedes encontrar este artículo en español aquí:

https://e-martini26.medium.com/proyecto-5-foodea-ux-ui-4b35e7478f05

--

--