Home Cook

Creating an end-to-end iOS app for a cooking/recipe app to help home cooks discover more diverse cuisines
 
Project Date: November 2020
Company: Home Cook
My Role: Research, personas, sitemapping, task/user flows, sketching, wireframing, prototyping, user testing
Team: Product Manager, Group Crit Peers
Landscape.png
X.png
X2.png

Overview

Project Background

The idea of Home Cook came to me during quarantine where I found myself cooking a lot at home, and looking for more variety to add to my weekly meals. I wanted to try different cuisines, and cook meals that I enjoyed eating growing up, but had immense trouble finding recipes that stood up to my expectations, often trying (and mostly failing) to read through Chinese blogs to recreate the flavors I knew and craved. 

Home Cook was born out of the need for more diversity in the western food publication world. Written by immigrants, Home Cook offers that authentic, home cooking experience that people seek when they are experiencing and learning about other cultures through food.

The Challenge

How might we differentiate Home Cook from other competitors in the market from a user experience point of view?

Objectives

Design an end-to-end iOS app that allows users to bookmark, explore, organize groceries and share recipes with one another.

Process

Process

For this project, I decided to follow IDEO’s Human-Centered Design Thinking process to ensure that my design decisions are backed by research and user feedback.

 

Empathize

Why

Using various research methods to understand and empathize with the user's needs, frustrations, and goals

How
  • Research Ramp-Up: Secondary Research & Competitive Analyses, Provisional Personas

  • 4 Interviews (1 hr per interview)

Competitive Analysis & Provisional Personas

To begin research for Home Cook, it was important to understand the app's direct competitors in order to get a good understanding of their differences what solutions each app solves for users.

 

Direct Competitor 1: New York Times Cooking

Differentiator: NYT's trusted prestigious roster of chefs and critics, very easy to use and straightforward

Weakness: It requires a subscription to access the app, which creates a barrier to entry for less experienced cooks who might not see the value in paying for a cooking app.

Direct Competitor 2: SideChef

Differentiator: Features recipes from culinary influencers (bloggers, writers & chefs), users can easily search by ingredients, plan their meals with the native meal plan feature, order groceries with the Walmart and Amazonfresh integration, and set up appliances that work with SideChef. Weakness: User reviews reveal that their search/filter function is faulty, the app is not optimized for iPad (which many home cooks prefer to use), and showing too many "premium" recipes that the user has to pay for.

Direct Competitor 3: Kitchen Stories

Differentiator: Kitchen Stories has many nifty features that make it stand out - great how-to photo and video guides, serving size converter, built-in timer, and a social community of contributors.

Weakness: It lacks diverse cuisines and a way for people to discover them.

 

On top of direct competitors, I found two indirect competitors worth looking at. Tasty's app offers short-form videos that are catered towards beginner cooks and often times people are sharing their cultures through the food they are cooking. The app is addictive, educational, and fun to browse even if you aren't actually planning to cook. Cookpad is entirely user-generated. Its design pattern is similar to Instagram where you can create and share recipes and track your recipes' performance. However, because there is no quality control or staff reviewing submissions, the app becomes a messy free-for-all space with low quality photos and incomplete recipe instructions. The result is a very low engagement app.

Research Ramp-Up Findings

Taking a look at Home Cook's direct and indirect competitors, I had formed a general idea of what to keep in mind when designing for Home Cook.

What I learned:

  • In order to increase engagement, content must be high quality, tried and trusted. For Home Cook to be a successful social sharing cooking app, there needs to be a way to maintain the quality of content, as well as a way for people to submit reviews

  • Home Cook needs to make it easy for users to actually cook - little features like preventing users from having to scroll back and forth, being able to adjust servings, and built-in timers provide high user value

  • Home Cook needs to make it easy for users to search and filter according to their personal tastes and preferences

  • Home Cook needs to be inspiring - providing visually appealing photos, UI and content that can excite people to cook a recipe for their next meal

Interviews

After understanding competitors in the industry, it was time to dig into the habits of users and empathize with them through 1-on-1 interviews, each one lasting up to 1 hour. I interviewed 4 users, 3 of which I did over video call and and 1 in person. All users occasionally cook at home and use recipes.

To prepare for interviews, I drafted up a script that included an introduction to the project I'm working on, a screening question for whether or not they cook from recipes, followed by specific questions on how they prepare to cook, what resources they turn to, and if they use any apps/sites. I transcribed each interview and had 14 pages of interview material to work with.

