COLAB27 - Web App

Pantry Pal

Pantry Pal is a product which will make the task of meal prep less daunting for someone who wishes they cooked at home more.

Problem Background 

Our research shows that while the majority [78%] of potential users surveyed like to cook at home, they largely [65.4%] wish they were doing it more. 

Common themes that emerged from our research data revealed that this desire to cook more at home is motivated by a few key goals, namely: 

  • Wanting to try something new 
  • wanting to eat good-tasting food
  • wanting to save money 
  • wanting to be more healthy 
  • wanting to waste less food. 

We should address this problem for a couple of reasons

  • The more the customer orders food, the more money the customer has to spend every month
  • Ordering out is not always healthy as food delivery services don’t always use the healthiest methods and ingredients to prepare food
  • Users are having difficulty deciding what to do with their ingredients

Research Strategy

To validate our problem space and make sure our solution would be user-driven we conducted user research in the form of a survey (n=26) and a series of virtual 1-1 user-interviews (n=5). We purposefully sought participants who indicated they: currently cook at home or wish they cooked at home more frequently. 
From this research a few key themes emerged that helped focus our work on the product that would become Pantry Pal.

Research Insights

First, our big assumption was validated through research: users want to be cooking more

Forms response chart. Question title: Would you like to be preparing homemade meals more often?. Number of responses: 26 responses.
Fig.1: Screenshot from our research survey results showcasing how 65% of our potential users are interested in cooking more at home.

The users want to cook more, great! But what’s stopping them and how can we help? Here is what we discovered:

Key Insight #1:
Users choose to order food instead of cooking at home because their busy lives leave them lacking the time and energy to prepare food.

Fig.2: Quotes from research participants supporting Insight #1. 

Key Insight #2:
Users are eager to find recipes based on ingredients they already have at home since they’ll buy less and don’t want food they already own to go to waste. However, some feel they don’t really understand how to use what they have. 

Fig.3: Quotes from research participants supporting Insight #2. 

3) Users feel uninspired, unmotivated, and often experience decision fatigue when it comes to actually making something.

Fig.4: Quotes from research participants supporting Insight #3.

Meet Melanie, our Hopeful, Hindered, Homecook, and a perfect stand-in for our ideal user. 

Melanie is a young professional living with a partner — thanks to their busy work and personal lives neither have a lot of time or inspiration to cook. Still, Melanie is interested in cooking more at home to waste less food and save some money as long as the recipes are simple and the grocery shopping is minimal. 

Solution Explanation

How might we help Melanie explore easy recipes that don’t take a lot of time based on the food she has at home?

Introducing: Pantry Pal, a recipe discovery web-app designed to inspire busy, but aspiring, home cooks use the ingredients they have at home as a starting point for meals. Built with time in mind, Pantry Pal knows you are hungry now and will never show you an interesting recipe only for you to realize it is going to take 8 hours or requires you to buy 10 more niche ingredients.

The core features of our MVP include:

  • A Pantry Page where users like Melanie can catalog the ingredients they already has at home. 
  • A Recipe Results Page where users like Melanie can view recipes to potentially make based on their owned ingredients.
  • A Recipe Details Page where users like Melanie can view the full ingredients list and instructions for any given recipe.

Lofi & Hifi Mockups

View the interactive mobile prototype for Pantry Pal
View the interactive desktop prototype for Pantry Pal

Iterative Design Learnings

“I’d recommend it to me like a 10, because I’m a person who lets ingredients go bad and doesn't always know how to use leftover things in new recipes....

For my friends who already feel like they're good at cooking I’d give it a 7 because maybe they don't need this specific function. But if you are looking at how to use those ingredients, it's helpful” — Test participant #2

Users were excited at the prospect of using this product to improve their home cooking! 6/6 usability testing participants were able to successfully navigate our task flows and all users gave the product a 7 or higher on a 0-10 net promoter score rating. 

Their feedback during the testing process allowed us to make key updates to our designs centered on usability and learnability. Namely: adding some key headers, improving navigation clarity and page structure, and descoping some added features from MVP (like checklists on recipes pages that sync with the pantry) that would need more time to be user friendly at this stage. 

We also got some great feedback about context for use from our user testing. When asked during sessions, our participants were pretty evenly split about whether they use their phones or their computers to view recipes and plan meals. Right now we’re developing this product as a web application which suits this dichotomy of use really well!  

Implementation Details

Technical implementation
  • Where is it hosted? We chose to deploy our application using Vercel due to its efficiency in deploying front-end applications built with Next.js
  • What is your tech stack? Frontend - Next.JS/React
  • Backend - Flask/Python
  • Database - Redis/ NoSQL

High level journey of a request
  • login or continue as guest
  • Enter in your pantry
  • Hit submit to see suggested recipes
  • Click on recipe to see steps and ingredients needed and used
  • Update pantry by clicking on ingredients

Technical challenges
  • What was the hardest part of development? Managing the third party api from spoonacular
  • Does your app have any scaling issues? No it does not, if we wanted to expand by potentially adding different features then we most definitely could do so with the versatility of the spoonacular api
  • What are some key takeaways? Understanding github commands will save a lot of headaches when working in a group

Future Steps

Future steps for the team would be to decide if the team would like to commercialize the product as we learned that users find real world value in the product.


Product Manager Learnings:

Dexter Emmans

It was a great experience to work with a team of designers and devs. It was beneficial to learn how to prioritize features and how to manage a product backlog. I was also able to learn more about the users perspective and how to turn data from surveys into additional product value.

Designer Learnings:

Sarah Reif

Throughout this project I learned a lot about myself as a designer and a team member. Key above all else while working in a small team across multiple time zones with different strengths was flexibility and adaptability. Over the past few weeks we all did our best to adopt an “I can make that work” mentality that allowed the project to keep moving forward. 

As a designer a particularly interesting part of this project for me was stretching my skills to balance user needs with content and technical limitations. That meant understanding (and wrestling with) the functionality of our API to determine what kind of content the design would be able to display and parsing that for what would be most beneficial for our user in MVP. It was great to get to work with content in this way and as someone who has been a content writer for technical products before it was really eye opening to see how content translates into design and vis vera. 

Finally, I was really looking forward to preparing designs for effective handoff to developers. I learned a lot about communication, documentation, revision, and communication once again. Building this product as a web app added another interesting level of complication to this process as each screen had to be designed optimized at multiple breakpoints.

Developer Learnings:

Dimitrius Marino

Throughout this project, my understanding of effective communication, technical proficiency, and teamwork deepened significantly. The need for flexibility and adaptability was paramount as we navigated various time zones and integrated diverse skills, fostering an "I can make that work" mentality that kept the project on track.

Diving deep into Next.js and enhancing my proficiency in programming languages were key highlights. Equally, mastering Git commands and collaborative tools significantly streamlined our workflow. Exploring GitHub environments and branching, coupled with troubleshooting a MongoDB issue through Kaggle datasets, highlighted the value of technical exploration and persistence.

A considerable challenge was implementing the backend with the API. This task tested our problem-solving skills and required a thorough understanding of both the technology and our project goals. Overcoming this hurdle was a testament to our team's resilience and commitment to innovation.

Developers Learnings:

Raymond Ruenheck


Full Team Learning

As a team we learned how to work together towards a shared  goal despite having competing priorities.