Cookbook

Users indicate their dietary preferences to have a curated recipe feed custom to their preferences.
A curated list of "favorite" recipes to reference later.
Default viewing options include filtering by cuisine.
Users may filter the recipe page to get a list customized to their liking.
Users may add their own recipes and view them from their profile page.
Recipe including spice level, difficulty, time to prepare, ingredients, and method.
Create a shopping list to send to Instacart, a grocery delivery service.
With in-app Instacart integrations, items from the shopping cart may be added to an Instacart order.

Inspiration

Due to the pandemic, many people had to follow shelter-in place policies and couldn’t go out for food as easily. Due to fear of coronavirus, most people at home had to limit the number of times they went to get groceries and the means in which they get food. Through personal experiences and observation, we realized most people started to cook at home since they thought it was safer and so much free time. We wanted to make an app that helped make people’s cooking habits easier by providing accurate measurements for serving and being able to look up a variety of foods quickly. To deal with the grocery issue, we wanted to enable our users to be able to order ingredients that they need from the safety of their own home, thus Cookbook was born.

What it does

Cookbook is a tool for users to find inspiration, organize, and create recipes with ease. The user begins by indicating their dietary restrictions, allergens, and preferences. This is used to determine the recommendations on the recipe page. On the recipe page, the user also has the option of filtering recipes to their liking. Filters include difficulty of preparation, spice level, popularity of the dish, and time to prepare the dish. From the recipe page, users may save recipes for later by selecting the star icon which will add the recipe to the “favorites” page. On each recipe card, the user is able to choose the ingredients they do not have on hand and add them to a shopping list which is rendered on a “shopping cart” page. For convenience, the user is able to select certain items from the list and send an order through Instacart right from the Cookbook app.

We focused on these problems:

How Might We... get ingredients from the safety of our own home?
How Might We... allow users to browse different foods quickly?
How Might We... make it easier for users to change ingredient measurements needed for different servings?
How Might We... curate recipes to the user based on diet or allergies?

Solutions:

HMW #1: We added a shopping cart feature that allows users to add ingredients they need into the cart and have it delivered to their homes via Instacart.
HMW #2: By adding categories at the top of each screen, we allow users to be reminded of what categories they can browse by cuisine.
HMW #3: Users sometimes want to update the number of servings they want to make depending on who they are cooking for and what occasion, so to help with this, we made a feature in which users can type the number of servings they would like to make and the measurements for the ingredients needed are updated and calculated.
HMW #4: To help users curate foods or show only options that are relevant, we offer the user to mark down their allergies and food preferences in their profiles and additionally, they can filter out options based on popularity, spiciness, time and cooking level.

Challenges we ran into

Most of us were pretty new to Figma, so there were times when we had to refer to Google or others to solve a design issue. Another problem we had was layout, we had to do a few iterations and really put ourselves in the user’s shoes to understand how they may navigate the page. When we had a cluttered app page, we decided to remove elements that were not needed since we wanted a clean, simple interface.

Accomplishments that we're proud of

Empathizing with users and identifying their pain points allowed us to grow as designers and create a product that is not only easy to use, but beneficial to the target users we had in mind. Also getting more experience with Figma as a design tool allowed us to get more familiar with the tool and learn skills we can carry with us for future design projects.

What we learned

During the ideation process, we surveyed several individuals about their cooking habits and how COVID-19 has affected them. We learned that many people were cooking their own meals more often now than before the pandemic. Many respondents indicated their frustration with finding recipes online were related to cluttered websites and advertisements. And due to COVID-19 many expressed fear about leaving their house for the grocery store. We used this feedback in our brainstorm and design process to develop the features of the app.

What's next for Cookbook

Since we only had two days to come up with a working design, we hope that our next steps would be to test with users and gather feedback on how we can better improve the Cookbook. Some things we may keep in mind in the future are perhaps including video snippets of recipes for visual learners instead of just reading the recipe.