top of page
User Flow Screens
Introduction
FlexChef_Logo_edited.png

Role

FlexChef_Logo_edited.png

Project

FlexChef_Logo_edited.png

Timeline

Lead UX Designer

Flex Chef Case Study

Google UX Design Program Project (Design For Social Good)

Oct 2022- Jan 2023

FlexChef_Logo_edited.png

Challenge

Transitioning from an 'unhealthy' diet to a 'healthy' diet can be volatile rollercoaster for most. 

 

According to the University of Pennsylvania's Weight and Eating Disorders Program, 65% of dieters return to their original pre-diet weight after three years.

FlexChef_Logo_edited.png

Solution For Social Good

FlexChef is a mobile app and website that helps users avoid drastic yo-yo dieting and instead adopt a healthy lifestyle, offering subtle ingredient changes to recipes that they already know and love.

Research

Healthy eating begins in the kitchen. According to the University of Washington School of Public Health, meals cooked at home were associated with "greater dietary compliance" than eating meals outside of the home.

Building off this, I wanted to find out both what users enjoy about cooking recipes at home and what bothers/stops users from cooking at home.

FlexChef_Logo_edited.png

Interviews

I wanted to interview users who have tried sticking to diets in the past, but have veered off of them for whatever reason.

 

I broke my interviews into two steps:

01

observe

I began by watching some participants cook in the kitchen. I had them speak aloud to me any thoughts they had during their cooking process, and I used some observations to help form future sit-down or remote interviews.

Cooking.png
andrew-neel-cckf4TsHAuw-unsplash.jpeg

Next came a sit down interview with participants. It was here where I could elaborate on things I observed in step 1, as well as gain more insight on the cooking background for each user.

02

interview

FlexChef_Logo_edited.png

Observations

Below are some observations from the above research. I wanted to consolidate observations into distinct themes as a foundation for effective, well-rounded personas.

Research Observations
FlexChef_Logo_edited.png

Personas

Persona 1
Persona 2
Persona 3

Defining Users Needs

After consolidating all the data I gathered into personas, I defined core user needs that must be represented in this project so that my user base could stick to a healthy recipe app and not abandon it.

After consolidating all the data I gathered into personas, I defined core user needs that must be represented in this project so that my user base could stick to a healthy recipe app and not abandon it.

georg-regauer-qo0qBl6T7R8-unsplash.jpg
georg-regauer-qo0qBl6T7R8-unsplash.jpg
Versatile Ingredients

In order to successfully cook healthy meals at home over time, users need the ability to make recipes that can slightly adapt and change easily. Whether it's forgetting to buy something or a specific dietary requirement, users need this flexibility built into a program.

amirali-mirhashemian-sc5sTPMrVfk-unsplash.jpg
'Unhealthy' Healthy Food

To stick to a long term diet, users needs to see recipes for items that mimic what they have eaten before the lifestyle change, whether it be a simple fatty food or a longstanding family recipe.

junior-ferreira-7esRPTt38nI-unsplash.jpg
Creativity

Throughout this process, it's been clear that users have a curiosity to find new healthy recipes, it's just that they have trouble sticking to them. This desire for creativity needs to be yet still harnessed in this design.

jason-briscoe-GliaHAJ3_5A-unsplash.jpg
FlexChef_Logo_edited.png

Problem Statement

Adults who cook need a way to develop dynamic and familiar recipes so that they can stick to healthier eating habits and not rebound on a yo-yo diet.

Ideation

To start the creative process, I did a Crazy Eights Exercise. Below are detailed explanations of the ideas I brainstormed, with stars by the ideas I thought I'd carry forward.

Crazy Eights Sketches
Crazy Eights Results
FlexChef_Logo_edited.png

Storyboards

With the ideas I thought about moving forward with, I made some big picture storyboards. I really wanted to see contextually how these ideas could provide benefit to my users

Vivian Storyboard.png
Fred Storyboard.png
FlexChef_Logo_edited.png

Information Architecture

FlexChef Site Map

Prototype

Leading into the prototype phase, I knew the unique value proposition of this app would involve ingredient versatility. This inspired early versions of my design and satisfied the problem statement highlighted earlier.

The main user flow (shown in below prototypes) for all devices would be the following:

Find a recipe

Open a recipe

Sub Ingredients (optional)

