Problem
I love to cook and especially love experimenting with new recipes. In a standard recipe layout, ingredient measurements are listed at the top with the instructions below it. When printed or viewed on a larger screen, it is easy enough to glance back and forth. However, if following along on a phone, the small screen forces you to scroll back and forth to view the measurements for each ingredient and the instructions. Trying to scroll with dirty hands has become a pain point for me. I want to improve the experience of following a recipe on a mobile device.
Often, I get excited about the initial solutions that pop into my head. Rather than trying to repress these solutions, I quickly sketch or mock up the concepts. After researching and more ideation, I return to my original ideas and evaluate their value. This process helps me keep an open mind as the project moves forward.
My initial idea centered around a media styled notification to parse through a recipe while the phone is locked.
Research
I conducted a survey with 100 participants to learn about others’ frustrations. I gathered key insight that is guiding the early stages of the project. Major opportunity areas include:
Opportunity Areas
Layout
- “Some sites make it difficult to view the whole recipe, or are poorly designed with floating ads that block information”
- “Blog posts have too much wording. I have to scroll all the way down to finally get to the ingredients and recipes”
- “Ingredients are sometimes listed after instructions. Instructions can be long and difficult to keep looking back at”
- “Directions and ingredients list are often far apart so I need to scroll to see how much of something is called for”
Scrolling
- “I have to scroll with wet food fingers”
- “Scrolling to find the recipe beyond the blogging article is annoying”
Substitutions
- “I often want to know how to substitute”
- “Too many niche ingredients”
- “I don’t have all of the ingredients for recipes I find”
Unlocking
- “I have to keep opening my phone for every step”
- “Phone locks during cooking”
- “My phone locks while trying to cook and my hands are messy, hence why I like my laptop better”
Constraints
While the survey validated the need for the solution, it also highlighted that my initial idea was prioritizing the wrong solution. Mobile web accounted for a huge chunk of device usage while following on a device. With only 8% of people having multiple cooking apps, it became apparent that I can reach a bigger audience by focusing on a web-based solution. Though unlocking a device during cooking was a common pain point among survey participants, lock screen access would require a native app. Because the survey demonstrated limited usage of mobile apps, I will not be prioritizing a lock screen solution. With that said, I believe it can provide value, and will revisit it later.
Scenarios
I used scenarios to visualize the biggest pain points described in survey responses.
People browse recipes from an assortment of places, often comparing recipes against one another. There are plenty of websites dedicated to browsing recipes. I will focus on reducing friction while cooking for the scope of this project. The key takeaway from this scenario is the user’s frustration identifying and saving a recipe for later.
Scrolling with dirty hands, poor layout, and difficulty making substitutions were common frustrations of survey participants.
Design
I started designing with a focus on three opportunity areas: saving recipes for later, recipe layout, and ingredient substitutions.
After bringing on Steven for development, we looked for leverageable resources. Spoonacular API was a great fit with a database of recipes as well as other features we highlighted as opportunity areas. With the API in tow, we determined our easiest path for a MVP of the website and built a prototype to guide development.
Status
- Identified the core experience to represent in the MVP: categorized steps with a list of the ingredients and their measurements, along with controls that are easy to use while cooking.
- Shifting situations during COVID-19 put the project on pause. The MVP is back under development.