Yara | Yummly’s Voice Assistant
Yara is a Conversational User Interface (CUI) made to assist users while cooking, shopping, and meal-planning with the Yummly app. Yummly is an existing app for personalized recipe inspiration, organization, and planning.
UI/UX Design | UX Research | Motion Graphics | Visual Design
UI/UX Design | UX Research | Motion Graphics | Visual Design
Team
Individual
Individual
Duration
13 Weeks
Spring, 2024
13 Weeks
Spring, 2024
Programs
After Effects
Illustrator
Figma
After Effects
Illustrator
Figma
___________________________________________________________________________________________________________________
___________________________________________________________________________________________________________________
01 Getting Started: Yummly Intro and Added Feature
___________________________________________________________________________________________________________________
What is Yummly?
Yummly is a kitchen platform that gives recipe recommendations personalized to the user's tastes, nutritional needs, and skill level. Users can discover recipes, meal plan, and create shopping lists. Smart kitchen appliances can also be integrated into the platform.
Creating a new Yummly feature
To enable Yara to be a more helpful companion, I created the Fridge Inventory feature, which sits as a second toggle to the Shopping List. It allows users to record the items they bought by scanning its barcode. The name of the item, when it was bought, and an estimated expiration date is recorded.
With this feature, users can keep track of the ingredients in their fridge, and Yara can monitor these items, alerting users about ingredients that are low or nearing expiration.
Fridge Inventory
To enable Yara to be a more helpful companion, I created the Fridge Inventory feature, which sits as a second toggle to the Shopping List. It allows users to record the items they bought by scanning its barcode. The name of the item, when it was bought, and an estimated expiration date is recorded.
With this feature, users can keep track of the ingredients in their fridge, and Yara can monitor these items, alerting users about ingredients that are low or nearing expiration.
___________________________________________________________________________________________________________________
___________________________________________________________________________________________________________________
02 Novel CUI Features
___________________________________________________________________________________________________________________
CUI Feature 01
Yara can make recommendations based on user’s Fridge Inventory, past ratings, and current cravings.
After opening the Yummly app, users can start up Yara by selecting the icon on the homepage or navigating to My Connected Kitchen. By accessing the user’s Fridge Inventory (an added feature for Yummly that allows users to record items by scanning the label), past ratings, and current cravings, Yara can suggest recipes that are most convenient for the user.
CUI Feature 02
Yara can alter recipes to fit user’s dietary restrictions.
Yara can alter both Yummly original recipes and recipes found online to fit users’ dietary restrictions and preferences. In our case, the user wanted to lower their carb in-take, so Yara suggested alternative options. Preferences would be saved and applied the next time Yara is used.
CUI Feature 03
Yara can automatically set timers based on recipe instructions.
Yara can remember recipe instructions and prompt users with setting a timer.
CUI Feature 04
Yara can suggest alterations to recipes and helpful tips when cooking.
Yara can find information online to suggest alterations to a recipe. In our case, Yara suggested adding peas and onions for boosting vegetable content in Pasta Carbonara.
Yara can also use information online to help users with unexpected difficulties they may have while cooking, like food sticking to the pan.
CUI Feature 05
Yara can search the web and convert measurements.
Yara can find instructional videos and convert measurements, ultimately freeing the user from coming to contact with their phones while cooking.
CUI Feature 06
By keeping track of the user’s Fridge Inventory, Yara can alert users of low and nearly-expired ingredients.
In our case, Yara knew that William was running out of eggs because of the data in his Fridge Inventory and the recipe requirements, alerting William if he wanted to add eggs to his Shopping List.
Yara can also suggest using up ingredients that are about to expire. Expiration dates would automatically be recorded when the user scans items to store.
CUI Feature 07
Yara can connect to the smart kitchen.
Yara can be paired to smart stoves, ovens, dishwashers, refridgerators, slow-cookers...etc. Using recipe instructions and real-time data from kitchen appliances, Yara can adjust settings based on user commands
CUI Feature 08
Based on the user’s meal plan schedule with Yummly, Yara can remind users of pre-cooking steps, like defrosting, marinating, or picking up additional ingredients.
Yara can access the user’s meal plan schedule (an existing feature within Yummly) and remind users of essential pre-cooking steps hours or days before their scheduled meal.
___________________________________________________________________________________________________________________
___________________________________________________________________________________________________________________
03 Research, Surveys, and Interviews
___________________________________________________________________________________________________________________
What did I do?
The survey that was sent out received 24 responses. I then interviewed 4 participants to measure their challenges, motivations, and habits for cooking at home.
The survey that was sent out received 24 responses. I then interviewed 4 participants to measure their challenges, motivations, and habits for cooking at home.
Cooking Proficiency
Beginner
22%
Intermediate
65%
Advanced
13%
Complexity of Meals
Low Effort
43.5%
Medium Effort
57%
High Effort
0%
Cooking Frequency
Never
0%
Rarely
16.7%
Sometimes
25%
Often
50%
Always
8.3%
Target Audience
Beginner to intermediate cooks looking to cook at home and explore new recipes but lacking the necessary knowledge, skills, or time.
Their top 3 cooking challenges
1. Deciding what to make
2. Timing of cooking steps
3. Making ingredient substitutions
Challenges with digital devices while cooking
1. Getting device dirty
2. Screen doesn’t stay active
4. Distraction, food burns
When being interviewed, participants were mainly concerned with...
Food Spoilage
“How long has it been since I got this item? Is it still safe to eat?”
Their is a common value among many participants to prioritize ingredients that are about to spoil when cooking. But many are unable to remember when they got it and if the ingredient is still okay to eat. From this, I enabled Yara to track the purchase dates, estimating expiration dates, and reminding users to use these ingredients before they spoil.
Timing of Steps
“Sometimes I forget about my pasta, because I’m busy making the sauce. So, it overcooks.”
Some participants struggle with coordinating the timing of different cooking steps. So, I enabled Yara to help by automatically suggesting timers for various tasks and prompting users at the right moments to add or start cooking specific ingredients. Users can ensure that all components of the meal are perfectly cooked and ready at the same time, preventing some ingredients from burning while others remain undercooked.
Lack of Preparation
“Oftentimes when I get home, I want to cook meat but I forget to defrost it. I don’t have time to wait 2 hours and I prefer not to microwave it, so I usually go for something else.”
Many participants mentioned forgetting to prepare ingredients in advance. So I enabled Yara to assist by reminding users to defrost or marinate ingredients according to their Yummly meal plan schedules, ensuring they're ready to start cooking when needed.
___________________________________________________________________________________________________________________
___________________________________________________________________________________________________________________
04 Customer Journey, Dialogue Framework, and Edge Cases
___________________________________________________________________________________________________________________
CUI User Journey
The map outlines the user's journey, capturing each phase from selecting a recipe and cooking it, to evaluating the meal and planning for subsequent meals.
The first user scenario outlines the process of requesting recipe recommendations, cooking the selected recipe, and preparing for the next day's meals. The second scenario addresses a specific case where the user already knows what to cook, and Yara responds by facilitating the cooking process accordingly.
The map outlines the user's journey, capturing each phase from selecting a recipe and cooking it, to evaluating the meal and planning for subsequent meals.
The first user scenario outlines the process of requesting recipe recommendations, cooking the selected recipe, and preparing for the next day's meals. The second scenario addresses a specific case where the user already knows what to cook, and Yara responds by facilitating the cooking process accordingly.
Script Framework
Developing a script for the animation allowed me to contextualize the user's specific situation and explore potential responses from Yara.
Developing a script for the animation allowed me to contextualize the user's specific situation and explore potential responses from Yara.
___________________________________________________________________________________________________________________
___________________________________________________________________________________________________________________
05 CUI Design Process
___________________________________________________________________________________________________________________
Designing and Animating Assets
I began by researching Yummly’s existing brand style. I then designed multiple scenes and screen assets that felt aligned with Yummly’s brand – colorful and hand-drawn while also being flexible and adaptable.
All assets were created in Illustrator and transferred to After Effects to animate.
Designing and Animating Kinetic States
A key goal with designing the kinetic states were to have them be as easily recognizable as possible and distinguishable from other states. Since these states would be relatively small on the user’s digital device, it was crucial for the design to be simple and clear.
I wanted it to be representative of Yummly and cooking, so I took inspiration from a carrot and the traditional Yummly orange color.
The designs were initially brainstormed in Figma, transferred to Illustrator for detailed designing, and eventually to After Effects to animate.
A key goal with designing the kinetic states were to have them be as easily recognizable as possible and distinguishable from other states. Since these states would be relatively small on the user’s digital device, it was crucial for the design to be simple and clear.
I wanted it to be representative of Yummly and cooking, so I took inspiration from a carrot and the traditional Yummly orange color.
The designs were initially brainstormed in Figma, transferred to Illustrator for detailed designing, and eventually to After Effects to animate.
