Scratch App

An app that helps cultivate a cooking habit
ROLE | UX/UI Designer
TOOLS | Figma, Butter, Miro
DURATION | 4 Weeks
Cooking is a big part of people's lives. It has become one of the top New Year’s resolutions by many. There are about 75% of people who would prefer homemade meals versus take out. I wondered, "why do people continue to eat take out and what's preventing people from cooking at home?"
Project OVerview
Scratch is an app designed to help grow a cooking habit for homecooks of any level.
The Challenge
Cooking is a big part of people’s lives. It ranks as one of the top New Year’s resolution by many. About 75% of people prefer homemade meals than take out. Yet, many people still eat out about 5 times per week. How do we help people grow a cooking habit at home?
THE SOLUTION
Create a MVP app that allows home cooks of any level to alleviate the burden of cooking by tracking what’s in their pantry, find creative recipes, plan their meals, and learn more tips and techniques.

Starting the Research

Mis en place, research edition

To make sense of this, I relied on research to understand what’s really happening behind this problem. Before starting on my research, I created a research plan to help guide my research.

Time is the most important factor
About 45% of Americans don’t enjoy cooking and more than half of them still eat out about 2-3x per week. However, 75% say they want a homemade meal.

The top reason that people don’t cook at home is time. People get busy and cooking becomes an afterthought
New chefs rising amidst the pandemic
Going into research, I had the thought that many people didn’t cook at home as much. However, the COVID-19 pandemic helped foster a new cooking habit in people. This resulted in 75% of people with increased confidence in the kitchen.

This led to:
  • Decrease in food waste
  • More experimentation in the kitchen
  • People continuing to cook at home beyond pandemic times
A new discovery - make it last?

Even though people want to continue cooking beyond the pandemic, there is a new shift in the problem.

Research is showing that people will start going out to eat back to pre-pandemic levels during the second half of the year. When people were asked, they mentioned:

Now we’ve learned that people are starting to cook more due to the pandemic, the new problem is how do we help them keep up with their new cooking habit?
How do cooking apps compare?
To size up and see what others are doing in this problem space, I sought out direct competitors and analyzed what’s working well and what’s not.
Fostering conversations around the cooking experience
Conducting user interviews with novice cooks helped me understand their cooking process and why they want to cook more. Using my interview guide helped me focus on what I wanted to learn from them.

To synthesize my findings, I used an empathy map to help me uncover patterns that lead me to the user’s true need.

Benjamin the Beginner

Using Benjamin’s persona, I represented the user’s needs, goals, motivations, and frustrations, which helped me empathize with the user throughout the process. This also served as a touchpoint to remind me who I’m designing for.

Defining the Problem

Framing the problem
Once I learned about the problem space, I took my user insights and crafted them into POV statements. I translated them into how-might-we questions which I used to brainstorm as many solutions as possible. This way, I’m understanding the problem from the user’s perspective.
Collaborating at its best
Using mind maps, I facilitated a group brainstorming session. This gave me the opportunity to add more solutions to my list. With this collaboration, it also gave me time to think through the app’s business value.
Preventing feature creep!
To keep the scope of the project manageable, I prioritized the features into a product roadmap. This also allowed me to organize what features I need to work on first in order to meet the MVP goal. As I continued on, I realized that there were P1 features that didn't affect the MVP. I had to re-organize and prioritize this roadmap so that it can reflect what truly needs to be part of P1 features.
*first draft of my roadmap
Understanding the interaction
To organize the content and understand the structure of the app, I created an app map. Organizing the parent screens gave me the understanding how to structure the rest of the content for the app and the levels of interaction within it.
Laying out the foundation of the app, I created a UI requirement document so that I can list high level screens and detailed requirements that were needed. After doing so, I created a task flow that allowed me to understand the way a user can interact with the app.
Adding another level to this, I explored other ways to show the user’s paths that they could possibly go through within the app. The user flow helped to understand the user’s decisions along the way.

This really allowed me to see other use cases that could realistically happen.

Creating Design Solutions

From tracking to planning
Sketching as many ideas as possible made wireframing a mid fidelity version easier. With trial and error, I explored where to place features and the layout of the app. Taking this time allowed me to play around with the content before finalizing what to move forward with.

After finalizing which sketches to transform, I turned my sketches into mid fidelity wireframes and prototyped them to take it to testing.
What can Scratch do?
Give users their time back and be able to plan their meals
By being able to plan their meals, users can anticipate the whole cooking process to be able to make a homemade meal.

This creates an opportunity to prepare, not only for those who are experienced in cooking but also to the beginners cooks.
Provide a grasp of what’s available
Scanning and tracking pantry items help users to know what ingredients are available so that they can get an idea of what to cook beforehand.

Users have valued looking at what pantry items are available to them in order to spark some creative recipes.
Promotes creativity through exploring recipes
Users can explore recipes in two ways: pantry-based recipes and general browsing. At the same time, users will be able to select multiple pantry items and generate a search to find recipes.

This gives the user the option to search for specific recipes that relate to what's available in their pantry.

Putting it to the Test

How usable is it?
Testing with mid fidelity wireframes was important to see how useful and usable the prototype was. It helped me understand the users’ mental model without losing the time to perfect the UI.

I was eager to see if participants would know how to interact with the scan feature or easily schedule a meal to their planner.

As testing went on, I learned what needs improvement and how usable the prototype was. I was able to gather data which led me to make recommendations for improvements.
Making changes to the MVP
Turns out that there were many improvements needed in order for the user to be able to confidently use the app’s features. Using a prioritization matrix, I took these recommendations and prioritized them based on high user satisfaction
Here are some revisions from the recommendations:

Branding

When developing Scratch’s brand, I wanted to convey a fun, friendly feeling overall to ease the stress that cooking might bring to the user.  Picking brand attributes that represented Scratch, I looked for inspiration and collected them on a mood board.

Finalizing the brand elements for Scratch, I created a style guide, which helped me create a cohesive and consistent look for the Scratch brand.

The style tile developed into a UI kit, which also included the components that were used to build the app’s design.

Putting It All Together

Taking everything I learned from research to testing, these final mockups show how each design decision was implemented and the iterations that got me to this stage. This includes the onboarding to guide the users to scanning grocery items easily.

Reflection

This project was challenging yet rewarding. During this project, I struggled with feature creep and wanted to prioritize as many features on the Priority 1 list. However, as I continued this project, it was clear that some features didn’t need to be required in order for the app to exist as MVP.

If I had more time on this project, I would want to explore how this app could be accessible for different kinds of users. In addition, exploring integrating a grocery shopping feature would also to user satisfaction and business value of the product.
Learn more about