Duration: 3 months | Role: UX Design & User Testing | Team: 4 members | Tools used: Figma
PROBLEM
(faced by people who cook their meals frequently)
Being a college student, I cook frequently on a budget!
My friends and I always have random ingredients around the house that we don't want to waste but don't know how to use. We run out of recipes quickly and crave some variety with the ingredients we have on hand!
HOW RECIPLY CAN HELP
USER RESEARCH
Personas allowed me to understand the primary users and scenario creation helped to visualize their interactions with the product, fostering idea generation and informed design decisions.
Layla: Use of basic features and a barcode scanner
Problem: too busy with work and school to go to the store some nights. Doesn’t know what to make with the random ingredients they have on hand.
Need A recipe generator with a set of ingredients to solve that issue.
Layla heard about a recipe generator app from a friend and decided to try it after work on Monday night.
She only has a few main ingredients in her kitchen: chicken breast, white rice, some pesto, and some basic spices and dairy ingredients. She signs up for a new account on the app using her existing Google account. Once she opens up to the main screen, she sees she can add items to her “pantry” to generate recipe ideas.
To make things quicker, she sees she can scan her items using the barcode scanner next to the ingredients search bar.
She scans her ingredients, quickly adding them to a list. She chooses “see recipes” at the end of her ingredient list, and sees hundreds of recipes that she can make with the ingredients she already has.
Layla chooses a creamy chicken pesto and rice recipe to make.
Layla is not a particularly picky eater, and has no special diet, but has always felt lacking when it comes to being more creative in the kitchen and appreciates the variety of suggestions the recipe app generated.
She really loved the chicken pesto recipe she made, so decides to save the recipe to her saved recipes on the app to view again later.
Layla notices the “discover” tab, which shows trending recipes for other ideas she might make later in the week.
Andrew: Alexa Show to view recipes
Problem: busy, needs a recipe on the fly, and is going to go grocery shopping while a child is at practice.
Need: Able to ask for recipe ideas and add them to the grocery list.
Andrew’s wife saw an ad for an app on Instagram that generates recipes based on what people currently have in their pantries, without the extra effort of going to the store for specific ingredients.
Their family recently purchased an Alexa Echo Show for their kitchen, and Andrew saw that the app works with smart speakers. After creating a new account, Andrew sees the “quick add” for pantry ingredients that can be done using the smart speaker.
He starts with, “Hey Alexa, add ground beef, basil, heavy cream, garlic, and tomatoes to my pantry.” Alexa responds with: “Sure, adding to your pantry.”
Andrew takes a look at the app’s settings to see what other commands he can use with Alexa. He sees that he can search for recipes using voice commands as well. He asks Alexa: “Hey Alexa, what are the top 2 recipes I can make with my pantry?” Alexa responds, “You can make ‘Italian meatballs,’ and ‘vegetable mélange.’ with your pantry.”
With their Alexa Echo Show, Andrew can ask Alexa to show their current pantry ingredients, and display recipes to view: “Hey Alexa, show me recipes I can make with my pantry.” Alexa can then easily display the available recipe options.
Fatima : Customizes her recipes, uses the discover feature to find new recipes
Problem: Health-conscious people have to do tons of meal prep to maintain their specific diets. Sometimes they can’t always go to the store to get specific ingredients when they are busy, etc., so generating specific recipes tailored to their diets helps to get creative with what they have. They also want to be able to reduce their food waste if they often have fresh ingredients/produce.
For dinner, Fatima has no idea what to make, and she doesn’t feel like ordering out or cooking one of her staple meals.
She opens the recipe app and goes to her “pantry” to see if she can add ingredients. She has a Google Home and notices that she can add them through voice commands. She tells her Google Home to add “broccoli, spinach, carrots, quinoa, soy sauce, and tofu” to her pantry.
She then looks back at her phone screen to see the list of ingredients displayed. She then selects “generate recipes” to see which recipes are available.
She remembers to set the filtering options to a Vegan diet to tailor her search. She sees hundreds of available recipes to choose from, several she has never heard of or made before.
She selects a quinoa bowl recipe but realizes she wants to tailor and customize it a bit. She hits the “edit” button on the recipe and then adds her preferred extra ingredients. She then saves this recipe to “My Recipes” to reference later.
SKETCHING
After developing personas and scenarios, we brainstormed some low-fidelity prototype ideas to help us visualize our concepts. The app's initial key features include a pantry, editing, and saving recipes, and viewing the screens on a smart speaker.
PROTOTYPES
In order to meet the time constraints, we opted to perform usability testing using the Mid-Fi prototype, instead of the Low-Fi prototype. The Mid-Fi interactive prototype encompassed all the pages of the App, along with screens designed specifically for Amazon's Show.
Mobile
Amazon Show
USABILITY TESTING
During the usability testing phase, we utilized Mid-Fi prototypes to evaluate the user experience. While users found it relatively straightforward to navigate the smart speaker interface, they encountered some challenges with the mobile interface.
HIGH FIDELITY PROTOTYPES
The High - Fi prototype included recommendations gathered from usability testing,
Smart Speaker High-Fidelity Prototypes
Takeaways
Prototypes play a crucial role in the design process - Prototypes helped to bridge a gap between conceptualization and implementation allowing us to refine our ideas and create user-centered solutions. Prototypes not only helped us with user testing and feedback collection but also enabled effective communication and collaboration among team members.
Scenarios were instrumental in visualizing and understanding the specific requirements of users within different situations - The utilization of scenarios in this project facilitated a deeper understanding of the problem and user needs, enabling more informed decisions regarding the necessary features for the application.