CookIN
Duration
2021.04 - 2021.05
Team
Amanda Han, Max Hu,
Abiola Makinde, Neha Sajja
Abiola Makinde, Neha Sajja
Tools
Figma, Adobe After Effects
My Role
UX/UI Design, UX Research,
Interaction Design
Interaction Design
about the project
What is CookIN?
CookIN is a new way to facilitate remote social cooking experiences by reimaging how recipes are presented. Designed for a world where AR glasses are accessible and affordable, CookIN gives an enhanced presence to friends and families in different physical locations.
My Contributions
As a UX/UI Designer, I brainstormed and developed the core user experience. I helped to define our UI style and design UI elements. As an Interaction Designer, I designed UI feedback animations and prototyped them in After Effects. I also helped conduct user interviews and produce our product vision video.
user research
Food and socialization are central to our daily experience.
From eating out with friends to cooking at home with families, food has always been a crucial part of our social activities. However, social gatherings that involve food have been challenging since the start of the pandemic. For friends and families who live away from one another, cooking remotely together is a desired activity that currently has a poor experience. To understand the frustrations our potential users face, we conducted 16 interviews.
Core Insights
#1
Cooking and talking to others at the same time can be difficult with current products and services. Users end up resorting to minimal interactions to focus on their tasks at hand.
#2
Referring back to recipes while cooking is frustrating for users. Many users try to memorize the recipe before they start cooking.
#3
Uncommon ingredients in some recipes lead to entry barriers due to those ingredients being hard to find or not useful for other recipes.
Defining Our Goals
Primary Objective
Create a shared activity where all people can feel connected with family and friends.
Secondary Objective
Guide users through recipes they are interested in and allow them to experience culinary practices around the world.
Bodystorming
Learning by doing it ourselves
To understand the frustrations our potential users face, we conducted two rounds of bodystorming/testing sessions. We tested different ways to deliver information during a cooking session, for example, the difference between presenting the recipe via audio or text instructions. To simulate an AR environment, we held hand-drawn UI elements in front of the test participants and in their surrounding environment. We also tested the difference between using only audio or a combination of audio and visual aid when enhancing social presence.
Core Testing Insights
Balance is key
Balance is crucial when it comes to the amount of information the system presents to our users. Too much guidance from the cooking app reduces interaction between users.
Natural breakpoints
Almost all recipes have natural breakpoints where conversations between users take place.
Visual cues are vital
Visual cues are essential to a sense of connectedness. Being able to see your friend visually is vital.
Design Exercises
Designing our own design exercises
For this project, we divided our design process into three sprints. During each sprint, we used different activities to brainstorm, iterate, and expand on our designs. We started by analyzing the motivations behind a social cooking event and different forms of connection between people, and then we moved on to brainstorming and ideation.
Iterations
Taking the full advantage of AR
Design Decision 1
In Perspective Annotations vs. Tethered Annotations
In Perspective
Tethered
Instead of listing ingredients while users take them out of the box, we decided to tether them with information that can be useful to users. Our testing showed that tethering flat UIs was easier for users to understand than showing UIs in perspective.
Past Iterations
Design Decision 2
Your friend as a 3D avatar & using spatial audio
Many test participants indicated to us that seeing their friends greatly enhances the feeling of connection. But because too much interaction during the cooking session can be distracting, we had to get creative.
We were inspired by Spatial.io and how it can generate and display realistic 3D avatars in physical space. We also incorporated spatial audio so the voice of your friends would always come from the position of the 3D avatar.
Design Decision 3
Showing recipe steps & options to jump between steps
In our research, we discovered that users are frustrated by having to refer back to recipes mid-session. We also realized that users who are more seasoned cooks may shuffle steps around for many recipes.
We decided to design a current step indicator that also functions as a scrollable progress bar. Users can also expand the current step if it contains more detailed instructions or videos.
Past Iterations
Assumptions
CookIN is designed as an AR glasses application that operates based on the assumptions:
Final design
Whenever you miss bonding with your friends and families over food,
CookIN is here to help.
Step 0.
Imagine you just moved away from your friends and families. You wish you can cook and eat with them like you used to.
Step 1.
CookIN lets you choose the recipe you like from cuisines around the world. Simply schedule the cooking session with your friend to start.
Step 2.
Before your scheduled cooking session, our ingredients box will arrive at your doorstep so you don’t have to buy anything new or don’t want to.
Step 3.
When the time comes, put on your AR glasses and enjoy the cooking experience with your friend.
Start your CookIN session
Start your CookIN session by putting on your AR glasses and pressing start. You and your friend can see each other’s virtual avatar once both of you have joined the session.
Taking out ingredients
While you’re taking ingredients out of the box, labels for each ingredient and instructions on how to prep the ingredients would be tethered to them so you know what to do.
Checking detailed information
During the CookIN session, you can scroll through the recipe for previous or future steps. If you need more information on any given step, you can click to read or watch more, especially those that require certain skills, like folding a dumpling.
Enjoy the moments
Throughout the cooking session, you can capture key moments and easily share them with your friend.
Here's a video to introduce you to the CookIN experience that helps you understand our features.
Next Steps
Gesture controls, Peripheral vision & Cooking with more people
When UI elements appear in front of your eyes but are not tangible, it can be challenging to understand the distance, force, or position needed for gesture controls. When we designed the interactions in CookIN, we lacked consideration for sufficient haptic feedback.
Upon further research, we were inspired by the new Assistive Touch on Apple Watch. An appropriate next step for us is to incorporate haptic feedback into our gesture controls, like the hand menu shown here. It's also important to research and test how the hand might move during a typical cooking session that might falsely trigger an interaction.
Upon further research, we were inspired by the new Assistive Touch on Apple Watch. An appropriate next step for us is to incorporate haptic feedback into our gesture controls, like the hand menu shown here. It's also important to research and test how the hand might move during a typical cooking session that might falsely trigger an interaction.
Working proposal for a gesture controlled AR menu with haptic feedback in mind
We also received feedback on how to improve our UIs by taking full advantage of AR and one's peripheral vision. We can tether more UI elements to physical objects and effectively hide them in the background to minimize the amount of UIs one can see at a time. We can then allow users to bring these UIs from their peripheral vision to their central vision if they choose to.
Many of the decisions we made were based on insights on how two people can cook remotely together. But more than two users might be present for many social cooking settings. We need to conduct further research and analysis on inviting more people into a cooking session without overwhelming any participants.
Takeaways
Designing for AR & Rapid iteration
Designing for AR glasses is relatively new to us, but I believe we truly benefited from a more agile process of rapid testing and iterations. The testing results and peer feedback helped us reflect on our approach and polish our design with each sprint.
We also particularly benefited from the bodystorming sessions. Because we designed CookIN with assumptions about AR technologies in the future, we had to get creative. We used cardboard and clear plastic panels to approximate the size of UIs as if they exist in real life and used paper sketches as UI elements. The most important takeaway is that I learned how to create testing sessions or design exercises that fit our needs whenever we need them in the design process.
We also particularly benefited from the bodystorming sessions. Because we designed CookIN with assumptions about AR technologies in the future, we had to get creative. We used cardboard and clear plastic panels to approximate the size of UIs as if they exist in real life and used paper sketches as UI elements. The most important takeaway is that I learned how to create testing sessions or design exercises that fit our needs whenever we need them in the design process.
Thank you for reading!
