03
My Recipe/

Cooking App

An app that gives users an easier way to discover, search, customize, and cook recipes.

OVERVIEW:
This is a passion project, as each member of our team loves to find and cook new recipes, but are frustrated with the current user experience of online recipes.

OBJECTIVE:
Improve the experience of cooking at home by making it easier and more enjoyable to find, share, and follow a recipe.

Process Deck

ROLE: UX/UI Designer / Project Manager‍

TEAM SIZE: 3

‍TOOLS USED: Figma

‍DURATION:
4 Week Design Sprint
(June 8, 2021 - July 9, 2021)


‍

INTRODUCTION
‍
So you may be asking yourself...Why are we making this app? Well, that’s a great question! There are so many recipe apps out there and as a team, we have all had different experiences when it comes to cooking and baking either family recipes or content online, and almost all of them have the same flaw .. which is that they are not user-friendly. We want to bring home cooks an updated way to interact with recipes. 

JUMP TO VISUAL DESIGN

Initial Observation
‍
‍To kick off our research, we took a look at many different recipe apps and truthfully, they’re all imperfect. But we were able to gather some great design patterns from each that we could incorporate into our designs.
‍
Some features on the MyRecipe app influenced by analyzing other recipe apps:
‍
- Step-by-step progress bar
- Recipe customization process
- In-app timer

USER INTERVIEWS
Interviewed: 4 Users
‍
The team had our own assumptions and frustrations with online recipes, but we needed to learn more from others’ experiences before we could start designing a solution. To identify our potential users needs and frustrations, we had to speak with them! We spoke to 5 potential users, all of whom use recipes often.
‍
These folks gave us a lot of food for thought, but it could all be summed up by a few main takeaways.
‍
1. The need for a simplified process of finding recipes. Every user expressed frustration with having to scroll through an entire blog post in order to get to the recipe.
‍
2. The need for a simplified process of reading through recipes. Users want to reduce scrolling involved while going through a recipe, especially when they have dirty hands while cooking.
‍
3. Ability to alter recipes based on ingredients they have on-hand or the number of people they’re cooking for

VIEW RESEARCH DECK


USER PERSONA
‍
With the needs, goals, and frustrations of our users put together, we needed to sum it all up to understand who we were designing for. That’s where our persona, Charlotte, came in.

How might we improve the experience of cooking by making it easier and more enjoyable to find and follow a recipe?

USER FLOW
‍
We kept Charlotte in mind when designing our user flow. It’s a seamless process, enabling her to conveniently search and find a recipe, customize it, and then very easily cook it.

BRAINSTORMING

INFORMATION ARCHITECTURE
‍
After conducting a card sort with 5 participants, we created our site map based on users’ expectationsHere, you’ll see that we have four primary navigation tabs, with the secondary navigation pages listed underneath.
‍
Home/Discover - This is where users expected to find curated lists of recipes for them to explore.
‍
Search - Users expected to find more specific search items here, such as searching by ingredient or meal type.
‍
My Recipes - This is where users would look to find recipes they’ve saved and shared, as well as a place where they can upload new recipes.
‍
Profile - This is the place users would expect to find account information, such as notification settings.

‍

USER FLOW

After synthesizing all of our research, our team conducted a design studio to start sketching out solutions to each of the main problem areas we uncovered.

WIREFRAMES
We started the design process with low fidelity wireframes. We wanted to have a way to iterate through many design options quickly. We combined all our initial sketches and ideas to visualize our flow and test it out to validate all of the design decisions before testing.

‍

Usability Testing
After a round of usability testing on our initial frames, we found some issues that needed fixing. There were several more, but these are the three major iterations in our hi-fi wireframes:

We worked with 6 participants, ages 23-63, all of whom have used recipe books, sites, or apps before.
‍
We tested the 3 main tasks of the user flow happy path:
 - Search for and find a recipe
 - Customize the serving size and ingredients of the recipe
 - Complete the recipe cooking flow
‍
Fortunately, we received outstanding results:
- 100% completion rate on all tasks at an average
- 92% confidence level across all three tasks
- Less than 1 error on average for all three task
‍
An average of just 2 minutes and 45 seconds to complete the entire flow.

VISUAL DESIGN

01
Set a timer while you are clicking through the recipe!

02
Easily see which step of the process you are on and be able to interact and skip to any step!

03
Create collections of recipes and share them with friends so they can add recipes also!

NEXT STEPS
‍
Our team is excited to continue working on this concept! Based on feedback, there is a real need for it and users would use it long term. These are some of the next steps we’re looking at:
‍
- Design an onboarding process. Multiple users gave specific feedback that they felt the app was easy to use, but they needed a second to orient themselves first. To reduce those moments of uncertainty, we want to take that orientation onto an onboarding flow, where users can receive tutorials on the more complex parts of the app so they can get cooking with no further ado!
- Add metrics to recipes to provide more context (ratings, views, number of times cooked, etc.)  
- Explore voice UI to potentially reduce scrolling with messy hands while cooking
- Implement interactions and animations to give users positive feedback and add delightWe’re also taking suggestions on a new name for the app!

Let me know if you have any ideas!

Next Project