Umm

A hand-free recipe app for easy meal planning

Project background

SOLO PROJECT

TIMELINE: March - June 2022 (12 weeks)

ROLE: UI/UX Designer

TOOLS:

As a home cook, I use recipe apps a lot and realize

"Recipe apps are annoying to use while cooking!"

THE PROBLEMS

1. When home-cooks are busy cooking and not used to the recipe yet, they likely need to look at the directions a couple of times. While their hands are dirty with flour or tomato sauce, it's so annoying to touch the screen and find where to read.

2. A lot of leftovers or ingredients end up by throwing away cause people don't know what to do with it and that causes a huge waste.

3. Work from home people don’t have time for daily shopping. But they need to cook more frequently to save money.

4. The blog description in recipe app is too long. Users have to scroll down forever to see the list of ingredients. Sometimes the instructions even blend somewhere in the blog.

I planned a working process to keep track what I have to do and don't forget to focus on User Centered Design (UCD) principle.

DESIGN PROCESS

User Experience

User Interface

DISCOVERY + RESEARCH

Competitor Analysis

User Research

CONCEPTING

MVP

User Flow + Diagram

Sketching + Rapid Prototyping

TESTING + REFINE

User testing

Refining

DESIGNING

Moodboard

A/B Testing

Responsive Design

Style guide

REVIEWING + CRITIQUING

Feedback loop

Mock up

Story telling

Present

Since the market of recipe apps and platforms is plenty and various, I wanted to see what was currently successful and where is the opportunity for this project.

I analyzed the 4 most popular apps and found that none of them had the function that can read the recipe step by step for user while they're cooking.

COMPETITIVE ANALYSIS

This is a personal blog where the owner shares her knowledge about Holistic Nutrition through her recipes. The tagline is “How to make healthy choices every day”.

Kitchen Stories is a mobile cooking app with emotional videos and high-quality step-by-step photos. With the high-end design, delicious content, and usability, they prove that the “everyone can cook” slogan is not rhetoric.

Yummly is an American website and mobile app that provides users recipes via recommendations and a search engine. Yummly uses a knowledge graph to offer a semantic web search engine for food, cooking and recipes.

Forks Over Knives has launched a mobile recipe app and maintains a website filled with the latest research, recipes, and tools to help people at every phase of their plant-based journeys.

Under UX lens, I withdrew Do and Donts from the analysis, as well as get inspires for my app

Usability:

+ Nice interface, easy to navigate.

+ Don’t have a filter on the home screen.

+ Home screen is kind of busy and hard to find what users want in a limited time.

Calls to Action (CTA):

When users browse the Kitchen app on their phone, there is download screen pops up. This is good to drive users to the App store or Google Play.

Layout:

+ Eye-catching with pictures and videos but then there are too many quick links in the middle making users feel lost.

+ There is a Cooking mode which is helpful when users are in the middle of the cooking process, they can choose which step they are in to keep reading.

Compatibility:

The web doesn't work on mobile.

Navigation Structure:

Easy to know where thing belongs to.

Differentiation:

The app contains almost every function that users want and need to know. This is a big plus for the app.

From what I understand about the market and problems, I define the Objective and Hypothesis for the app.

Objective

The objective of this MVP is to gain validation from target users that such an app will be used for cooking and shopping. The app will allow users to find easy and quick recipes with outstanding features that free them from the annoying processes and help to save money.

Hypothesis

We believe that providing a large variety of recipes and convenient functions such as Reading mode, Virtual pantry, Food references, and meal plan will result in users finding not only recipes suitable for their specific needs but also save them from frustrating cooking time.

For people who need to be on a budget for food, this app can help them not overbuy while shopping, as well as suggest recipes that recycle old ingredients or leftovers.

After seeing what is missing on the market, I wanted to know if my hypothesis matched my target users’ needs, by conducting User Research through the RESEARCH LEARNING SPIRAL.

USER INTERVIEWS

100% of interviewees agreed that the Reading mode is helpful for their cooking process.

