Pantry
App that generates recipes and food inspiration
to help combat cooking fatigue.
Challenge
Many home cookers are left uninspired in the kitchen. Home chefs have ingredients in their kitchens, but often prepare the same dishes over and over again. This dilemma leads to cooking fatigue, where people cannot decide upon what to cook.
Solution
Pantry is a mobile app that addresses the lack of inspiration in home kitchens by generating recipes according to available ingredients. The main features of Pantry are 1) serving as a recipe generator; 2) providing information about specific diets; and, 3) serving as an informational resource for current food trends.
Tools
Figma
Adobe Creative Suite
Slack
Miro
Zoom
My Role
Sole UX/UI designer
Process
Research
Secondary Research
Through secondary research, I found that figuring out what to cook on any given day could be challenging for several reasons. Those reasons include:
- Having a lack of inspiration around new recipes, not knowing what to cook;
- Dietary restrictions; and
- Being unsure of what to cook with ingredients that are already in the kitchen and pantry.
Primary Research and Screener Survey
After my secondary research, I wanted to screen interviewees based on people who had a general interest in home cooking. I created a research plan, then issued a screener survey via Google Forms to people who had a general interest in cooking. After posting the screener survey in several places including Slack and Reddit, I received feedback from several people.
Interviews
Next, I conducted five interviews based on people who fit the criteria. The interviews were conducted over Zoom and focused on people’s home cooking habits. The interviews helped me better understand common issues people may encounter when cooking at home. Additionally, I was able to better understand consistent themes.
My key findings from the interviews were:
- People tend to seek cooking inspiration from external sources like social media, magazines, and cookbooks.
- Oftentimes, people tend to cook using the same ingredients and will find recipes that match those ingredients.
- Budgeting was a general interest, with most interviewees citing the need the stretch out their ingredients as much as possible.
After conducting the interviews, I reviewed the transcripts and synthesized the information by drafting affinity maps, then creating empathy maps, and lastly, generating personas. This process helped me get closer to my design solution because I was able to effectively synthesize all information gathered during the interview phase and gain a better understanding of the audience and target user. This phase of the project allowed me to pause and understand the “who” I would be designing for.
Affinity Mapping
After conducting the interviews, I listened back to the interview transcripts and took detailed notes. In Miro, I added each separate idea as an individual sticky note to a whiteboard and generated an affinity map, grouping similar ideas. After conducting the interviews, I reviewed the transcripts to generate notes abstracted from the interviews. From the notes, I generated affinity maps with a total of forty-three sticky notes.
The affinity map focused on the following themes:
- Inspiration Sources
- Budgeting Preferences
- Meal Prepping Preferences
- Type of Cook
Empathy Maps
After affinity mapping, I drafted empathy maps and was able to determine two unique types of users.
Personas
After a deeper look into both empathy maps, I created two personas. Determining these personas helped inform the next steps in my design process because they made me understand the specific types of people who would potentially use the app. This part of the process was important because it really made me think about the users’ perspectives, more so than any other part of the project.
Ideation
HMW – Problem Statements (HMWs)
At this point in the process, I began looking for ways to solve specific goals. To start, I generated several “How Might We?” statements to begin the brainstorming process. It was important for me to determine HMWs because they were pivotal in brainstorming, developing, and understanding all possible avenues to solve specific goals and tasks.
HMWs helped me question different solutions and ultimately was the catalyst for the initial design iterations. The following statements were based on my primary and secondary research findings:
- How might we make it easier for people to decide what to cook?
- How might we help with budget strategizing?
- How might we help people stick to certain diets?
- How might we help people cook with ingredients they already have?
Next, I focused on two specific HMWs and ideated several solutions to solve these statements:
1) How might we help people cook with ingredients they already have?
- Idea 1: People can select all of the ingredients they have available in their kitchen.
- Idea 2: People can list what’s in their kitchen, and words will auto-populate.
- Idea 3: Swipe right or left if the ingredients are available.
- Idea 4: Swipe right or left on recipes that are possible with ingredients available in the kitchen.
2) How might we help people stick to certain diets?
- Idea 5: Select certain diet restrictions to filter recipes.
- Idea 6: Users can keep a record of recipes they’re made to stay on track with certain diets.
- Idea 7: Users can access a blog that hosts dietary inspiration and information.
- Idea 8: Users can recommend recipes based on certain diets to help keep others on track.
User Stories
After drafting HMW statements and brainstorming solutions, I developed the following user stories. These stories helped me begin to formulate the sitemap and eventually the user flows. These questions guided what the overall functionality and structure of the app would look like. The user stories generated were:
- As a user, I want to select ingredients available in the kitchen.
- As a user, I want to filter recipes by dietary restriction.
- As a user, I want to view trending food and recipes.
Site Map
After determining the user stories, I drafted a site map to depict all of the key features of the app.
User Flows
I then generated user flows based on the user stories and site map. These flows helped me understand how the app should function. I focused on the three main user flows derived from the user stories.
Sketching
Sketching with pen and paper is something I always go to as part of the creative process. I aimed to not get too caught up in the details at this stage and let the sketches be messy. This helped with brainstorming the design and kept me from being too constrained or stuck on an idea.
Design
Wireframes
After drafting HMWs, sketches, and user flows, I brought the components into Figma and drafted low-fidelity wireframes. This was the first part of the process where I focused on spacing, pixel sizing, and balance in the design.
The elements of the design that I played with to incorporate into the wireframes were items like pill menus, selection grids, and search features. I wanted to find design solutions that made the experience more visual, rather than text-heavy for the user. For areas where items would be selected, I often opted for using simple vector illustrations to slightly gamify the experience for the user.
Mood Board
After drafting low-fidelity wireframes, I made a mood board based on the look and feel I wanted to aim for in the app’s design. The mood board helped act as inspiration for the ultimate design of my app. The process of putting the mood board together taught me what I was and wasn’t looking to emulate in the design.
Style Guide
I started putting the style guide together after drafting a simple logo, then followed that with the color palette. The rest of the style guide fell into place while I continued working on the wireframes. I really wanted a bright and high-contrast color palette to help with the readability of the app, while also adding a playful edge. For fonts, I ended up mostly using Montserrat because the font has nice tracking, a modern feel, and is not too distracting. For the headers, I opted to use Poppins bold because it has a wide, chunky appearance, but also comes across as warm and inviting.
Hi-fi Screens
While working on the hi-fi screens, I wanted to convey an app that was colorful and high-contrast, but also spaced nicely, simply, and easy to follow. This stage of the process saw a lot of iterations and versions of the design before finalizing what I ultimately landed on.
Some of the elements that I kept from the wireframes included the search and add ingredients feature. I really liked this screen and feature because it would allow a user to easily find ingredients by searching or simply looking at vector graphics of ingredients available on the screen. This screen added a slight gamification edge to the app.
Elements that were adjusted from the wireframes included making certain features smaller, specifically areas like “Browse Dietary Restrictions”. These items were way too large in the original design and I opted to create more of a visual list feature, where the columns spread the entire width of the screen, but the row height was much shorter than originally planned. This change helped with overrall readability and accessibility.
Testing
Prototype
After the hi-fi screens were finalized, I used Figma to create a prototype, focusing on the main red routes of the app. This process involved a lot of iterating, testing, troubleshooting, and rerouting.
The elements of the design that I played with to incorporate into the wireframes were items like pill menus, selection grids, and search features. I wanted to find design solutions that made the experience more visual, rather than text-heavy for the user. For areas where items would be selected, I often opted for using simple vector illustrations to slightly gamify the experience for the user.
Usability Testing
After drafting the initial prototype, I conducted a series of user testing sessions via Zoom. A total of five participants were tested and were asked to complete several tasks in the app, with a focus on three main user flows. The findings from the testing were:
Issue #1 — There was no screen where an end user could view all ingredients they’ve selected.
Issue #2 — Most end users tried selecting “My Ingredients” when prompted to make ingredient selections, rather than the food category pill menu at the top of the home screen.
Issue #3 — Most users had issues with scrolling when selecting an ingredient.
Synthesizing and Redesigning
After gathering feedback from the user testing, I synthesized the results and determined which changes were absolutely necessary to the design and prototype. The following changes were made:
- An additional screen for saved ingredients, as well as intuitive navigation to and from the screen
- Linking the “My Ingredients” button on the home screen to the saved ingredients screen and adding the word “ingredients” above the pill menu at the top of the home screen.
- Creating a static screen to go along with the overlay.
Usability Testing
After drafting the initial prototype, I conducted a series of user testing sessions via Zoom. The objective of my usability testing was to discover any issues that would keep users from using the app easily and intuitively. The testing would inform how the app could be further improved and developed. The main tasks that participants were asked to perform were:
- Selecting ingredients available in the kitchen;
- Filtering recipes by dietary restriction; and,
- Viewing current food trends
A total of five participants were tested and were asked to complete several tasks in the app, with a focus on three main user flows. The findings from the testing were:
Issue #1 — There was no screen where an end user could view all ingredients they’ve selected.
Issue #2 — Most end users tried selecting “My Ingredients” when prompted to make ingredient selections, rather than the food category pill menu at the top of the home screen.
Issue #3 — Most users had issues with scrolling when selecting an ingredient.
Synthesizing and Redesigning
After gathering feedback from the user testing, I synthesized the results and determined which changes were necessary to the design and prototype. The following changes were made:
- An additional screen for saved ingredients, as well as intuitive navigation;
- Linking the “My Ingredients” button on the home screen to the saved ingredients screen and adding the word “ingredients” above the pill menu at the top of the home screen; and,
- Creating a static screen to go along with the overlay.
Reflection
This project taught me a lot more about the process of creating an app from start to finish, especially centering around the user’s perspective. I notice a big difference in how I’m approaching and thinking about user experience issues and ways of resolving them. I’m incredibly appreciative of all the survey and user testing participants – their insight was invaluable throughout the process.
Some of my key takeaways from this project are:
- User experience cannot exist in a vacuum! Relying on the target audience and fellow designers as much as possible is the best way to tackle design challenges. When in doubt, ask questions.
- Design research is a best friend, but don’t be afraid to try something outside of the lines. Nothing bad can come from brainstorming and iterating, it’s all just a part of the process.
Looking back, if there was anything I would have done differently, I would have researched cooking apps and their design in more depth. There may have been additional features and solutions I could have discovered through further research, as well as common design tropes to gravitate toward or avoid. However, for the sake of this project, and given the timeline, I feel that a sufficient amount of research was conducted. Moving forward, I will definitely budget for more time in this area.
I love user interface design – coming from a graphic design background, there is a lot of overlap, but the human interaction element is much more pronounced in user experience. I feel much less siloed working on UI/UX projects, which is really exciting because I get to research and interact with the groups I’m designing for! Looking ahead, I’m ecstatic to continue developing as a designer and feel much more empowered to tackle design challenges after this particular project.
