MOBILE APP - PRODUCT DESIGN + UXR
15 MIN READ

Pocket Pantry — helping people shop, prep, and store food

As someone who cooks meals for myself and others, I'm somewhat privy to meal planning logistics. This project was conceived as a solution to ease the mental stress of this everyday task. Using guerrilla-style UX research, I uncovered essential insights that both motivated and troubled meal planners.

These findings drove the design of Pocket Pantry, an easy, customizable tool for flexible meal planning from any perspective.

PocketPantry_animated.gif
TOOLS
Sketch
Invision
G Suite
Pen + Paper
TEAM
Sometimes you are your own team :-)
TIMELINE
2 months

the challenge

People typically eat 3 meals a day. Everyday. For their entire lives. Most people don't have the privilege to eat out for every meal, so many people cook for themselves and others. Getting to the cooking phase itself is a complicated task: it involves buying the right ingredients, making sure they are stored correctly, and preparing these ingredients.

 

So how we can make meal planning easier?

the solution

A mobile app for meal planners that is easy-to-use, flexible, and personalized. It reduces the stress of organizing and remembering, by helping you track your ingredients, create smart grocery lists, and cook your recipes. 

DISCOVERY

it begins with a survey

Before we can tackle our challenge, we need to understand who the meal planners are and why they plan their meals to better understand what problems we can be solving.

 

I designed and conducted a survey using Google Forms to help me uncover the motivations, behaviors, and struggles that people face when planning meals. Out of the 33 people that I screened, 28 meal planners (age 19 - 47) were included in the following results.

 
HOW OFTEN DO YOU COOK?

86%

cook at least a few times a week

HOW OFTEN DO YOU BUY GROCERIES?

82%

buy groceries once a week or less

HOW FAR AHEAD DO YOU PLAN
THE MEALS THAT YOU COOK?

54% plan the day of or before

32% plan a few days before

USER INSIGHTS

the pains of planning

PPicon-p1.png

Not enough time to plan ahead or complete plans.

PPicon-p2.png

Ingredients can expire before they are used.

PPicon-p3.png

Complex recipes can be hard to remember.

PPicon-p4.png

It takes discipline and hard work to execute.

PPicon-p5.png

Considering others' diets and having variety.

PPicon-p6.png

Can't plan for the unexpected!

the gains of having planned

PPicon-g1.png

Create balanced meals and maintain healthy diet goals.

PPicon-g3.png

Helps you stay within budget and save money.

PPicon-g2.png

Feel good about being healthy, organized, and responsible.

PPicon-g4.png

It can save time in a busy schedule.

PPicon-g5.png

You can eat what you choose!

 
DECISION-MAKING FACTORS IN COOKING
MEAL PLANNING STYLES
Ingredients are the biggest factor to consider when meal planning.

 

Meal planners often check what ingredients they have available in their home or what ingredients are expiring soon when deciding what to make.

50% of meal planners are either Structured or Impulsive planners.

 

Structured planners typically use notes, lists, and regular recipes that they go grocery shopping with. Impulsive planners will check their kitchen and cook using whatever is available. They might run out to the grocery store to pick up anything else they need on the same day. Healthy planners are focused on getting the right balance of food groups or nutrition in their meals.

USER PERSONAS

who are the meal planners?

Based on the survey data, I created two personas to exemplify my most extreme findings. I also fleshed out their profiles with marketing research for demographic statistics on millennials, college students, and young moms. Their social media usage, device usage, mobile devices, and brands were taken into consideration.

how might we help them?

Adrienne is an Impulsive planner.
She looks to cook

 

She doesn't plan every meal. She buys with some idea of what she likes, checks her fridge, and cooks what's available when she can. 

Adrienne needs...

  • Notifications for ingredients that are expiring soon

  • Reminders of what ingredients are available in her pantry and fridge

  • An ingredients inventory sorted by expiration date

  • Her inventory and recipe database to communicate so she can reuse ingredients across multiple recipes

  • Recipe suggestions for what she can cook based on what's available in her inventory

  • Help with budget tracking by adding a photo of her receipt to a stored grocery list

  • Step-by-step recipes to help her as she cooks

  • Tips on how to buy, preserve, and prepare produce

Victoria is a Structured planner.

She plans for the pan

 

She thinks ahead about what her family can eat and decides on recipes, shopping for groceries with a list so ingredients are ready to cook day-of.