Interviews.png
Interview Findings

To summarize my interview findings, I organized notes from my 14 page interviews transcript into a brief 2-page debrief, extracting insights and patterns from each question.

Number of Participants: 4

Ethnicity: Pakistani/Indian, Cantonese, Taiwanese

Age Range: 24-25

Location: Hamptons, NYC, Hong Kong

Insight 1: How often individuals cook depends on where they live and how easy it is to access the food they want to eat (i.e. an individual who used to live in London would eat out more often versus cooking at home a lot more now in Hong Kong because he lives in the mountains).

Insight 2: The biggest challenge for interviewees across the board is having access to ingredients that are hard to find and/or substitute to make the dish they want to make.

Insight 3: Every interviewee said that the ingredients they have on hand influences what they want to cook, therefore they like to search for recipes by ingredients

Insight 4: When it came to trusting recipes, every participant mentioned taking extra care to do the research to make sure that the recipe was authentic and that the end results closely resembled what they knew a dish to be.

"I will look for the worst quality websites because it's usually Indian aunties that are on these obscure blogs posting their recipes. I can only trust an Indian recipe if it's from an Indian auntie."

– Saher

"If I'm looking for a Chinese recipe, I'll just search up the dish in its Chinese name and read those blogs in Chinese."

– Annie

Insight 5: Every participant mentioned calling their mom for recipes to dishes they want to cook, but said that because the instructions are so narrative and without precise measurements, it's hard to get it exactly right. This causes participants to improvise or do further research.

"When you ask an Indian person for a recipe, you get smidgens of potential paragraphs. You don’t get how much of something to put in, so much of it is passed down by word of mouth and practice, and is developed to your taste. "

– Saher

 

Define

Why

To leverage all previous research to define high level goals and identify priorities for Home Cook's features.

How
  • User Persona

  • Feature Roadmap

User Persona

My interview debrief revealed two distinct types of home cooks - the experienced home cook and the not-that-serious home cook. 

Celine is known among her friends as a great cook. Growing up in a family that valued cooking and eating together, Celine developed great interest in learning about other cultures through food. Her goal is to share her love of food and cooking with others and to absorb as much culture through food-related knowledge as she can.

Screen Shot 2020-11-17 at 10.54.17 AM.pn

Jennifer is a big foodie, she loves getting takeout, and is on a mission to find the best Taiwanese restaurants in the city. When she can't find what she's looking for, she turns to cooking at home to recreate the dish she craves. Though she isn't an experienced cook by any measure, Jennifer is very motivated to improve her skills.

Screen Shot 2020-11-17 at 10.53.57 AM.pn
Feature Roadmap

With my two personas in mind, my next step was to create a feature roadmap for Home Cook, making sure that I am designing for both types of users. In the Ideate phase, I would focus on Must-Have, then Nice to have, and depending on scope and time, adding in surprising & delightful features.

Screen Shot 2020-11-17 at 10.53.43 AM.pn
 

Ideate

Why

With my personas and must have features defined, it was time to ideate and visualize how Home Cook can come to life

How
  • Sitemap

  • Task Flow

  • Wireframe Sketches

Sitemap

Using Whimsical, I created a sitemap for Home Cook. Starting with the navigation menu and working my way down, referring to my "must-haves" on my feature roadmap to ensure all the features are there.

Home Cook Flows@2x.png
Task Flows

Using the same tool, I created two task flows for the main functions the app should have. 

The first one being that users can find, save and start cooking from a recipe.

The second task being that users can create and share a recipe.

Home Cook Flows@2x (1).png
Sketching Wireframes

Using the Procreate app on my iPad, I began sketching out my wireframes. I referred to my sitemap and task flows to guide me on which screens to sketch out, highlighting in orange to indicate which nav bar menu page a screen belongs to.

Sketched screens:

  1. Home Page - Recipe Feed, populated with recipes by people you follow

  2. Explore Page - Browse recipes by featured and categories

  3. Category page - when user clicks on a featured category (I.e. Seasonal, Cuisines)

  4. Create Recipe - 2 versions sketched here, a multi-step format, and a 1-screen format

  5. Recipe Page - Individual recipes

  6. Multi-step pages - when user clicks on "Start Cooking" CTA

  7. Write Review - user rates and writes review for a recipe

  8. Profile - Instagram-like pattern, users can toggle between Cookbook (bookmarked) and My Recipes (their own submissions)

  9. Collections - general catalogue page where users can filter/sort, applies to all lists

  10. Grocery List - users can check off/delete and add to list