Click through ingredient steps

Finish recipe

Home Low-Fi
Recipe Low Fi
Swap Low Fi
Recipe Steps Low Fi
Rate Low Fi
FlexChef_Logo_edited.png

Usability Testing - Round 1

A moderated, usability study of the main user flow was performed on the low-fidelity app prototype, which is linked below.

Users were given a series of tasks to complete, as well as a short survey thereafter. The user responses below resulted in the following design changes.

#1 "Where do I substitute ingredients?"

Lo Fi Usability 1

I really took this one to heart. This is a huge feature in the app and users not finding it was a PROBLEM.

#2 "User Variations Are Confusing..."

Low Fi Usability 2

On each recipe page, users can scroll down and see what variations other others have made to that recipe.

When I asked a user to open one of these recipes, they were very confused.

#3 "Sometimes I realize I'm missing an ingredient while I'm cooking."

Low Fi Usability 3

Originally, users were given the option to sub an ingredient only before cooking and not while clicking through steps. Based off this issue, I knew users would need a way to sub ingredients while clicking through recipe steps.

FlexChef_Logo_edited.png

Usability Testing - Round 2

A moderated, usability study of the main user flow was performed on the high-fidelity app prototype.

Users were given a series of tasks to complete, as well as a short survey thereafter. The user responses below resulted in the following design changes.

#1 Hesitation moving backward within recipe steps.

Hi Fi Usability 1

My second round of usability testing had users moving back and forth within the recipe steps. Users had trouble finding/understanding the 'previous step' button function based on location.

#2 Unsure of selected cards in onboarding

Hi Fi Usability 5

When moving through the onboarding process, users had difficulty pinpointing which cards were selected. This could end up being a huge issue for someone with poor eyesight.

Solutions

Bold body text indicates met user need

SubIngredient.gif

Swap Out Ingredients

By giving users the ability to swap out ingredients, users can be versatile with the way they make recipes with relative ease. Versatility in recipes gives users one less excuse ("I don't have [this ingredient]") to abandon cooking and instead eating out.

Users also can make recipes that might be considered 'unhealthy' a little healthier by swapping out an ingredient or two. Seeing foods that look somewhat familiar to unhealthier foods they used to eat will make healthy eating seem like a less staggering lifestyle initially.

Recipe Chains

NewRecipe.gif

When users make enough ingredient substitutions to a recipe, they are given the opportunity to post their version of the recipe on the original recipe page.

This allows users the ability to flex their creativity and show what cool variations they made.

In addition, from the other perspective, these versatile recipes could include recipes that fit certain diets (like vegan, vegetarian, etc) and help these users continue down the track of their new lifestyle.

Screen Shot 2023-01-23 at 9.18.01 AM.png
Scan.gif

Scan An Ingredient

Just bought some healthier ingredients at the grocery store? Have random ingredients and don't know what do cook with them?

The scan feature allows users to scan an ingredient and see a search result of recipes that can be made with that ingredient.

This allows users to again be versatile with the ingredients they have at home, as well as opens the possibility that a traditionally 'unhealthy' ingredient could (in moderation) produce a healthy recipe!

Sequence 02_1.gif

Capture Nostalgia

Using image text recognition technology, users can put old, handwritten recipes into the FlexChef app.

Users mentions a ton of nostalgia when it came to cooking, as mentioned in research. This technology will allow users to harness that feeling relatively easily and therefore create a more familiar feeling with the app.

In addition, if older recipes that you enter aren't healthy, there is always the chance that other users may create a variation of that recipe that turns out to fit your health goals a little bit better!

Mockups & Final Prototype

Mocks.png
FlexChef_Logo_edited.png

Style Guide

Style Guide.png
FlexChef_Logo_edited.png

Takeaways

Even though I had so much fun doing this project, there is a ton I'd change.

1. Including videos more: While videos were incorporated in my design, I didn't actually put videos into my high-fidelity prototype. I'd love to actually put videos in my design and see how timestamps and other video-related things could fit into this design.

2. Testing Responsive Designs: While I got the chance to mock some responsive designs for this project, I would've loved to test those designs further and build a case study off of those findings.

3. More Accessibility Designs: If I took this project further, I would've loved to include more accessibility considerations. I feel this is an important desire to always have during a project!

bottom of page