Yum Guide
Responsive web app - Career Foundry Course project
Role
UI UX Designer
Duration
2 months(during Career Foundry course)
Project type
Responsive design
Tools used
Figma, Google forms, Prott, Lyssna
1. Introduction
Problem & Solution
Problem
Busy individuals often struggle to find quick, nutritious recipes that fit their schedules. Existing recipe apps frequently lack speedy recipe options, detailed nutritional information and alternative ingredient substitutes, and offer overly lengthy instructions.
Solution
A recipe app caters to busy users by providing a curated selection of quick recipes, detailed nutritional information, alternative ingredient substitutes, and concise, easy-to-follow instructions, making healthy home cooking simple and efficient.
Objectives- 5 W's
1.Who are you designing for?
Users of recipe apps.
2.What kinds of tasks and goals will your audience accomplish as they use your website or app?
Finding recipes, Saving recipes,Sharing recipes, Following preparation instructions.
3.When will your audience be engaging with your product?
When planning meals and preparing meals.
4.Where will your audience be using what you’re designing?
In the kitchen when preparing food,in the store when purchasing ingredients, and at home when researching meal options.
5.Why is your audience choosing to use what you’ve designed?
Because it solves a problem for them that isn’t present in other recipe products on the market
2. Research
Interviews
Interviews provide in-depth insights into user behaviors and motivations, uncovering specific pain points and needs. They offer detailed feedback on usability, helping to refine and enhance the overall user
experience.Conducted user interviews with three participants from diverse backgrounds.
Interview Questions:
Question #1: Can you explain your cooking pattern during the week? (For example, how often during the week?)
Question #2: How do you currently manage your meal planning and preparation in your bus schedule?
Question #3 How do you usually discover new recipes, and what factors influence your decision to try new recipes?
Question #4 What features do you consider essential in a recipe website or app to enhance your cooking experience during busy schedules?
Question #5 When following a recipe, what challenges do you encounter, and how do you typically overcome them?
Question #6 How important is it for you to have access to nutritional information and dietary preferences (e.g., vegetarian, gluten-free) when searching for recipes?
Question #7: Can you share any frustrations or pain points you've experienced with existing recipe websites or apps? How do you think they could be addressed?
Patterns
All users cook almost every day for lunch, with dinner being less frequent (about 4 times a week)
Surprises
Many users were vegetarians/vegans. Vegan and vegetarian options are significant for all users.
They appreciate recipes that specify if they are vegan or can be made vegan-friendly. Access to nutritional information is valued by users for
quicker decision-making.
Frustrations
Most of the users find websites filled with ads, pop-ups, and intrusive videos annoying. They prefer responsive and user-friendly pages without distractions.
Goals
Preference for Videos: Clear instructional videos are preferred by all users, focusing on essential aspects like ingredients, quantity, and time. They prefer videos under three minutes.
Nutritional Information: Access to nutritional information is valued by users for quicker decision-making.
Surveys
Surveys help understand user preferences, pain points, and feature priorities and provide a clear direction for design improvements. Demographic data helps tailor marketing strategies and validate design assumptions.
-
How often do you cook at home?
-
How often do you search for a recipe?
-
Where do you usually find new recipes?
-
How will you consider your cooking skills?
-
What are your biggest challenges when cooking at home?
-
What is the easiest format for you to cook?
-
Why do you search for new recipes?
-
How likely are you to try a recipe with unfamiliar ingredients?
-
Do you use a recipe app? If you do, which one?
-
What features do you look for in a recipe app?
-
How important is it for you to have nutritional information included with recipes?
-
How important is it for a recipe app to have a feature for saving and organizing recipes?
-
Would you be interested in a feature that suggests recipes based on ingredients you already have?
-
Would you be interested in a feature that suggests recipes based on ingredients you already have?
-
Do you prefer recipes that cater to specific dietary restrictions?
-
Would you be interested in using the allergy filter feature in an app?
-
On a scale of 1 to 5, how satisfied are you with the recipe apps you currently use, and why?
-
How likely are you to pay for a premium version of a recipe app with additional features?
-
What additional features would you like to see in a recipe app that you haven't found in existing apps?
Personas
We wanted to gain a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 3 personas for each of our user segments. They were based on user interviews and surveys, and we updated them throughout the project as we gathered more data. We used these personas whenever we wanted to step outside ourselves and reconsider our initial ideas.
Jobs to be done
Job 1
As a busy working mom with two kids, I want to find healthy, quick recipes and easy-to-prepare recipes that my whole family will enjoy, so that I can save time on meal planning , spend more quality time with my children and manage my hectic schedule.
Job 2
As a health-conscious individual with dietary restrictions, I want to discover recipes that align with my specific dietary needs, so that I can maintain a balanced diet while enjoying delicious meals.
Job 3
As a student with a busy schedule and a limited budget, I want to discover easy and quick recipes with instructional videos, so that I can quickly learn new cooking techniques and prepare delicious meals.
User flow diagram
3. Ideation
I have done the crazy 8’s exercise for 3 user flows while brainstorming initial pencil sketches. Below are these sketches with two iterations for each user flow. The designs are done with mobile-first approach.
User Flow 1 - Searching a recipe by applying filters
User Flow 2 - Setting preferences in profile settings
User Flow 3 - Saving a recipe
4. Wire framing
In the initial wireframing phase, I created low-fidelity sketches by hand and tested them in Prott to gather early feedback. Usability testing was conducted for three primary user flows: (1) Searching for a recipe with filters, (2) Saving a recipe, and (3) Setting dietary preferences in profile settings. This approach provided valuable insights, allowing for iterative improvements before moving to higher fidelity designs.
User Flow 1
User Flow 2
User Flow 3
Usability Testing
Goal:
This test aims to assess the usability of my recipe app on smartphones and tablets. I would like to observe if novice and experienced home cooks can easily find, follow, and save recipes. By conducting this test, I aim to understand how intuitive the app's navigation is and whether users can seamlessly complete these tasks without encountering significant obstacles.
Methodology:
Conducted usability test through Google meetings and participants were asked to share their screens while doing it, and they were also asked to share their thoughts. Observations were noted during the task completion. The app used to conduct usability testing: Prott
Participants:
Conducted UT with three different participants individually.
Tasks:
Specifically, I want to identify if these users can:
1)Locate quick recipes using the search function.
2)Setting dietary preferences based on their choice.
3)Save and organize their favorite recipes for future reference.
Findings in Usability Testing:
Issue 1: Not giving more than one way to navigate
Possible solution: Providing users with more than one way to achieve their task goals.
Issue 2: Lack of navigation indicator
Possible solution: Highlighting the current location on the screen wherever the user is.
Issue 3: Lack of labelling
Possible solution: Providing names to the icons will result in a user-friendly app.
Mid fidelity Wireframes
5. Visual Design
Tone and voice
Friendly and Approachable: Use a warm, inviting tone to make users feel comfortable and welcome.
Encouraging and Supportive: Encourage users by providing positive reinforcement and supportive language.
Inclusive: Use inclusive language that makes all users feel welcome and represented.
Language
Interactive Prompts: Encourage interaction and engagement with prompts and questions.
Inclusive Language: Ensure the language is inclusive and respectful of all users
Consistent Terminology: Use the same terms for measurements, ingredients, techniques throughout the app.
Preference test of a single screen which displays the details of a recipe
High-Fidelity Wireframes for Mobile phone
High-Fidelity Wireframes for Tablet Device
High-fidelity Wireframes for Laptop device
Mockups
Figma prototype link
Takeaways
Continuous Improvement:
Iterative testing and feedback loops to refine features and functionality.
Adapting to user preferences and prioritized features based on user needs.
Technical Challenges:
Addressing issues related to video integration and cross-device compatibility.
Ensuring the app's performance and responsiveness through thorough testing.