To create a responsive website that solves problems
for real users on the topic of discovering and selecting recipes.
Uncover and solve for pain points users currently
experience when discovering and selecting recipes.
1. Building project timeline
2. Affinity Mapping
3. Creating the Persona
4. Conducting user interviews
5. Wireframing & Prototyping
Two week sprint
Figma, Miro, Zoom, Sketch, InVision
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.
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.
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.
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.
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.
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.
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.
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.
Please scroll through the homepage and give us your first impressions.
100% of users stated that the homepage was visually appealing and the photos immediately grabbed their attention.
Walk me through how you would find a 20 minute taco recipe.
100% of users found the filtering by time feature to be intuitive and a necessity when searching for a recipe to cook.
Walk me through how you would add avocados and pecans to your grocery list.
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.
Include an option to view full grocery list when adding ingredients and change the verbiage in the modal pop up.
Knowing that you'd like to use your onion powder for this recipe, please substitute chili powder for it.
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.
Now that you have finished cooking, please rate your experience.
50% of users expected to see other reviews of the recipe within the recipe page.
Insert an area at the bottom of the recipe page that shows the reviews as well as conversations users are having with each other.
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.
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.