Brief

To create a responsive website that solves problems
for real users on the topic of discovering and selecting recipes.

High level goal

Uncover and solve for pain points users currently
experience when discovering and selecting recipes.

Team
Alisa Price
Jayla Corley
Stephanie Sanchez
Elena Levy

My role
Research Lead

My contributions
1. Building project timeline
2. Affinity Mapping
3. Creating the Persona
4. Conducting user interviews
5. Wireframing & Prototyping




Timeline
Two week sprint

Tools used
Figma, Miro, Zoom, Sketch, InVision

View Prototype

01. Initial Research & Synthesis

User Interviews

In order to gain a better understanding of the problem space at hand, we conducted user interviews to help us pinpoint user needs and pain points to solve for.
PERSONA

KEY INSIGHTS

PROPOSED SOLUTIONS

1. Users tend to choose recipes that have photos because it helps them visualize how their meal will turn out. 

Design a vibrant and photo heavy website.

2. Users select recipes with the shortest cook times unless they know they have an allotted amount of time for a more complicated recipe. 

Allow users the ability to discover recipes by filtering through cook time.

3. Users enjoy the social aspect of sharing recipes because it cultivates connections.

Create a feature that allows users to share recipes with anyone.

4. Users prefer making recipes that have ingredients they already own.

Create a feature that allows users to swap recipe ingredients for what they have at home or have easier access to.

5. Users feel frustrated when there isn’t an easy way to store and access recipes, especially when grocery shopping.

Design a feature that allows users to save recipes and create grocery lists. 

02. Understanding the user

Persona

With the key insights in mind from user interviews, we created our persona to assist in better understanding who our users are and what their goals, pain points and needs are.
PERSONA

Journey Map

We created a user journey for Emily to simulate her current experience when discovering and selecting recipes. We then focused on the lowest points of her journey (in red), and used them as opportunities to solve for.
PERSONA

Feature Prioritization

Using our proposed solutions to our key insights as well as the low points from the journey map, we began brainstorming the features we were going to prioritize in our design.

After these were identified, we focused on designing a Home page, Search page, Recipe Page and Rating page to host these selected features.
PERSONA

03. Designing

Insight to solution

Now that we had a better understanding of our user and what features to prioritize, we began designing in mid-fidelity to solution for the key insights we found in initial user interviews.
PERSONA

04. Testing & Ideating

Usability testing

It was imperative that we tested our mid-fidelity wireframes to ensure that we were solving for the right problems. Through user feedback, we were able to ideate on our designs in high-fidelity to address glaring issues users had when tasked with navigating the wireframes.
PERSONA


Homepage

Search page

Recipe page

Rate Your Experience page

05. Outcome

Testing Results

We tested our proposed solution in high-fidelity by conducting another round of usability tests with the hopes of understanding if our solutions accurately addressed user's needs.
PERSONA

MET BEST PRACTICE

Homepage Task:

Please scroll through the homepage and give us your first impressions.

Results:

100% of users stated that the homepage was visually appealing and the photos immediately grabbed their attention.

MET BEST PRACTICE

Search page Task:

Walk me through how you would find a 20 minute taco recipe.

Results:

100% of users found the filtering by time feature to be intuitive and a necessity when searching for a recipe to cook.

MEDIUM ISSUE

Recipe page Task 1:

Walk me through how you would add avocados and pecans to your grocery list.

Results:

100% of users expected to be able to see their grocery list after adding ingredients. 50% were confused by the verbiage included in the modal pop up.

Recommendation:

Include an option to view full grocery list when adding ingredients and change the verbiage in the modal pop up.

MET BEST PRACTICE

Recipe page Task 2:

Knowing that you'd like to use your onion powder for this recipe, please substitute chili powder for it.

Results:

100% of users liked the ability to substitute ingredients for one they may have at home. Additionally, all users communicated that the updated ingredients list with the substitution was extremely helpful to them.

MINOR ISSUE

Rate Your Experience  Task:

Now that you have finished cooking, please rate your experience.

Results:

50% of users expected to see other reviews of the recipe within the recipe page.

Recommendation:

Insert an area at the bottom of the recipe page that shows the reviews as well as conversations users are having with each other.

06. Prototype

Desktop to Mobile

After completing usability tests and making corrections to the high-fidelity wireframes, we created a mobile breakpoint for Foodie and built out the primary navigation which can be found at the bottom of the phone screen as well as the hamburger menu.
PERSONA

07. Retrospective & Next Steps

In this project, I was able to strengthen my skills in time management, project management, user research and design. I especially enjoyed diving into journey maps and gaining a better understanding of what it means to empathize with the users. Additionally, I was able to challenge myself when creating a mobile breakpoint to prioritize navigation as well as sizing.

My next steps would be to:
1. Prioritize ideation of pages that did not meet best practice in high-fidelity testing.
2. Create a more defined community feature that allows users to share thoughts within the app.
3. Conduct more usability testing after updates have been made.
PERSONA