Home Cook Sketches.png
Digitizing  Wireframes

Using Figma, I transformed my sketches into mid-fidelity wireframes. At this stage, I was using a grid layout, thinking about typography, choosing an icon set (Material Icons), and overall UI design.

Feed.png
Explore.png
Search Results.png
Filter.png
Recipe Page.png
Create Recipe.png
Step.png
Reviews.png
Grocery List.png
Profile.png
 

Design

Why

Because browsing recipes is such a visual experience, I decided to work on the UI design of Home Cook prior to prototyping and conducting user tests. In this stage, I developed Home Cook's visual identity

How
  • UI Kit

  • Applying UI design to wireframes

UI Kit

When designing the mid-fidelity wireframes, I had already created components, picked out a type pairing (Source Serif Pro & Karla), icon set, and had a good idea of the colors I wanted to use. Knowing that warm colors inspire hunger/appetite, I picked a bright red-orange color as the brand's primary color, an egg-yolk yellow as a secondary color, and a pale/grey blue as a neutral highlight. By creating a UI Kit, I could further establish branding guidelines for Home Cook. 

Home Cook UI Kit.png
Applying UI to Wireframes

Using my UI Kit, I applied color, branding, and photos to my mid-fidelity prototype to bring Home Cook to life. In addition to the mobile screens, I created one screen optimized for iPad to show how it scales. Since many home cooks prefer to use the iPad while cooking, it was important for me to show what that might look like.

Feed 2.png
Explore 2.png
Search 2.png
Filters 2.png
Recipe 2.png
Start Cooking 2.png
Reviews 2.png
Create Recipe 2.png
Grocery List 2.png
Profile 2.png
Landscape.png
 

Prototype

Why

With the high fidelity wireframes ready to go, the next step was to test my assumptions for the task flows. I worked directly in the Figma file to create a click-through prototype with basic interactions/animations.

How
  • High-fidelity click-through prototype

Screen Shot 2020-11-13 at 10.15.43 AM.pn
 

Test

Why

With my prototype up and running, it was time to validate and test my product and make any necessary revisions.

How
  • Usability Testing

  • Affinity Map

  • Priority Revisions Matrix

Usability Testing

I conducted user testing with 6 total participants, 3 of which were individuals that I interviewed for this project, and the other 3 were not involved in the beginning but all who have cooked at home from a recipe. 5 user testing sessions were over video call and 1 was in person, each lasting up to 1.5hrs. The goal was to test my assumptions of how users would navigate the app and if users would find the features useful, and even surprising/delightful.

 

There were 4 tasks each user had to complete. After a user completes 1 task, I would follow up with questions specific to that task to gain a deeper understanding of their actions, expectations, frustrations and general impressions. I transcribed every user testing session and had 23 pages of material to work with.

See the four tasks/scenarios outlined below:

  1. You are planning dinner and you aren’t sure what you want to cook, but you do know that you are interested in noodles. Can you walk me through how you would navigate the app?

  2. You find the recipe that you want to try - Taiwanese Beef Noodles, you’re going to bookmark it and save the ingredients so you can go shopping for the things you need. How would you navigate shopping for ingredients?

  3. It's time for dinner, can you show me how you would navigate the app to start cooking the recipe you bookmarked?

  4. Let's switch to a different scenario. You've just called your mom up for a recipe for a simple stir fried cabbage dish - something you ate growing up. You want to save that recipe in the app. Can you walk me through how you would do that?

88393F2C-8A9B-47BF-AB4E-AEE092F12097_1_1
755BFF42-233F-42AA-B9C2-113B1728D095_1_1

"The fact that this app doesn't exist right now is silly."

– Saher

"I feel like I need this app in my life now. It's hard to believe this isn't a real app I could just download from the app store."

– Aurelia

Affinity Map

I created an Affinity Map on Figma by looking over my transcripts, pulling out quotes and arranging them into sticky notes organized by Successes, Concerns, and Observations / Suggestions, and color coding the notes by which task they refer to. This exercise helped me organize my notes and transcript, and identify any patterns in successes and more importantly, concerns. 

Affinity Map (1).png
Affinity Map Findings

Overall, the user testing sessions were a success. Every user was able to complete the tasks easily and any suggestions or concerns were mainly on how to make things more clear, improve on something, or hypothetical cases that were out of scope.

