COLAB7 - WEB APP

Karrot

Make life deliciously simple.

Background

Since the beginning of the pandemic in 2020, there has been a huge increase in Americans cooking at home. Many of them plan on cooking even after the pandemic is over because they found joy in cooking, the food is healthier, and there are more cost savings to cooking at home.

One-third of all food grown for human consumption in the United States goes to waste, and the biggest food waste happens in the home. Main reasons why include:

  1. People aspirationally buy ingredients they do not know how to cook
  2. Food gets lost and forgotten in the refrigerator
  3. Perishables go bad if stored improperly
  4. Misunderstanding date labels cause people to throw away food prematurely

User Pain Points

Our product manager and product designer talked to many millennial home cooks to learn more about how they grocery shop and cook meals, and pain points they experience throughout those processes.

We learned that there are many different types of home cooks. 

  • There are those who plan before they go grocery shopping and those who buy whatever is on sale or what they like at the moment.
  • There are home cooks who have a system so they know what to use up, and other people who are less organized.
  • They find recipes from all sorts of places: cookbooks, blogs, YouTube, Pinterest, Instagram, and TV shows.

What is more important about our users is what they have in common.

  • Many of them have a standard grocery list of ingredients to buy, and try one or two new recipes every week.
  • They care about excessive food waste so they have a strong desire to use up groceries instead of throwing them away. They hate the feeling of waste, and it hurts when they have to throw away food because it feels like throwing away money.
  • When they have leftover ingredients from a recipe, it is usually an ingredient they do not use frequently so they do not know as much about it in terms of proper food storage or additional ways of using that ingredient. This is when it is more likely that the ingredient will be thrown away.

This is where our team believes Karrot can help.

Landing on a Solution

The main feature we wanted our product to have is to remind users when their food is about to go bad so they can use and eat it instead of tossing it. From initial conversations with users, we received many ideas for other features that would entice them to use our product. Our team decided to prioritize our efforts on three features for the minimum viable product (MVP):

  1. A notification alert system for when food is about to go bad.
  2. An inventory tracking system because otherwise we cannot send notifications to users, so we created a place where users can input their items, and specify the quantity and expiry date.
  3. Random food tips to make the user experience more delightful.

While the product manager and product designer worked on the low-fidelity mockups and coordinated user feedback sessions, the developers started working in parallel on:

  • Initializing the development environment
  • Drafting the system design by breaking down the challenge into modular components
  • Allocating core responsibilities amongst themselves, which included technical research, programming, testing and deployment

Our team received three main pieces of feedback from our users after showing them the low-fidelity mockups:

  1. Users would not use Karrot as it were because the inventory process was too manual-intensive. Many said they would want to update their virtual Fridge right after grocery shopping, but would not spend a lot of time and energy to do so. They would rather use whatever system they have now instead of changing over to Karrot.
  2. Users would be more excited to use Karrot if there was the ability to search up or suggest recipes based off of ingredients they had. Our team had this feature in the future roadmap, but underestimated how much of an excitement factor it had for our users.
  3. Many users did not find our fun food facts elevate their user experience much or at all.

After the second round of user feedback, our team made major changes to Karrot.

Design Considerations

Based on our secondary research, our insights highlighted two main goals that the application is trying to solve for our MVP which are:

  • Ability to be reminded of what is in your fridge, and
  • Ability to generate recipe ideas based on the leftovers in your fridge

Our primary research reflected in our low fidelity mockups and user testing allowed us to uncover some usability insights that helped shape our high fidelity mockups. These insights included:

  • Embedding the users’ grocery workflow into the app to avoid duplicate entry and manual entry of items in their fridge
  • Understanding what call to actions are applicable in the pop-up notifications
  • Understanding the workflow better to inform our team how to build a sustainable application in the long term, and
  • Understanding how users feel about using the application to inform our team of the look and feel of our application (colors, type, and logo).

After doing more rounds of usability testing using our high-fidelity designs, we uncovered some more usability issues which informed us of key features to prioritize in our next development cycle, namely:

  • Moving our application to react native to make the mobile experience more seamless
  • Color consideration for accessibility purposes
  • Automating adding items in your fridge (receipt scanning, audio)
  • Expand notifications to include food tips (proper storage, labeling)
  • Dashboard and reporting

Our Final Solution

Our team created Karrot to help home cooks be more efficient and feel more confident in the kitchen. For the launch of our product, we have four features:

  1. Sign up and log in using only an email address
  2. An easy way to create grocery lists and track your kitchen inventory simultaneously
  3. Notifications for when your food is about to expire
  4. Recipe suggestions based on what you have in your fridge

Check out our high-fidelity mockups yourself by clicking on this link and clicking on the “play” button on the top right-hand corner.

Login/Logout/Signup

  • Users can use their email to signup and login.
  • If the email is incorrect, it will give the user the error message.

