Cook Thru Mobile App - Student Project

Cooking is Chaotic. How can our phones help?
Following a recipe on your phone is incredibly annoying, but many still do it. Sticky screens, difficulty scrolling, and sleep mode are some of the frustrations the causal cook faces when using a phone. Is there a better way?
I created this project while I was a student in General Assembly's UX Design Immersive class.
Research
I compared traditional cookbook layouts to the mobile cooking experience. The Apicius, pictured below, is over 1000 years older than The Food Lab, but the general layout of information is the same: Ingredients are listed on the left and the recipe is on the right. 
Mobile apps attempt to follow the same format, but fail to show information clearly. Ingredients are listed above directions, forcing the user to scroll back and forth throughout the process.
If phones are so annoying to cook with, then why do so many people insist on using them? I conducted several interviews with home cooks of varied ages and experience to better understand their motives and frustrations. 
"I have to wash my hands a lot" and "I have to stop to look things up" were annoyances by many interviewees. But even if they own a tablet or laptop, users still choose their phone. Why?
"I don't want to get my other devices dirty"
"The recipe is already on my phone"
"I don't know.. I just don't use my tablet"
I began comparing cooking app's features. Though all below apps have useful features, they fail to address the frustrations my interviewees have. 
I next looked into how other apps break down step by step directions. How could these apps help inform a better approach for cooking? The below apps show step by step directions with an option to easily access more details. 
Personas
I created the below personas with my interviewees and above research in mind. Tessa and John have different approaches to cooking, but have similar frustrations with the process.
Structure
I worked on how to organize the app's features to best guide the user. The app's main priority is to create clear interactions with recipes, directions, and any additional information.
I created the below User Flow to explore how the user would choose and navigate a recipe. 
Sketches
I explored numerous screen designs to find the best screen layouts and interactions.
Wireframes
After settling on the app's look, I created more detailed wireframe progressions. The below iterates the process a user takes searching, choosing, reviewing, and following a recipe. Users of Cook Thru have multiple searching options such as exploring popular and seasonal recipes and filtering for food restrictions. 
When a user selects a recipe, he or she can scroll through the list of ingredients, displayed in large, clear type. The user can mark off ingredients already in possession, add ingredients to a grocery list, or find substitutions for something they don't have or prefer not to purchase.
The Directions screen displays step-by-step directions the user can easily follow. The user has the option to check off each direction or simply tap the bottom. If a step is unclear, the user can tap the question mark to view more details. 
A user has the option to rate and review the recipes once completed. Options to bookmark and view similar recipes also appear.
With the Live Directions tab, the user can view one step at a time. A busy cook can confidently glance at the screen without having to scan lines of text. Like in the step-by-step directions tab, an option to see more information for certain steps is available.
My interviewees have given positive feedback to these wireframes. Prototyping and testing would give a better idea of how easily users will interact with this app. I hope to spend time in the future exploring Cook Thru further. Our phones do so much for us. It's time they make cooking less stressful as well!
Back to Top