Victoria needs...

  • To make smart grocery shopping lists and track what ingredients she's had in her inventory before.

  • An organized inventory of ingredients (by food group or storage area) with a profile to track expiration, cost, and health benefits

  • Different labels for a recipe, weekly, biweekly, or monthly shopping grocery list

  • To track meals for different diet profiles

  • To set notifications for food prep (i.e., defrost the meat)

  • To sync recipes from her network or online sources which can add variety to her cooking

 
PocketPantry_Sketch1.png

Early sketches and notes; brainstorming

the key screens, screen flows, and features.

 
WIREFRAME SCREENS

the core features

From the big list of features I wanted to incorporate into the app, I decided to work on the ones that would be involved in basic tasks flows for each of my personas.

 

Adrienne (our Impulsive planner) needs reminders of what ingredients are expiring so she can avoid wasting food and money. Her task would be checking a reminder, choosing a recipe that uses her ingredients, and then following it.

Victoria (our Structured planner) needs smart grocery lists so she can keep track of her ingredients. Her task would be to create a new shopping list, shop with it, and then scan her items into her virtual inventory.

PP_wireframes.png
 
USABILITY PROBLEMS

can you use this product?

To test the usability of my designs, I recruited 3 testers who were given 5 tasks each to complete. I read them a short script describing the nature of the app and the context for each task. They were given simple instructions and asked to narrate their actions and thoughts as they performed them.

Success was measured through a simple pass-fail requirement. Afterwards, testers were asked to rate the ease of the task on a Likert scale. I asked different follow up questions for each tester depending on their performance and comments during each task. Based on the feedback and insights during testing, I was able to identify some points in the flows that could be refined in the next iteration.

use what we know

PocketPantry_UT1.png

Problem #1: Users could not find the button to add items from a grocery List into their inventory Store.

  • Users thought the + button was to add an item rather than open a hidden menu. Some users expected checking off an item to trigger a way to proceed.

Design Solution: Replace the + icon with a 3-dot icon and move the Add-to-Store button above the Edit button. To suggest the next step, make the 3-dot icon change to the active color state only when an item on the list has been checked off.

reduce effort, increase agency

PocketPantry_UT2.png

Problem #2: Users forget what ingredients are expiring the moment they close the Reminders pop-up.

  • It's too much effort for users to remember what is expiring after seeing a pop-up only once.

Design Solution: Let users open this pop-up again by sticky-ing a notification button on the side of the screen. 

  • Users may not want to use all their expiring ingredients or cook them immediately.

Design Solution: Change the primary call-to-action to be 'Check Expiring Ingredients', rather than 'Check Recipes'. ​In their inventory, expiring items should have an indicator of their status and be sorted by expiration dates. This allows users to select the items they want to use before checking what recipes include them. A quick select option may be useful here.

make it feel right

PocketPantry_UT3.png

Problem #3: Users naturally continue to swipe left after completing a recipe's last step.

  • When they could not proceed, it interrupted the interaction and some users even closed the app.

 

Design Solution: Add a new screen that users can swipe left onto to finish the flow. The layout of the page should be visually different to indicate the recipe is complete.

  • Users missed the option to edit their inventory after they finished following a recipe.

Design Solution: The new screen should include options to, 

  1. Select recipe's ingredients and remove from inventory

  2. Remove all of the recipe's ingredients from inventory

  3. View Inventory

 
 
RAPID PROTOTYPING

low fidelity

This lo-fi interactive prototype was the first iteration of my designs and was used during the usability tests to check the task flows.

Using this prototype, you should be able to:

  1. Create a new grocery list

  2. Add Eggs from your list to your inventory

  3. View a list of recipes that would use your soon-to-expire items 

  4. Follow a recipe's instructions while cooking

Testers were set up at the starting screen of each flow, but this prototype has all the possible screens. Feel free to explore (and inevitably break it).

Shop
Store
Prep
User
LEARNINGS

reflections

Meal planning is an important life skill and applicable to so many people's lives. I first had the idea for this project after buying bug-infested produce and wishing I had a helpful app I could refer to when grocery shopping! Due to my passionate investment I may have been a bit over ambitious.

It's been almost 2 years since I imagined this app and it's nice to see what areas I've grown in! I've since learned to ask better interview questions, and identify when to use different UI. Most importantly, I've acknowledged that you really can't act on all your ideas. Focus on narrowing your scope, pick your problem statement, and decide what features belong in the backlog.