Kids Can Cook

UX/UI, Mobile, iphone
Kids Can Cook main screens

Project overview

About the Project

Kids Can Cook was inspired by my interest in healthy diet and how to raise happy and healthy kids. We all want to protect children from being overweight or obese, diabetes, artery disease and cancer. Unfortunately, 34% of all kids between ages 2 and 19 eat fast food (read this study), which sets them up to have diseases and a long list of medications in their adulthood.

The Problem

There are not many options for kids to find healthy and fun recipes online. The limited number of recipe websites or apps that offer some recipes for kids have poor navigation and are not geared towards the kids. The design challenge for me was to build a solution with an incentive for kids to cook, to learn what kids need to know when they cook, and to design the best way to discover recipes that are kid-friendly and easy to make.

Solutions

Based on my research with children and their parents, I narrowed down the main factors that play in choosing the recipes and how they cook. The focus was to build a mobile app for easy access.

Role

Owned the UX and UI part of the design: finding the problem, researching, interviewing users, creating solutions in the form of user stories, task analysis, wireframes, visual design, usability testing and iterating

About the Project

Kids Can Cook was inspired by my interest in healthy diet and how to raise happy and healthy kids. We all want to protect children from being overweight or obese, diabetes, artery disease and cancer. Unfortunately, 34% of all kids between ages 2 and 19 eat fast food (read this study), which sets them up to have diseases and a long list of medications in their adulthood.

The Problem

There are not many options for kids to find healthy and fun recipes online. The limited number of recipe websites or apps that offer some recipes for kids have poor navigation and are not geared towards the kids. The design challenge for me was to build a solution with an incentive for kids to cook, to learn what kids need to know when they cook, and to design the best way to discover recipes that are kid-friendly and easy to make.

Solutions

Based on my research with children and their parents, I narrowed down the main factors that play in choosing the recipes and how they cook. The focus was to build a mobile app for easy access.

Role

Owned the UX and UI part of the design: finding the problem, researching, interviewing users, creating solutions in the form of user stories, task analysis, wireframes, visual design, usability testing and iterating

Competitive Analysis

To understand the user pain points, the first thing I did was to look at the websites and apps with recipes and analyze what works and what doesn’t. I looked at Pinterest, AllRecipes.com, Mucho app and Oh She Glows app.

AllRecipes screenshotMucho screensPinterest screens

The biggest surprise about my comparative analysis was that there is no dedicated place with recipes specifically designed for kids. If there was a kid section on the website with recipes, it wasn't designed specifically for kids needs. I found the need and the gap in the market.

Affinity Map
A photo of affinity map
User Research Findings
  1. Kids love pictures and select recipes based on pictures of a final result.

  2. The main frustration is usually with a lack of ingredients or not knowing if they have all ingredients.

  3. Kids prefer baking to cooking.

  4. Kids enjoy experimentation.

  5. Best recipes for kids have few steps and few ingredients.

Personas

Based on the interviews I had with kids and parents, I defined three types of users:
🧒young kid, 👧older kid and 👩parent.

Young Kid PersonaOlder Kid PersonaParent Persona
User Stories

As a kid, I want to see pictures of the final result.
As a kid, I want to share a recipe with my parents.
As a kid, I want to find recipes based on a limited number of ingredients.
As a kid, I want to find recipes based on a dish type.
As a kid, I want to see ingredients.
As a kid, I want to see substitutes for the ingredients.
As a kid, I want to see the steps.

Core Features
Photography and layout for recipes
Search with filtering options
Add to Favorites recipes
Share the recipe
Include substitutes for ingredients
View each step of recipe separately
User Flows
User Flows image
Sketches
A photo of sketches for screens
Wireframes and Wireflow
Wireflow
Style Guide

This is an application for kids and their parents and I wanted to have a light vibe and use white space and fun colors for a cheerful mood. For added playfulness I chose a font with rounded corners making sure it is legible.

Style Guide
Design System