My Grocery List

  • Users can search up and add multiple items to their grocery list by clicking on the “Add Item” button.
  • When users check items on their list, they are automatically added to their Fridge.
  • If they make a mistake, they can easily uncheck items.
  • Users can easily remove all items from their List by clicking on the “Delete All” button.

My Fridge

  • Items added to the Fridge are listed by closest expiration date.
  • Users can select multiple items at one time and select the “Mark as Used” or “Mark as Tossed” button.
  • For both options “Mark as Used” and “Mark as Tossed”, a pop up will ask users to verify they want to mark as used or as tossed, or they can click on “Nevermind”.


Notifications

  • If there are items that are about to expire within two days, an orange dot will appear on the top right corner of the Fridge icon.
  • When users click on the Fridge icon with a notification, a message pops up that tells the user which ingredients are about to expire. User has two options: click “Got It!” or “Show Recipes”.


My Recipes

Users will find three recipe suggestions based on the ingredients they have in their Fridge, and they can click on the recipe title to find more details.

APIs

Karrot uses two APIs to support the grocery list, fridge inventory and recipe functionalities within the application. The two APIs and their corresponding endpoints are as follows:

  1. Shelf-Life provides information about the shelf life of a food item
  1. “Search” retrieves a list of food items based on the search query entered that are available via the API
  2. “Guide” receives detailed information, i.e. shelf life, storage tips about a single food item
  1. Spoonacular provides recipe-related data and other food-related data points
  1. “Find By Ingredients” retrieves a list of recipes based on the ingredients entered
  2. “Get Recipe Information” gets detailed information about a single recipe

Database

Karrot leverages a postgres database as its relational database to store user specific data such as the user’s grocery list and fridge inventory. To support a series of data manipulation language (DML) operations, we created several routes that allow the application to create, read, update and delete table records within the database based on front-end functionality.

Known Issues

Although the fundamental look and feel of Karrot is working, there are a few known issues, including:

  • Ensuring every single page is responsive
  • Working with external data sources / APIs that propose risk for Karrot if there are any data discrepancies that we cannot reconcile or they cease to work
  • Including proper error handling for undiscovered edge cases
  • Refractoring to remove any “code smells” i.e. outdated code/comments, duplicate code

Next Steps

Even though our Co.Lab experience has ended, our team has decided to stay together and build Karrot into a mobile app. We are excited about the concept of our product and believe that many people will use Karrot when we launch. One benefit of going through Co.Lab together is that we have an idea of what our team dynamic is like already and we will be using our Karrot mobile webpage as the basis for our mobile app MVP as well.

As we move into the next phase of building Karrot into a mobile app, we would appreciate help from you!

  • If you are a developer with mobile experience, we would love to connect and potentially become an advisor.
  • If Karrot seems like a product that you would use, we would like to stay connected and have you help test our product! Drop us a comment.


Team Learnings

Product Manager Learnings:

Juliet Chuang

  1. It is important to keep users front and center when creating a product they will want to use. For the problem Karrot is solving, many people have existing workarounds. It is important to give users a great experience in solving the initial problem of maintaining kitchen inventory and sending notifications. It is also important to include exciting features that will attract users like suggesting recipes based off of each user’s Fridge.
  2. I need to practice at being more clear and concise when communicating. Communication is really important as a product manager because you speak to so many types of audiences.
  3. Product managers need to have a strong point of view that is weakly held, meaning that it should change as they receive more input and uncover better paths to take. A reminder that product managers can be a hub of a lot of information, but they do not necessarily have the one true answer.

Designer Learnings:

Ana B.

  1. Fail fast and learn fast. Learn in an iterative approach to get the most value out of your product.
  2. Brainstorming with other people produces better ideas and fosters collaboration
  3. "If you want to go fast, go alone; but if you want to go far, go together." Cross-collaborating with people who have different skill sets will get you far.

Developer Learnings:

Xinjuan D.

  1. It is so important to break the large technical project into manageable small pieces. Although the large project sounds intimidating, breaking down the big task into manageable small pieces will make the logic simple and doable. 
  2. It is always good to trust user feedback and make meaningful decisions. By making the grocery list auto add and auto remove from the fridge, the user flow became much simpler. 
  3. I enjoyed the team's open communication and Agile working flow. We constantly exchange feedback and solve issues in a timely manner.

Developer's Learnings:

Anita L.

  1. Always look to prioritize the functionality that is going to make the most impact and produce a reasonable amount of return on investment, given the time and effort it takes to develop new features. Leverage user feedback to accomplish this.
  2. Product team members will have varying degrees of technical fluency, so it’s vital to simplify technical terms to effectively communicate the system design, approach and challenges with the greater team.
  3. Working in a team requires some structure for processes to run smoothly. Establishing a routine early helps the team navigate any project management related challenges.

Full Team Learning