Daily Menu Improviser: mix the ingredients and get a recipe! — Case study

Aranzazu del Castillo Figueruelo
8 min readJul 25, 2019

--

Brief

Food is an interesting topic. The majority of people like eating. However, cooking is a different story. It could be a hobby for some, and a nightmare for others (“what am I going to eat today?”).

The purpose of this project was to develop from scratch a native app for Android OS at a high-fidelity level in only 5 days. This exercise was part of the 4th week of a UX/UI Design Bootcamp in Ironhack Barcelona.

Being part of a Bootcamp like this is hard, especially if you are an adult, live alone, want to eat healthily and still save some money. Every evening I got home late, tired and starving. Every day I find myself playing with the same ingredients, trying to cook a decent dish for dinner. With this intense feeling around, also present in my colleagues, I came out with the idea of a menu planner app, that is, something that helps people to organize their menus during the week.

What kind of person needs a daily menu organizer?

Before jumping into solutions I wanted to validate my idea. I interviewed 7 people and I launched a one-question-survey on Instagram which was answered by 91 users. The later helped me to narrow the topic with a follow-up question.

One-single-question-survey on Instagram

From my interviews, I found out that, like me, people want to eat healthily and save money. For this main reason, they usually eat at home or, if they need to eat at work, they bring their own home-made food. They usually buy the same basic ingredients at the grocery shop and, eventually, they try to include new ones in their menus. Instead of planning the week in advance, in general, people prefer improvising with these basic ingredients.

Users’ explanations made me think that people rarely have a conscious organization for this issue, but I wanted to confirm this hypothesis with a bigger sample. To do so, I launched a one-question-survey on Instagram stories asking people if they organized their weekly menus or just improvised them. 56% of participants said that they improvise their menus, playing with almost the same ingredients while the other 44% prefer having a plan for this matter.

Although this is a very practical approach, the main problem mentioned by all my interviewees was the lack of variety in their menus, which can cause boredom. The reasons for people to stick in the same recipes were lack of creativity or time, tiredness, laziness, and difficulty to find new ingredients.

All this information made me move from a “menu planner” to a “daily menu improviser” app.

Affinity diagram with the research insights

Comparative and Competitive Analysis

The previous research was combined with a comparative and a competitive analysis with other apps with a similar purpose in the same or different fields. I chose two food planner apps (Food planner and Mealime) and two fitness apps (Runtastic and Endomomo) because my initial goal was to develop a “menu planner” app. The task under analysis was “to create a menu for the week” or “to create a workout for the week”. This tool helped me to understand the user flow and the important features and gave me a lot of insights for the ideation of solutions. Some of the most interesting features I took into consideration were:

  • An allergies and dislikes filter
  • A selection of the number of servings the user want to plan
  • Information about the level of difficulty and the time of preparation of the recipes.
  • A search box to look for specific ingredients.

User Persona and Problem Statement

In order to keep the focus on the target user, I developed the following user persona which was based on my research data. “Luisa” has been present during the whole design process, at the center of any design decision and has been especially useful at the end, when defining the main action of my app.

User persona

With “Luisa” in mind, I defined my problem statement as it follows:

“People need an external way to create different recipes with the ingredients they have at home because it’s difficult being creative and they feel bored fast”

Prototyping

To begin the prototyping phase I took my user persona and I tried to imagine Luisa arriving home very late and finding only two ingredients in her fridge.

“How could this app help Luisa?” “What is the essential task she needs to do?”

Once clarified this point, I wrote the user flow and then I sparked the ideation with the crazy 8s exercise, in which I sketched different versions of my screens until I finally made the first paper prototypes.

Overview

The following video shows how Luisa tries to find a recipe with eggplant and tuna. After the video, you’ll read about the flow of the app and the main challenges I faced during the design process.

