Pantry
Solutions

3 Pantry Solutions mockups

Project Information

Pantry Solutions is an app that allows users to take a picture of their fridge and pantry, manually input ingredients, or scan their grocery receipts to receive a recipe with those ingredients. This was a team project with the goal to create an app that prioritizes the most useful features through user research, to compete in a saturated market.

Problem Statement

Many people struggle to find something to cook with ingredients available to them at home, and look towards technology to help them make decisions (ie. searching recipes, downloading recipe apps, etc.). Through research we found that competitor’s apps did not offer certain features users wanted, so we sought to create an app that would focus on the user’s needs in a recipe app.

Role

  • UX Researcher
  • UI Designer
  • Project Manager

Tools Used

  • Figma icon
    Figma
  • Adobe XD icon
    Adobe XD

Design Process

Outline of a head next to lightbulb growing leaves
Discover
  • User Interviews
  • User Surveys
  • Thinking Ahead
  • Competitive Audit
Notebook with pencil
Define
  • Project Analysis
  • Information Architecture
  • User Flow
Desk with pencil, pen, and ruler
Prototype
  • Wireframes
  • Usability Testing
  • Task Analysis
Palette with paintbrush
Design
  • UI Design
  • Interaction Design
Computer
Deliver
  • Hi Fidelity Mockup

Discover

Outline of a head next to lightbulb growing leaves

Product Research

Competition Analysis & Comparative Analysis

We started with a competitive and comparative analysis. We discussed multiple app’s strengths and weaknesses and compared features. Downloading and testing similar apps allowed us to see which features that we may want to implement in ours and which features were underwhelming.

Table data of product research

Usability Test

After analyzing our findings, we then performed a think-aloud usability test on one of the competitor’s app: Paprika Recipe Manager

Think-Aloud Tasks
  1. 1. Inputting ingredients
  2. 2. Searching for a recipe with ingredients
  3. 3. Saving recipe
Think-Aloud Result
Took 6:31 to achieve the 3 goals
Encountered 9 errors:
  • Confusion on what user needed to do on page
  • Unsuccessfully searching for recipe that had ingredients inputted
  • Clicked back button – unsuccessful search
  • Selected ‘Add to Favorites’ on recipe - fail
  • No feedback displayed on Save, user clicked Download again
  • Selected Bookmark button to find saved recipe - unsuccessful
  • Selected Menu tab to find recipe – unsuccessful
  • Showed recipe was saved twice, despite no feedback to user
  • Unsuccessful in finding recipe with inputted ingredients
Insights:
  • The categorized pantry helps with searching through your ingredients.
  • Search filters enable easier navigation.
  • Personalization of account is good for helping narrow down searches.
  • Too many options listed after inputting ingredients.
  • Some of the recipe database was inaccessible.
  • The in-app browser could be better and easier to navigate.
  • The navigation was confusing.
  • Some icons had false affordances.
  • Lack of allowable actions for the user’s intentions.
  • Lack of representation of the user’s expectations.
Task flow chart of Paprika Recipe Manager
Insights:
  • The categorized pantry helps with searching through your ingredients.
  • Search filters enable easier navigation.
  • Personalization of account is good for helping narrow down searches.
  • Too many options listed after inputting ingredients.
  • Some of the recipe database was inaccessible.
  • The in-app browser could be better and easier to navigate.
  • The navigation was confusing.
  • Some icons had false affordances.
  • Lack of allowable actions for the user’s intentions.
  • Lack of representation of the user’s expectations.

User Survey

A survey was sent to participants with questions of how important certain features would be to them in the app. Some competitors offered third party grocery delivery and I decided to remove it as a feature after indecisiveness from survey participants and the addition of this feature may take away from the primary function of the app.

Pie Chart of 92.3% Agree and 7.7% Neither Agree or Disagree

The concept of this application would be important to them in helping choose meals.

Pie Chart of 92.3% Agree and 7.7% Disagree

It is important that this app is able to take pictures of ingredients and recognize them.

Pie Chart of 53.8% Agree, 23.1% Disagree, and 23.1% Neither Agree or Disagree

It is important that this app offers a feature to buy & get ingredients delivered.

Pie Chart of 84.6% Agree, 7.7% Disagree, and 7.7% Neither Agree or Disagree

It important to be able to set dietary filters in choosing recipes.

User Interview

To further understand the user’s motivations for using the app, I conducted an interview and used this feedback to help construct the information architecture.

What information would be helpful in maintaining an inventory of ingredients?
  • Shelf life
  • Date purchased
  • Quantity
  • Past used ingredients
  • Nutritional value
  • Sorting by categories
What things do you consider when choosing a recipe?
  • How easy it is
  • Time it takes
  • Ingredients on hand
  • Healthy
  • Type of cuisine
  • Sorting by categories
