UX/UI, Animation, Art Direction
FoodMix is a cooking app that helps you to decide what to cook. Select ingredients you want to eat and get interesting recipes.
Once upon a time my lovely wife and I were deciding what to have for dinner. We had recently eaten this, tried that and we just had no ideas what to cook. So I wondered — if there was an app that could advise me something. For example, an app that allows you to select ingredients you have in your fridge and get some interesting recipes. Let the app not me think about what to cook!
My principle is “Start design with Why” to clearly understand why users need this app. I should know what the users’ goals are like and how they achieve them. The wrong way is to ask them directly what they need, the right way is to observe and ask what goals they are trying to achieve and how they are going to do this.
I set up interviews’ objectives, target audience, and questions before starting the interviews.
I selected to interview different types of users — both male and female, with different level of experience in cooking, people with different familiarity with technologies, people who cook often and occasionally.
I conducted several user interviews, asking participants how often they find themselves in this similar situation and how they figure it out what to cook.
I used an affinity mapping method to find patterns in my observations and group them. It helped me to get interesting information about my target users.
I analyzed the research results and noticed users similar behavior and pain points.
I concentrated on 2 main types of target users — people who work hard and don’t have enough time to cook and people who are on a diet, those who stick to fasting and vegetarians who use a definite set of products for cooking. This app will not be helpful for experienced cookers who plan their menu in advance and know what to cook. Based on my research, I created primary and secondary personas to define who may be and may not be my target user.
I don’t really like using user stories, I prefer job stories. You may say — “Personas and Job Stories? Are you crazy?” In my opinion, both tools are useful and can be used together. Personas help you to understand whom you create this product for. Job stories help you concentrate on their needs and the context of use. As I’ve defined the main users’ needs, now I can create job stories:
The common way to decide what to cook is to search for a recipe and then create a list of ingredients to buy them in a grocery. My idea was to combine this method with the reversed one — start with selecting ingredients you have and then get related recipes.
Based on my observations and insights, I created a list of features that can help users in their needs.
I used a red route approach to outline critical features enacted by the key personas. It helped me to concentrate on the main features of the app that users really need.
I asked the participant to prioritize these features by the frequency of use and importance. I insert the results into a table according to the frequency of use and number of people who use them. Mapping out the red routes helped me to determine what features are the most important for users.
So I’ve got 3 main functions that are crucial for users:
Such cool features (in my opinion) as Connect my fridge to automatically add my ingredients to the app or Scan ingredients via smartphone were on the last place. It was a great example of how important is to discover real users needs instead of assuming them.
The way how the content is organized is as important as the content itself. In my case user’s success with finding an interesting recipe depends on a fast and convenient search.
The basic user flow is very simple — you start with searching for ingredients or recipes and then you get a list of recipes where you can select the best one for you.
How can we help users to search for numerous ingredients/recipes and decrease their cognitive load? According to the LATCH method information can be organized in 5 ways — by Location, Alphabet, Time, Category and Hierarchy. In our case, we can organize ingredients by Categories (Meat, Fish, Vegetables, Fruits) and Hierarchy — the most popular and widely used ingredients to go first on the list. Users can also use the search bar with autosuggestion and autocomplete for fast and relevant search.
Recipes also can be grouped by Categories (Breakfast, Dinner, Salads, Dessert, Easy dishes etc) and Hierarchy (by rating, time of cooking).
Recipes in the search results list can be sorted by Time for Cooking, Rating, Calories and Categories.
I created a paper prototype to test my design ideas with users. It was my first experience with paper prototyping and I was amazed by its benefits. It’s a great tool to test navigation and workflow, create a rough layout and quickly test your ideas.
After creating the paper prototype, I conducted a user testing to validate my ideas. I asked the participant the next task — “Imagine that you came back late from your work. You opened the fridge and saw that there are only chicken breasts, mushrooms, and onion. You have a cooking app on your smartphone, so how would you decide what to cook using this app?”
I asked the participant to speak aloud while performing the task. All my observation I noted on the stickers — each observation per sticker. Then I used the affinity mapping method to find similarities between my observations and to group them.
I prioritized my findings according to their importance and defined 3 top issues I had to solve.
After analyses the test results, I used MockingBot to create a new iteration of the prototype including my findings. This app has an awesome feature — it allows you to view the links between screens. It’s a good way to improve the navigation map of your product.
After testing my prototype, I’ve started working on visual part of this app. I put in mind all my findings and testing results to create light and clean UI that will not distract users from their goals.
The main screen provides the user clear direction where to start. Most popular categories guide the user and give them assumptions.
You can decide what to cook starting with ingredients. Combine ingredients you have in your fridge and see what you can cook with them.
Search for recipes quickly and easily. Get relevant search results using autocomplete and auto suggestions.