The flow of the app goes as follows:

  • The home page is named “search” and it has a search box and direct access to the trending or the latest recipes.
  • From this page, people can look for the ingredients they have at home and add them to the search. They can see the number of recipes with each ingredient and their combination.
  • Once selected, they can move on to the “improvised menus” page, where they can find suggested menus. This list can be shorter or longer depending on the number of ingredients and can be filtered by time, difficulty, allergies and dislikes.
  • People can also go to “recipes” and add a new recipe to the database of this app. That way this recipe can be the result of any user search if it contains the same ingredients. Once added, the recipe is displayed in “recipes”
  • Finally, people can save their favorites recipes which are stored in “favorites”.

Prototype evolution

As usual, this process began with a paper prototype, progressed into a mid-fidelity one and ended as a high-fidelity prototype. All the changes were based on the testing sessions with the users. In this section, I’d like to show the most important changes and challenges I faced during this stage.

Paper and mid-fidelity prototype

First, there was a “lack of visibility of the system status” on some screens. People needed more information or feedback especially at two points of the flow: the “search” and the “filters”. To solve this, I decided to add tags in both sections and that was enough to help the users to understand what was going on.

On the left, on the “home” page, the problem was located on the search box. On the right, the “filter” page, the problem was people didn’t have feedback of their selections.

Second, there was a “lack of consistency” within the app, specifically, in the text underneath the icons. As some icons were unusual, I decided to add a name to all the icons.

On both: There was a lack of consistency in the icons. Some of them had a name underneath and others didn't. On the right image: Icons were rearranged according to people’s mental categories.

Third, there was a “mismatch between system and the real world”. This happened on two flow. The first one was the application of filters. People expected the process went in one direction -from left to right- and having to go back was weird for them. The second was on the tab bar. People expected “search” and “favorites” to be in the same category -common- and “recipes” and “profile” in another -personal-. To solve the former I added a confirmation button, which also alleviated the anxiety of not having a “save” button after making some decisions. To improve the latter, I rearranged the icons in the tab bar so they follow people’s mental categories.

In “filters”, people expected the process followed in one direction, from left to right.

High-fidelity prototype

My high-fidelity prototype still presented some troubles. My main challenges were trying to:

  1. …do an inclusive design. My font-size was very small and difficult to read.
  2. …play with the color palette, as it was transmitting the opposite emotions to the ones I wanted to evoke in my users. I wanted to transmit something “fresh, appealing, flexible, inspiring and time-saving” and people were feeling the template as “formal” and “old-style”.
  3. …clarify the main action of my app, because I had two Call To Action buttons that were in conflict on the home page.
The left image shows the old version of the prototype (old-style with two CTA’s in conflict) and the right image shows the last version (cleaner, more playful and with only one CTA).

Roadmap

Develop a whole app in only 5 days is complex, but it gives you a good idea of the things that could work in the future.

One of the things I didn’t have time to explore was the inclusion of a “profile” is this app. Testing my prototype I found out that people wanted to have a profile and include things like a picture, a name, preferences, and filters, personal goals or location. This is one of the areas I’d love to expand in the future.

Although I played with the color palette and the look and feel has improved from the previous versions, I’m still not happy with the result and I’d like to test different options with people to get the best combination and transmit what I want to with them.

Takeaways

In this project, I’ve had the opportunity to put in practice and consolidate many of the tools I’ve been learning since I started Ironhack 4 weeks ago. This toolbox includes research skills, ideation techniques, and prototyping skills. A 5-days-project force you to manage the time correctly and think strategically. I feel I’m improving in both, but I also need more practice.

Developing this new app from scratch has taught me the following things:

  1. Start the design thinking in “big sizes”, then you’ll have time to reduce it. I had some trouble with the font size and the use of the white space.
  2. Try and test different color palettes until you reach one that transmits your “goals” for the app. I found that my color palette wasn’t right one very late in the process and that made more difficult to implement the changes.
  3. Whenever you doubt, go back to the user persona and try to decide from her point of view. This helped me a lot when I had to decide the main action of my app because there were two conflicting CTAs.

Thank you for reading, I hope you liked the post! Drop me a line if you have any doubt or want to say hello :)

** After some weeks, I decided to come back to my design and try new combinations of colors to find a fresher style. Check the result in the following video :-)

New design

--

--