product.

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

duration.

6 weeks (Apr/May 2022)

team.

Gabrielle H.

role.

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:

Create a responsive web design that would help increase confidence in the kitchen and save time.

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."

Person 2.jpg

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

Person 3_edited.jpg

Elio, 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.

PAIN POINTS:

Time

Consistency

Food Allergies

research questions to answer.

  1. Are we attracting the audience that we say we are targeting (the home chef)?

  2. Is our website easy to navigate and visually appealing?

  3. Are the main product offerings front and center?

  4. How does our product look and feel?

  5. How does our product engage the target audience (e.g., is there a sincere interest to interact with the product)?

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.

Screen Shot 2022-05-08 at 12.52.15 PM.png

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. 

Screen Shot 2022-05-08 at 1.05.25 PM.png

solution.

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 book a group cooking class for 4.

Prompt 4: Ask user to change their language preference from English to Spanish.

moderated usability study.

before usability study.

Screen Shot 2022-05-09 at 2.04.26 PM.png
Screen Shot 2022-05-09 at 2.04.36 PM.png

after usability study.

Screen Shot 2022-05-04 at 5.48.13 PM.png

(key insights)

users need a confirmation page or notice that flow is completed;

users need accessibility accommodations;

adding allergen considerations should be accessible from more pages;

flow needed significant improvement (e.g., button placement, navigation between pages

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.

Screen Shot 2022-05-04 at 2.11_edited.jpg

after usability study 2.

Screen Shot 2022-05-10 at 8.55.48 AM.png
Screen Shot 2022-05-09 at 2.59.28 PM.png
Screen Shot 2022-05-09 at 3.12.05 PM.png
Screen Shot 2022-05-09 at 3.05.43 PM.png
Screen Shot 2022-05-09 at 2.58.56 PM.png
Screen Shot 2022-05-09 at 3.07.26 PM.png
Screen Shot 2022-05-09 at 3.16.25 PM.png
Screen Shot 2022-05-09 at 3.09.58 PM.png
Screen Shot 2022-05-09 at 2.53.37 PM.png

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.

Prepped_Mobile Allergens – 1.png

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!  

Prepped_Website Class Bookings.png
Prepped_Mobile Class Bookings – 1.png

next steps.

Conduct a follow up usability studies on the completed website to identify any areas for
improvement or gaps before sharing with stakeholders.