Role: End-to-end UI/UX designer
Tools:
Timeline: February - April 2025 (~6 weeks)
Background
Problem
Idea
Finding recipes that cater to dietary needs, sometimes multiple needs at once, can be difficult and time consuming.
Many people look for new recipes online but many recipes don’t take dietary needs into account.
A website of recipes based around allergies. An efficient tagging system that makes it easy to find a recipe for any allergy, dietary preference, or nutritional need.
Researching
User Interviews
I conducted five interviews with participants between the ages of 21-75 years old in order to get a deeper understanding of the user’s needs with detailed, qualitative information.
Essential Questions
How often do you use recipes? Why do you use them or why not?
What websites do you use to find recipes?
What websites do you use to find recipes?
What search terms do you use when looking up recipes?
Do you use recipes on paper, mobile, desktop?
Do you have any allergies or dietary preferences? If yes, does it affect how you find and use recipes?
Affinity Map
Key Insights
Recipes are used for creativity and exploration
Recipes are often reused
Some cook for enjoyment, some cook for necessity
Time and energy impact desire to cook
All interviewees look up recipes online
No one signed up for accounts because email spam and payment was expected
Preferred fewer ingredients when cooking with allergies in mind
Recipes are often modified and ingredients are substituted for allergen friendly alternatives
Competitor Analysis
Direct
Direct
Direct
Indirect
Clearly labeled recipes
Easy to read uncluttered design
Simple sort/filter
Cookbook and a shop
Ability to make account not obvious
Users could not email for help, they were directed to an FAQ page
Can make accounts to save recipes
Cookbooks for purchase
Easy to see how to make an account
Could only filter by one allergen or dietary preference at a time
Can make accounts to save recipes
Cookbooks for purchase
Difficult to see how to make an account
Could filter by multiple allergens or dietary preferences at a time
Informative
News, posts, help from doctors, recipes, and resources
Lack of features focused on recipes
Users can’t make accounts and save recipes.
No recipe comments or reviews
Key Insights
Simple design, clear labeling, clear navigation to account, filtering by multiple tags at a time, recipe ratings and reviews
Defining
During this process, I used a linear approach, and iterated on wireframes.
POV's & HMW's
I’d like to explore ways to help people who enjoy cooking to find new recipes with easy searching and filtering because they search for ideas based on criteria that can be filtered such as nutrition, content, ingredients, and time
How might we make recipes simple to filter?
How might we help people who enjoy cooking feel excited about a recipe?
How might we make recipe ideas be the perfect recommendation for someone looking for new ideas?
I’d like to explore ways to help people with allergies/dietary preferences who cook to find allergy and diet friendly recipes because they spend time figuring out ingredient substitutions to modify a recipe to fit their needs
How might we make finding allergen/diet friendly be like finding any other recipe?
How might we help users feel confident about the allergen friendliness of their food?
How might we eliminate the need for users to substitute ingredients in recipes?
I’d like to explore ways to help people who don’t have time to cook to find short and simple recipes because they will be forced to eat out or find food elsewhere if they don’t have time, even if they would rather cook
I’d like to explore ways to help people that reuse recipes to keep track of their frequently used or favorite recipes online because their recipes aren’t all in one place
User Personas
Storyboarding
Browsing recipes with cook/prep time < 20 minutes in quick recipes section
Finding recipes for certain allergies with search and filter
User Flows and Task Flows
Information Architecture
I conducted a card sort in order to help me determine my website's structure. In total, there were four closed, moderated, in-person card sorts. I used physical cards during this process.
Cards that were difficult to sort: Share recipe, Allergies, Quick recipes, Diet, Medical conditions, Share recipe, Suggestions
Cards with 25% in all categories (no majority): Review, suggestions, popular
Cards with 50/50 categories: Settings, About, Help
Half of participants said that not much would go in settings, and it can be combined with profile
Cards with split results went in main navigation
Sitemap
Designing
I chose this color palette because I thought the green was vibrant, reminiscent of wellness, nature, and plants.
Mid-Fidelity Wireframes
High-Fidelity Wireframes
My favorite part of the design process was creating the hi-fi wireframes, prototypes, and iteration. Why? It's artistic, creative, and I love being able to see my work come to life. I appreciate being able to learn from testing and improve on my designs.
Testing
Evaluating the usability and usefulness of the wireframes. How effective is the design at helping the user achieve their goals?
Plan
Goal
Tasks
Success metrics
Evaluate the usability and usefulness of the wireframes. How effective is the design at helping the user achieve their goals?
Find a recipe using search and filter
Create an account
Favorite a recipe and view all favorites
Time on task
Task success
Number of errors
Additional comments
Results
9 Testers (6 moderated, 3 unmoderated)
Testing software: Maze
Time on task
Task success
Number of errors
Task 1 avg.: 148.1s
Task 2 avg.: 66.2s
Task 3 avg.: 31.9s
Task 1: 66.7% success rate
Task 2: 100% success rate
Task 3: 100% success rate
Task 1: 33% of users ended on the wrong screen, 74.9% misclick rate
Task 2: 0% of users ended on the wrong screen, 26.9.9% misclick rate
Task 3: 0% of users ended on the wrong screen, 44.1% misclick rate
User Feedback
Key Insights
The chef user icon was hard to see and wasn't used as much.
Users expected search to be available in the menu bar.
Changed chef hat icon so the recognizable user is bigger and the hat is smaller
Before
After
Added a search option in menu since many tired to use the menu to search and filter
Before
After
Additional Changes
Changed heart icon
Added Favorite Recipes to menu bar
Smaller recipe cards
Changed “create account” button text
Reduced password requirements
Changed look of Log In
Changed back button
Changed “done” button text
Hight-Fidelity Wireframes (Version Two)
Closing
Challenges
A challenge I faced was learning to conduct user interviews. Before this, I hadn't had the role of interviewer before, so it took some time getting comfortable with asking follow-up questions, thinking on the fly, and creating a relaxed environment. Another issue I had was with creating a proper prototype. Many struggles users had during usability testing revolved around the prototype itself not being very interactive. A lot of steps had to be done in a certain order that was not intuitive. I also had trouble prioritizing tasks since there were a few different paint points I found during research.
Growth
Over the course of this project, I gained experience in the entire process of UI/UX design. I had only had introductory experience before this. The main tasks I was able to learn about and apply were user research, user interviews, use flows and task flows, prototyping, and usability testing. This project has helped me become prepared for research, prototyping, task prioritization, and knowing what tools should be used and when.
Next Steps
In future iterations, additional features could include:
Adding more tags for time, cuisine, meal of the day, basic nutrition facts etc.
More emphasis on displaying and properly labeling quick and low effort recipes
A more detailed nutrition section
Retesting hi-fi wireframes in every iteration
From this experience, I a most proud of my wireframes, color palette, and my growth. I had little knowledge about the processes of UI/UX design when I started out. I also found a new interest in prototyping and usability testing.