A few major concerns were:

  1. Because I had not designed the screens of other user profiles and the ability to follow them, it was not obvious to users that the home page is a recipe feed posted by other users they follow.

  2. Even though swiping right to reveal CTAs is a common design pattern for list items, users would never have known that the interaction exists in the grocery list screen for individual ingredients. If one swipes left on an ingredient, a CTA would be revealed where users can click "Find" or "Delete." This is something that I explained would be hinted through a short animations when a user arrives to the page for the first time, but was out of Figma's prototyping capabilities.

I was able to test my assumptions for this app to cater to both the Jennifer persona (less experienced cook) and the Celine persona (experienced cook). I found that though Celine wouldn't use all the detailed features (like step-by-step screens), Jennifer will.

In conclusion, many of the changes that will be made are small but impactful ones. That being said, the prototype itself received glowing reviews from every participant across the board - they all said they wish this app existed because of the unique concept, the surprising features, and its user-friendly and visually-appealing interface.

Priority Revisions Matrix

The next step was selecting which concerns and suggestions to act on. By organizing the stickies that fell under the "Concerns" and "Suggestions" sections in my Affinity Map in a priority revisions matrix that measured user value against (my) effort to implement, I was able to quickly prioritize which problems to immediately address (high value, low effort), which problems I can tackle next (high value, high effort), and which ones not to focus on at all if they were one-off problems/suggestions with low user value.

Priority Revisions Matrix (2).png
 

Iterate

Why

Based on user testing feedback, improve the usability of my product.

Revisions

See below for major changes I made to my wireframes.

X-6.png
X-1.png
X.png
X-3.png

What's Different

To make the homepage "Feed" more obvious that it's a feed, I created an Instagram stories-like pattern that will show users what the people they follow recently cooked. This also introduces more diversity and variety into a homepage that could quickly become monotonous.

What's Different

I created an empty state for the search bar to show users all the kinds of things they can search by, such as by ingredients. This was a question that consistently came up during user testing but the only search item I had designed for was if a user had searched a dish - "noodles"

What's Different

Added a follow button to further establish Home Cook as a social sharing community of home cooks, making it easy for users to follow a fellow home cook within a recipe page.

What's Different

Users wondered how the grocery list would look if they had multiple recipes in their list. My solution was to create an accordion-style drop-down of individual recipes. I also created a "Repeat Ingredients" list at the top to consolidate any overlapping ingredients.

X.png
X.png
X-4.png
X-5.png

What's Different

Instead of having the checked off ingredient move to the bottom of the list, I decided to keep the item in place to reduce confusion in users. This is crucial especially when the list of ingredients gets long and users aren't able to immediately see where the checked off ingredient went. I also added a servings adjuster.

What's Different

It was confusing to have both reviews and comments consolidated in one place so I used the same tab pattern to create separate tabs for reviews and comments. The text input at the bottom of the screen would change based on which tab you were in.

What's Different

Many users mentioned that they wouldn't necessarily have a photo on hand when they're inputting a recipe especially if they haven't cooked it yet. An easy fix for that was to put the option of adding a photo at the bottom of the form.

What's Different

To further make Home Cooks more of a social sharing community, I designed the previously absent user profile (I had only designed the user's own profile). In this screen, users can only see recipes that other users have published and have the ability to follow them. I also replaced the settings icon at the top right corner with a messaging button to encourage users to interact with one another.

Final Prototype

Last but not least, please enjoy my final prototype!

 

Keep in mind the 4 tasks as follows as you go through my prototype:

  1. Search for Taiwanese Beef Noodle Soup by using the search bar and applying filters

  2. Save ingredients to the grocery list

  3. Find the Beef Noodle Soup in your Cookbook (Bookmarks) and Start Cooking. Then, leave a review.

  4. Create a recipe

Next Steps

 
Conclusion

In conclusion, my prototype was a great success and I could not be happier about the end result. Every person that I user tested the product with mentioned that this was something they never asked for, but now felt like they needed just because it answered all their pains and frustrations when it came to looking for a reliable recipe platform that was easy to use and offered a diverse range of cuisines they had never seen before in the western food publication world.

Future Considerations

Because this project was completed in a 2-week sprint, there are a few things I would do differently if I had the time and resources:

  • Interviewing a larger, more diverse group of home cooks

  • Take more time to work on Home Cook's branding and logo design

  • Conduct user testing with more people

  • Conduct user testing after making revisions to continue iterating and improving the product

This project is a personal project and Home Cook is a fictional brand.