COLAB9 - Web App

Full Plate

Making the Most of What you Have

Problem Background

Imagine going on a vacation for a week but only planning for 3 days. 

It might be fun and spontaneous on day 4 and 5, but by the end, there’s a good chance it will seem quite the opposite. In fact, it might even feel like a waste.

Now change the setting and think of your fridge. What happens to the leftover ingredients when you run out of ideas?

We believe that throwing away food is never an intentional choice, so that’s why we created Full Plate. 

Full Plate helps users make the most of what they have by giving them options to utilize their leftover ingredients - whether it’s by creating delicious recipes or donating to enrich their local community

Research and Validation

According to the FDA, food waste in the United States is estimated at 30-40% of the food supply. This corresponds to approximately 133 billion pounds and $161 billion worth of food at the retail and consumer levels in 2010. This was especially apparent during the pandemic where households stockpiled goods for fear of scarcity and exposure to Covid-19. 

To validate our problem and verify the need for a solution, we gathered qualitative data from a sample of five participants by performing in-depth interviews. Our goal was to extract insights from their thought processes and experiences. 

During the affinity mapping stage, a major pain point that users shared was throwing away unused ingredients that got spoiled. Something interesting to note is that our participants were all used to planning meals and estimating since they were seasoned home cooks yet this was still a common issue. To quote one user, “that’s why we try not to buy too much anymore ‘cause of food waste.” Another said, “I plan to cook them but I don’t finish them in time and they get sad and wilty.” 

Based on the responses that we received from participants,  Delight created a user journey map to highlight the emotions and actions involved in the meal planning process. User personas were built to ensure that we were creating a product with the user in mind. 

To narrow down the problem space, Kristelle and Delight utilized the Jobs to be Done framework to pinpoint opportunities that the team could further explore. 

To get a sense of the competitive landscape, Kristelle performed an analysis to see what others were doing in the field and thought of possible ways on how we could differentiate ourselves.

Feature Comparison Matrix

Once the brainstorm cleared, we were ready to share the product spec with our engineers, Elleta and Sean, so we could start talking about feasibility and dive into building. 


Solution 

Pivot #1: In the beginning, we wanted to create an end-to-end process for users because we assumed that food waste could start as early as the shopping stage and last until the cooking stage. We ideated on features such as a grocery list, a running inventory of ingredients, and a recipe bank. We are extremely thankful to Helen and our mentor, Akhila, for giving us a sanity check and reminding us that the goal for the MVP was to be clear, intentional, and execute well on one or two things rather than attempting a bigger product and doing it halfway.

The feedback we received helped us focus on our user and their main objectives. We decided to concentrate on the end stage of meal planning - where users have exhausted most of their ideas and their ingredients. This is the time when users are most likely to waste food because they’re tired and there’s not much ingredients left. 

By giving cooks clear, straightforward options on what they can do with these leftover ingredients, Full Plate prompts users to action. 

We focused on two main user paths for our solution:

Recipes

The first user path focuses on cooking. We created the recipe search feature where users are prompted to enter ingredients that they have on hand. We optimized our app to help users find the closest recipe match for up to 5 of these ingredients. Through this, we aspired to answer the question, “What can I make with this?” 

Donate Food

The second user path focuses on an alternative to cooking. We recognize that not all days are created equal. Moods will change, and so will plans. However, this doesn’t eliminate the possible consequences. When a user decides to eat out, what happens then? We went back to our main problem and saw the link between food waste and food insecurity. By raising awareness about food waste and showing locations where they can donate, we could enable users to enrich their local community and create a full plate for others as well.

Design Considerations

  • Used colors normally found in food apps such as orange and yellow to convey the freshness but also added blues as they are known to be calming and provided a good contrast to our existing colors. Our users tend to be stressed when it comes to dealing with meal prep and food waste so this was a conscious design decision. 
  • To keep the look and feel of the app clean, casual and approachable so users can focus on what they want to achieve. 
  • Cooking times are shown for busy people who might be looking for something quick to make. 
  • Recipes come in the form of cards and modal pop ups to ensure that users have a better experience without having to deal with opening new tabs/windows for recipes

Lo-Fi Wireframes & Hi-Fi Mockups


The goal for Full Plate was to create a simple and straightforward experience for users so we used React JavaScript to create a more fluid user experience. Since this is a single page application, it was easy to work with, and had good documentation.

Learnings

Product Manager Learnings:

Kristelle Gumaru

  • Optimize for outcomes - In the end, the true objective is to deliver something that creates value for both the customer and the company. Be willing to try different approaches to reach the goal.
  • Communication is key - It’s essential that everybody is on the same page, so find a communication style that works for you and your team. Ask questions and be proactive in reaching out.
  • Trust your gut - If something feels off at any stage of the product process, be willing to take a step back and dig deeper.

Designer Learnings:

Delight Ng

  • Be very open with your team when you need inputs or get stuck. More heads are better than one! Talk things out!
  • Agile Team environment = Working closely with PM & Developers right from the start to understand how feasible something is.
  • Learned about working with design systems, Auto Layout, components & prototype animation in Figma.

Developer Learnings:

Elleta McDaniel

  • Dive into the unknown! A significant part of my time at Co.Lab was researching and attempting things I’ve never done before and I’ve learned so much because of it.
  • Prioritizing and alignment is a crucial part to getting things done. Communicate early and often so that everyone is on the same page.
  • Having a plan is essential, but being able to adjust and adapt is equally important. Learn to manage trade-offs.

Developers Learnings:

Sean Sipus

&

  • Learning to work based on the designer's design while at the same time working off the product manager's feedback was a new learning experience for me
  • Working with a new web developer was great because it taught me valuable lessons when factoring in their way of coding and making things work together
  • Communication is crucial in these circumstances and it is important when and how you voice your opinions and concerns

Full Team Learning

Fall in love with the problem, not the solution.