Prepped hero image of three devices (desktop, tablet and mobile phone)

product.

Prepped, a responsive website concept designed for the home chef.

duration.

7 weeks (Apr/May 2022)

team.

Gabrielle H.

role.

Researcher, Interaction Designer, UX Writer, UX/UI Designer

tool.

Adobe XD

problem:

The average home chef prefers home-cooked meals over eating out, but many do not have the time nor the basic cooking skills to consistently make quality meals at home. 

goal:

Increase confidence in the kitchen and save time.

directive:

Design solution must be a responsive website.

research.

Interviews were conducted with 6 individuals, and the information gathered was used to create empathy maps, user personas, journeys + stories.  Competitive audits and reports were created and the insights from that informed my initial designs that would eventually become the prototypes for my usability study. 

 

Results showed that while personal confidence levels + attitudes varied, all interview participants preferred a home-cooked meal even if they weren’t the ones preparing the meal themselves. Most saw food as a way to connect with others and were open to taking a cooking class for fun. It was noted that allergy considerations should be incorporated into the design. 

"I don't think I spend enough time in the kitchen."

“I have so many food allergies, it’s best if I cook for myself.”

"I enjoy cooking for myself and my family, but sometimes I need inspiration."

"I eat out about 3-4 times a week.. being in the kitchen is a little overwhelming for me."

"I like trying new foods, flavors with my friends."

PAIN POINTS:

Time: Having the time to prep + prepare meals

Consistency: satisfying meals at home, regularly 

Food Allergies: allergy considerations

Photo of person named Sage

Sage, 26

Non-traditional dental student | Divorced lives with parents | Office Assistant

"Despite my allergies, nothing puts me in a better mood than good food."

Biggest frustration: 'Eating out and running into "hidden allergies." Why don't these establishments have more clear markers/labels of allergens?' 

Goals: Allergen-free meals, "stretch" meals (leftovers) + family-friendly options

Photo of person named Elia

Elia, 41 

High school diploma | Partner | Non-profit employee

"I'd spend more time in the kitchen if only I knew where to start"

Biggest frustration: 'I feel like I eat the same things every day when I am home. I have a very adventurous palate that I can't satisfy when I am in the kitchen, simply because I get overwhelmed.' 

Goals: Consistently eat good food + try new flavors.

Udemy Cooking is a global destination for online learning, we connect people through knowledge.

Kitchn, inspiration for the food our readers want to eat, and resources for them to become the cooks they want to be.

Minimalist Baker Simple recipes that require 10 ingredients or less, 1 bowl, or 30 minutes or less to prepare.

NYT Cooking is a digital, cross-platform cooking service that helps users discover the world’s best recipes, save and organize their cooking life and serve as an approachable guide in the kitchen.

insights from competitors

gluten-free; plant-based; global recipes; weekly recipes;

10 ingredients; 30-minute or less; 1 bowl recipe options

 

global destination for online learning; certification for learning; step-by-step guide

Reviewed aspects:

Product offerings
Target Audience
Value Proposition
Website Interaction
Visual Design 
Website Content

ideation.

Sitemap for prepped website

When I began the wireframing process I wanted a design that would encourage users to begin with the category that made the most sense for their personal journey: organize, cook, recipes, allergens, prepping or pantry.

usability studies.

My first round of usability studies revealed that the flow to complete a class booking was incomplete. It took two screens to verify details, but there was no definitive confirmation point and no way to go back, should users need to edit details.

After the usability study, two pop-up lightboxes were added to provide clear indicators of progress throughout the flow, as well as one additional banner at the flow end to confirm booking. 

Lo-fi prototype

Prompt 1: Ask user to find a recipe to prepare.

Prompt 2: Ask user to add an allergen consideration from recipe page. 

Prompt 3: 
Ask user to save recipe.

Prompt 4: Ask user to book a group cooking class for 4.

moderated usability study.

before usability study.

Digital wireframe, desktop
Digital wireframe, desktop

after usability study.

Mockup, desktop

(key insights)

there was no confirmation page to let the user know the flow was completed;

there were no accessibility features provided;

allergen considerations weren't accessible from enough pages;

  navigation between pages proved a challenge for some users

After the second usability study, both a language translation tool and closed caption feature were added to the site. 

Additionally, in round two it was noted that adding allergens needs to be accessible from more pages, namely the homepage.

before usability study 2.

Desktop before usability study

after usability study 2.

Desktop after usability study
Before usability study, no closed caption on mobile
Before usability study, no language selection tool on mobile
After usability study, closed caption added on mobile
After usability study, language selection tool added on mobile
Before usability study, no closed caption on desktop
Before usability study, no language selection tool on desktop
After usability study, caption added on desktop
After usability study, language selection tool added on desktop

hi-fi prototype

Hi-fi prototype screenshot prepped site
Screenshot hi-fi prototype prepped site

takeaways.

Impact: 


“Yummy! Just looking at the design makes me want to head to the kitchen and test out some recipes." - User review

“Being able to shift through recipes by allergy would be a great tool when cooking for my family. I have a child with a gluten allergy, so cooking quality meals to accommodate that allergy is a priority for me.” - User review

What I learned:

I learned that when creating a website with special considerations in mind, those considerations should always be front and center, and accessible from all points in the design. I was reminded that the user values flow indicators whenever possible to avoid confusion and reduce drop-off rates.

 

Lastly, the website was a visual reminder of the importance of high-quality images - which can elevate or reduce a design's appeal + polish.

solution.

Final tablet mockup prepped "allergies"
Final mobile mockup prepped "allergies"

Learn At Your Pace. 

Take a personal class, or schedule a group session for you and friends! Prepped wants each user to cook at their own pace. Curious about pantry stocking? Want a more organized space? New routine with a prep day? Whatever the choice, the design is simply to increase confidence through curious exploration.

Customization = Comfort. 

People have a very distinct relationship with food. It can transport them to a childhood experience, or a fond memory with a loved one. It can create comfort, a sense of belonging or even the opposite. This site allows individuals to start at their happy place - whether group activities, organization, prep, or just to better understand their allergens to increase confidence in quality meal options. Meal quality equality for all!  

Final desktop mockup prepped "book a class"
Final tablet mockup prepped "book a class"
Final mobile mockup prepped "book a class"