What information do you want to see displayed in a recipe?
  • Ingredients
  • Measurements
  • Pictures & instructions
  • Difficulty
  • Time (Cook & Prep)
  • Dietary Restrictions
In what ways would you like to be able to find recipes?
  • Search by ingredients
  • Type of dish / cuisine
  • Search by name
  • Specific needs
  • Search by items on hand
Do you find tracking spending of ingredients or cost of meals useful?
  • Yes!
  • Yes, it is helpful to stay in budget with groceries
  • I like comparing cost of ingredients, so yes it would be useful
    • Q1 Conclusion:
      With the responses received, I continued to discuss with them the the most important information they would want on the ingredient page and narrowed it down to 4. 2 are editable by the user (quantity & date purchased), 2 are information we provide for the user (how to store the ingredient & it’s shelf life + nutritional info). Additional feedback was that they did not want to see all the ingredients displayed at once when opening the pantry page. I proposed categorizing the ingredients into “shelves” (Fruits, Vegetables, Grains, etc.) as this method would mimic their real life actions
    • Q2 Conclusion:
      The reduce scrolling or manual search time, using a filter component was a familiar part of an app’s UI for users and this we implement moving forward in the design.
    • Q3 Conclusion:
      What information is actually read when making a dish from a recipe? Interviewees were shown 2 recipes, one was a lengthier blog style post with multiple final dish photos and step by step instructions with accompanying photos & videos for each step. The second recipe displayed one photo of the completed dish and a list format for the ingredients / instructions. They found the straight forward recipe as something they’d want to be shown in the app and the blog style recipe was one they wouldn’t want to be shown but rather choose to search for themselves. Time, Servings, Calories, Ingredients, & Instructions were the information for a recipe we were going to move forward with.
    • Q4 Conclusion:
      Users are able to take a picture of their receipt to add ingredients to their pantry and do not have to rely on unbagging their groceries, lining everything up, and using the camera to accurately depict the ingredient. To expand utilizing a receipt, we suggested adding a receipt log to track spending of the ingredients and to also provide users a way to look back on when they added ingredients by receipt.

Define

Notebook with pencil

Project Analysis

Defining critical categories such as Design, Features & Functions, Content, Users, Stakeholders, and Technology.

Project analysis of Pantry Solutions

User Flow

User Flow of finding recipes with ingredients they have in their pantry.

User Flow of Pantry Solutions

Information Architecture

Information Architecture for Pantry Solutions

Prototype

Desk with pencil, pen, and ruler
Lo-fi Wireframe - Proposed Onboarding
Lo-fi Wireframe of Pantry Solutions
Early design version demonstrating user interaction of adding ingredients

Task Analysis

We recruited a user in our target audience to test a prototype to identify pain points in an early version of the design and to better under how a user interacted with the design. I conducted a Think Aloud Protocol with a Task Analysis and recorded the user as they completed their task.

User Testing Goals:

  • User goals & behavior understanding through task analysis
  • Usability & desirability of products and features
  • User testing specific tasks to asses interaction models
Think-Aloud Tasks
  1. Login or Create Account
  2. Add ingredients using camera method
Think-Aloud Tasks

Time to complete tasks: 3:27

Errors:

  • Did not like the sliders in onboarding to select their dietary allergies
  • Couldn’t find where to add ingredients
  • Forgot about task since she was unsuccessful in adding ingredients
  • Kept having to go back to navigation to remember where to go
  • Was not able to edit ingredients before adding
  • Text colors were hard to see
  • Button did not communicate action well
Insights

I created a better onboarding experience and more intuitive user interaction of adding ingredients. A bottom menu bar was added to replace the slide out hamburger menu to ease a pain point of the user always needing to go back to the menu to remember what is available to do within the app.

Wireframes
Wireframes of various screens for Pantry Solutions

Design & Deliver

Palette with paintbrush
Pantry solution mockups
Pantry Solutions mockups: Initial view, Sign In, Create an AccountPantry Solutions mockups: Select dietary, Select allergies, You're all set!Pantry Solutions mockups: Recipes, Filter, Save hintPantry Solutions mockups: Cookbook, Sun-dried Tomato Pesto ingredients, Sun-dried Tomato Pesto instructionsPantry Solutions mockups: How add ingredients, Search for ingredients, Search result: AvocadoPantry Solutions mockups: Camera recognized, Select quantity, Select ingredient, Strawberry ingredientPantry Solutions mockups: Pantry, Fruits, Strawberry, AvocadoPantry Solutions mockups: Pop up hint, Vegetables, Selected ingredientsPantry Solutions mockups: Account profile, Dietary Preferences, Wallet, Receipt Log