During my design process, I like to have a separate page with the elements pulled from my designs so that I can check if they have cohesive style and may be repurposed.

Symbols

Validation

Iterations
Iterations

When testing Discover page, I found out that users were not interested in New Recipes category, since it’s a new app, so everything is new to the users. Users also wanted to separate New Recipes from other Categories. I made a decision to drop New Recipes category from MVP. During usability testing I also noticed that users wanted to see all recipes in one category on one page, instead of scrolling from side to side. I added a new page for the category.

Home page iteration

Search page has gone through the most iteration. The first design didn’t pass the usability testing because it was not clear for kids that they were links to narrow down the search. The users wanted to type in in a search bar instead. For the second iteration I added the buttons to quickly filter out the results, and the number of labels made the screen look overwhelming. During usability testing no one wanted to read what these labels were for. So, for my final iteration, I added the general filters, like Breakfast, or Lunch, and filters for preferences, like Nut-free, or Gluten-free.

Search iteration

The first version of Recipe page didn’t include big images even though my research showed that users want to see the pictures. So, for my second iteration, I added a new interaction to show a big image, and then user can scroll up to see the ingredients. In the future, I would also add more images so that user can see the recipe from different angles.

Recipe iteration
Invision Prototyping
View Prototype
High-Fidelity Mockups
Discover Recipes

Discover page helps users find recipes in different categories. It is useful when users are not sure what to cook and they just want to explore. The category name can be clicked to open a page with recipes only in selected category.

Recipe Details

Recipe page includes the big image of the recipe's final result, ingredients, steps and notes. User can save recipe as a favorite, or share the recipe, e.g. with parents to ask to buy ingredients.

Recipes Steps and Notes

Recipes Steps are one page per step with ingredients repeated inside the step so there is no need to return to ingredients page to check how much of an ingredient is needed.

Notes include additional information about the substitutes, and an option to write own notes.

Search Recipes

Search page has 2 options: to type in anything to find a recipe, or select a filter. On Search Results page there is an option to filter down the results. This may not be vital where there are only a few recipes but can be helpful down the road when more recipes are added.

Favorite Recipes

Recipes can be saved as Favorites by tapping on the heart icon. Empty state has a call to action button to find a recipe and add it to Favorites.

Discover Recipes

Discover page helps users find recipes in different categories. It is useful when users are not sure what to cook and they just want to explore. The category name can be clicked to open a page with recipes only in selected category.

Homepage screen
Recipe Details

Recipe page includes the big image of the recipe's final result, ingredients, steps and notes. User can save recipe as a favorite, or share the recipe, e.g. with parents to ask to buy ingredients.

Recipe screen
Recipes Steps and Notes

Recipes Steps are one page per step with ingredients repeated inside the step so there is no need to return to ingredients page to check how much of an ingredient is needed.

Notes include additional information about the substitutes, and an option to write own notes.

Recipe steps and notes
Search Recipes

Search page has 2 options: to type in anything to find a recipe, or select a filter. On Search Results page there is an option to filter down the results. This may not be vital where there are only a few recipes but can be helpful down the road when more recipes are added.

Search screenFavorites screen
Favorite Recipes

Recipes can be saved as Favorites by tapping on the heart icon. Empty state has a call to action button to find a recipe and add it to Favorites.

Learnings and reflections

This project started as a passion and I hope I will make a positive contribution to the health of our kids.

I enjoyed talking to the children and asking them about their experience cooking. To get to the point of the final design, I completed a thorough analysis of their needs, identified components that needed to be designed and added to MVP. After multiple design iteration sessions, I believe I was able to design an app that is as pleasing to the eyes as it is easy to use for kids.

The biggest lesson for me was to prioritize what features are the core of the project and what features could be added in the future releases. Overall I hope this project will come to life soon.

The biggest challenge was to adjust my methods for user studies and interviewing for kids, because kids tend not to contradict the adults. I had to be careful phrasing my questions, e.g. asking specific questions about buttons, or giving them little tasks to see if they have any frustrations with the product.

Thank you for reading!