What shall we cook today?

Case Study: My Recipe App

My Recipe App

I created this case study as a part of the Google professional certificate course User Experience Design

 

Recipe organizer app for my favorite restaurant

I love food, and I love cooking! As a working mother of two teenagers, I organize over 700 meals a year! This isn't always fun and I frequently seek for little helpers to simplify planning and cooking meals. With this task for the UX design course I hope to find out something new for my daily challenge. Let's go!

My favorite restaurant


Landhotel Hirschen in Erlinsbach is my favorite restaurant nearby Aarau. They serve gourmet cuisine with regional products, organize cooking lessons for kids, and offer take away food. In order to increase customer loyalty, Landhotel Hirschen wants to create a recipe app, focusing on families.


In Switzerland kids return home for lunch, so parents need to organize food for lunch and dinner. This is a great efford. Landhotel Hirschen wants to help parents simplify planning, organizing and cooking healthy food for the family, as well as book a table at their restaurant and order take away food.

My role

As a UX designer, I created an app from conception to delivery, in the timespan of May to September 2021

Responsibilities
  • User Research
  • Digital wireframing
  • Low and high-fidelity prototyping
  • Conducting usability studies
  • Accounting for accessibility
  • Learnings and next steps

User research: Interviews

To understand needs and behaviors, I conducted 6 qualitative interviews with parents between 35-50 years, both males and femals, living around the city of Aarau. They all have at least two children, that return home for lunch.

Parents all work minimum part-time and care for healthy food. Duration of the interviews: 20 minutes per person

Parent's behavior and pain points

I was surprised to learn that most participants do not plan their meals long ahead. They determin the dishes after shopping groceries, shortly before they want to eat.

Seasonal vegetables and discounts are their inspiration for buying food. They mostly cook the same 10 menus the family likes. They appreciate vegetarian options

Improvising

At first, parents shop for groceries to consider the best fresh food. When cooking, they improvise a meal with the available ingredients. There is no recipe at hand to match the content of the fridge


Organisation

Parents store their recipes in folders, cookbooks and in different online browsers. This makes it hard to find good recipes again and editing online recipes is impossible

Time

If caregivers, or kids prepare meals, they need a recipe to cook a planned dish. Many parents cook by heart and they have to write down the recipes first. This is very time consuming

Solutions for pain points

Searchbar

Provide a searchbar to find recipes by ingredients

Save recipes

Type in own recipes, or copy an online recipe. Customize recipe and save it to your collections

Share meal plan and recipe

Share meal plan and/or recipes with family members or caregivers

Persona Olga

Picturing Olga helps me identify useful features for the app

Problem Statement

Olga is a full-time working single mother who needs a quick and handy solution to plan, organize and share recipes, because she has no time to find or write down recipes for her sons to cook

Learn from others

With Olga's problem statement in mind, I compared some apps in Switzerland.
I picked Whisk, Bring!, FOOBY and Kochen, because they have different backgrounds.

Whisk works best for her needs and I take some of its structure. FOOBY gives me inspiration for design

Whisk

+++ weekly meal plan
+++ shopping list with pictures
+++ inspiration for cooking
+++ linked and international recipes
+++ modification of recipes
+++ own recipes and collection

Bring

+++ local shop offerings
+++ own recipes and collection

Fooby

+++ seasonal inspiration
+++ handy cooking mode
+++ recipes for kids

Kochen

+++ recipe finder for 3 ingredients
+++ seasonal inspiration
+++ collections after topics

Start Design

With the outline of the userflow I created storyboards, to understand the different touchpoints of the app. With wireframing I connected the different frames to a low-fidelity prototype that schows all crucial functions.

Storyboard: Olga's Day

Storyboards helped me understand the daily challenges of Olga and how my app could be useful

Digital Wireframing

At this point I became aware of how many screens were necessary, also for all the additional tasks I wanted to include. Every single wire needs to be defined, also with its animation

Low-Fidelity Prototype

Click here to test this low-fidelity protoype in Figma. Discover additional features like a shopping list, take away, booking a table and saving an own recipe

 
find a recipe
assign it to the mealplan
share mealplan with others

Usability Study: Did it work?

I have conducted a moderated usability study with 5 participants between 35 and 50 years. During 20 minutes I observed their behavior and recorded what they said

Findings and Refining - before and after

User want a clearer icon to indicate sharing option

“I did not recognize the share button on the first sight, but it worked well, once I knew where it was.” (Participant A)
Users want more options for a more individual user flow.

“I want to have options, what to do next.” (Participant D)
User want a searchbar in all recipe collections

“I want to search ingredients within the suggested collection to find out, what to cook with the vegetables left over in my fridge.” (Participant B)

Refining design on main task

With refining the design I realized, that I must focus on the main user flow. I didn't refine the shopping list, saving a new recipe, take away and booking a table at the restaurant. Due to my time budget, I must limit my original scope for this project. Following are some mockups

Font & Colors

  • Legibility was no. 1 criteria for the choice of the font Roboto. For the hyrachies I used different sizes, bold and capital letters.
  • The color green works well with food, it stands for healthy and freshness. I kept it simple with only one, softgreen color and a softed tone of it.

Elements and rollovers

To show interactive buttons I decided to work with a rollover effect, using strokes, color change, and sometimes shadows.

High-fidelity prototype

Main user flow for finding a recipe, assigning it to the meal plan and sharing it with somone else

Test My Recipe App now!

Click here to open Figma, where you can test my high-fidelity prototype.

 
Find a recipe with broccoli (orechiette with broccoli)
Assign it to the weekly meal plan for dinner on Thursday
Share the weekly plan with Dayle

Findings of
usability test with high-fidelity prototype

  1. Users managed well to navigate, search and appoint items to a plan
  2. Some user appreciated listening instruction for meal preparation, this shows the importance of including audio

Considering accessability

Symbols, contrast and audio help people with visual impairment and sight disabilities

Samples

Symbols and text

Use of symbols as an visual help to better understand the meaning of buttons for people with difficulty reading.

Contrast

Few colors, high contrast and shadows in stoke make sure, people with visual impairment can still distinguisch elements.

Audio

Audio for listening the steps of meal preparation for people with sight disability or users, who prefer listening instead of reading while cooking.


My learnings of this project

”It was interesting to question my habit of organizing meals. The interview and testing helped me discover new, more effective ways of dealing with meal planning. For now, I am using the app Whisk, which still could be improved. I am ready to share my insights with their developers, if they ask me.”

 
Interviews are the best way to find out about a user group's needs. It is worth the effort
A stylesheet in Figma allows quick changes in design
Stay focussed on the main task to avoid extensive ideas

Next steps with the app

Add more features

Refine two more features to complete the original scope of the app: Save recipe by taking a picture and the shopping list
Conduct usability study

Test the new features with a usability study and correct what needs to be improved
Code the app

Hand the design over to the engeneering department, to code the app and make it work on mobile phones

Thank you!

For more details about this project, please contact me.

let's connect

 © 2022 Rebecca Roth   Impressum/Datenschutz

home           about          contact