Fashion Designer

Ngoc Tran

A modern housewife who loves cooking/baking during weekdays. She likes to watch/read a lot of different recipes to get inspired and create her own recipes. She doesn't know if there are any apps that goes straight to recipes and tips. She is very curious to try new things.

Event Planner

Vi Trinh

Vi is a foody since she eats out a lot with her clients and colleagues. When she has time to cook, she enjoys it under one condition, not too much equipment requirements. Vi is kind of picky in terms of seasoning.

Editor

Veronica Linh

Veronica is wearing a couple of hats at the moment so she's very busy. She needs to manage her time well so she can finish all the jobs well. Therefore, whenever she cooks, she prefers cooking in one pan with quick and nutritious recipes.

Software Developer

Peter Nguyen

Peter is a food lover and love to experience new recipes whenever he has time. He will go shopping at the weekend and prepare as much as possible for the whole week meals. But he think it's a tiring process.

International Student

Tannie Bui

Tannie is international student in China and has to study a lot. She prefers sleeping over eating but has to cook everyday to save money from her little living budget.

After analyzed the data, I found out

• 6 patterns were merged from the answers.

• 4 main pain points were found.

• 7 goals that wanted to achieve.

With that information, I drew a clear picture of who is my target audience.

With her Insights and Requirements, I know what kinds of tasks and goals will she be accomplishing as using the website or app.

User Insights

As a busy worker, I want to be able to find the recipe easily, so that I can quickly cooking.

The meals should be healthy and balance in term of nutrients. Ingredients should be easy to recognize and find.

As a food lover, I hate to see food waste. It will be a plus if I can take advantage from leftover to make something new.

Since I don't have much time for planning about meals, I want an app can provides me everything.

While cooking, I don't want to use my messy hands to touch the screen. It's not hygienic.

Requirements

Able to access directly to the recipe library with high quality of instructional pictures and videos. Also, can customize my searching to quickly find what I want

Have section for Health topic let user know what kind of ingredients good for what kind of health issues. Also, Diets category introduces different types of eating clean and balance.

Get suggestions for what to make from ingredients that I have at the moment; or how to transform the leftovers into something good again.

Add recipes to weekly meal plan and the ingredients automatically sync into a shopping list, which can be sorted by common supermarket categories such as fresh meat, vegetables, grains, etc.

Have a Reading recipe function which will read out loud step by step the recipes based on my command, so i don't need to use my hand to touch the screen while cooking..

MINIMUM VIABLE PRODUCT (MVP)

Building low fidelity wire frame

USER FLOW DIAGRAM

SKETCHING

Flow Setup Virtual pantry

z3338577664496_c6d7372ead113c99412379e4fca16f7e - Copy (2).jpg

Flow Add recipe to Cook book

Flow Reset Password

Flow Find a recipe

Flow set advance search

Flow Reading Mode in cooking Mode

z3338587704008_0238ca6bd99a3889d06bb040413c0f16 - Copy.jpg

USABILITY TESTING

I ran user tests in the early stage to get feedback about the flows and defined it to align with users' needs.

4 users were selected with different backgrounds, but share the same interest in cooking.

Tasks

1. Sign Up for new users

2. Search for recipes and use advanced filters

3. Use Free-hand cooking mode

4. Set up Virtual Pantry

5. Add ingredients to the shopping list

6. Find where to Account, Virtual Pantry, and Shopping list

I used Usability Hub to conduct the testing on 15 total participants with 15 responses shown

A/B TESTING

54% (8 votes) in 33s

46% (7 votes) in 45s

After getting all feedback from Usability testing, I started to build high-fidelity wire-frames. I made a Mood board and conducted A/B testing from real users before applying it to the rest of the design. And here is the final design.

FINAL DESIGN

Umm is a recipe responsive web app where you can not only find quick - convenient - tasty recipes, but also save you from food waste and overspending.

Umm targets the market of work-from-home people, who want to stay healthy and on budget.