OVERVIEW
Overview
Our team was approached by an engineer that was developing a digital pantry app. It would allow a user to add items onto a list and see recipes using those items. The client was on a team that dropped the project and he wanted our help to revive and design it.
Roles and Responsibilities
As the design system specialist, I was responsible for creating the components within the app and the prototype, ensuring all deliverables were cohesive and followed good design criteria.
Senior Designers: TAs (Carol Barger and Lauren Reigner), Mentor (Dela Rostami)
Design Lead: Instructor (Monica Longmire)
Problem
“I'm tired of looking at my pantry and not knowing what's in there, and as such, not knowing what I can make. Usually, I just go out and buy more stuff specifically for a recipe I found, leading to more unused leftovers or items.
"Two big problems quickly became the priority:
- How to easily add items to a pantry list
- How to easily delete items from a pantry list
We needed to focus on this to display recipes using the most up to date items available to the user.
Audience
We narrowed down our audience to two key demographics:
- One would be users who are younger, a little more inexperienced in the kitchen, and have a shared living experience. For them, we focused on the recipes, different information about item storage, and other tips about cooking.
- The second are parents or someone a little older with no shared living space. They know how to cook but are not usually home enough to look through their pantry. They needed a way to view what they have from anywhere and plan meals for the family.
Solution
We decided to design an app that would allow our users to quickly add and subtract items from their pantry and view recipes with the most up to date inventory.
How Might We's:
HMW allow users to view what food items they have available at a glance?
HMW populate or allow the user to search for recipes that include ingredients that they have?
HMW connect the pantry list & shopping list?
Process
Discovery and Research
We started with a competitive analysis to figure out the main pain points of apps currently on the market. This allowed us to see weaknesses and some established mental models.
We also created a persona, empathy map, and journey map. These were based-off our first target audience as we determined them to have the most need for this app.
Personas
I created two personas for this process. I needed to round out my target audience and to do this I created these personas to research a little bit more and to make sure I had considered as many perspectives as possible.
Hungry Bob
Bio
Young professional living in a Seattle along with 3 roommates who are all extremely busy. Due to many roommates he has a pantry filled with food but isn’t sure what to do with it. He’s tired of looking at his pantry and not knowing what he can make with the ingredients he already has on hand. Usually, he goes out and buys more stuff specifically for a recipe he found, leading to more unused leftovers or items.- Make some headway into the corruption of government, local or federal
Drive
-To save money and time
-Want’s to make fast & easy meals
-Upgrade his meals and feel satisfied after
Goals
- Wants to learn how to cook with the assets he has around him
- Wants to be able to keep track of what food he has at home
- Wants to get to a point where he feels comfortable in the kitchen
- Wants to be able to rely on making food rather than take out
Pain Points
- Shares space for food so does not always know what is theirs to use
- Never taught how to cook or what meals to make on a regular basis
- Not able to create a lot of recipes due to lack of equipment, and space
- Dishes not always cleaned by roommates so equipment always changes
- Never buys a lot of food at once so ingredients are always changing
We used a journey map to show the process our persona would take from thinking about dinner plans to finishing eating. We used this to start ideating and prioritizing certain screens within the app.
Information Architecture
From the journey map, we created different scenarios to figure out what screens need to be present when. Our user stories are as follows:
- As a user, I want to see what food items I have at a glance.
- As a user, I want to see recipes based on what I already have.
- As a user, I want to connect my app with my groceries.
Below is one that we completed.
After deciding which screens we wanted to include, each team member sketched out their ideas for those screens. We decided as a team which way we wanted to pursue, and we took components from each sketch that we liked and combined them into a series of solution sketches.
Sketches
From there, we converted them to a paper prototype which allowed us to find and fix pain points quickly before bringing them into a digital format.
Paper Prototype
Digital Wireframes
Before conducting moderated usability tests, we went through several rounds of iterations after initial testing which helped us discover more pain points with potential users.
Iterations
Usability Testing
From there, we conducted moderated usability tests, and our tasks were:
- Add an item to the grocery list
- Find a recipe
- Change cooking experience level
The results were not promising, and we realized that it was not very usable. Therefore, we iterated further and removed the grocery list entirely. We replaced it with a receipt scan function so users did not have to keep their grocery list on our app. This created a quick way for users to add a lot of items with the correct amount. With this change, we also decided to give the users the ability to delete items from the recipe screen so they did not have to go back to the pantry list screen to delete an item. This solved the big problem of keeping a digital pantry app up to date quickly and easily.
This latest iteration received much better feedback during our unmoderated usability test. After testing 27 participants:
- 95% of testers rated ease of navigating the app at least a 3 on a scale of 1-5
- 80% said they would use an app like this
Client Response
After we conducted the usability tests on our most recent version it was time to present it to our client. We asked him a series of questions, below are his responses:
- Favorite features: Dark mode, the different filters for the pantry list, and how accessible the pantry was in the app
- Least favorite feature: The removal of the grocery list.
- Is this a viable product? Yes- How would you rate our final product and presentation? 5/5
OUTCOME
Next Steps
- Develop branding and UI
- A few more rounds of usability tests with mid-fi prototype
- Development of the app
Next Steps
- Community feature to communicate with users about custom recipes and other tips and tricks
- Partnering with a grocery chain to be able to add things when scanning an item while at the store, no need for any camera. Items would populate user's list directly after paying for items
- More extensive account functions adding recipes, favoriting recipes, some social aspects like commenting and liking etc.)
- Possible installment of grocery list function just without the ability to add it to pantry list, it would just be a static list
Final Thoughts
As a former freelance designer, I am used to doing everything myself and being able to explain every aspect because I did it. This was not that. Initially, I struggled to give honest feedback because I was too afraid I would lose the ability to work with them if they took it the wrong way. That was on me, I needed to refine my ability to give feedback so that it can be productive and the working relationship can stay intact. I learned how to do this with my team, and I am a better team player and designer because of it. Also, I needed to learn how to present other people's ideas well. In the past I have only had to answer for my own work, but now I had to present to the stakeholder on behalf of my team. I did this by preparing more for the presentation and asking a lot of questions throughout the process. My team was great at answering all the questions I had and it gave me the confidence to present well.
Next: K12 PLP
.svg)
