Store Well
A project to improve habits around groceries and food. This was done for the course Human Computer Interaction in the MSIS program.
About the Project
Many of us fail to track the food we eat, the groceries we buy. The system is built around users feeding/scanning the details of their grocery purchases, helping them figure out the optimal output, and solving the problem of food waste. The approach to this is by enabling the users to use a single system to create & share shopping lists, scan their stock, store the purchases effectively while finding new recipes to get the best usage out of their stock/ to get the best nutrition out of the food they eat. The app would also enable users to share food in the community, helping users understand their purchases better, reminding them when their food items are about to expire and offering them information on nearby food sharing resources.
The project was done in collaboration with Yuan-Li (Lili) Huang, Monika Agarwal and Vignesh S.
Existing Similar Products
NoWaste
Organize food & expiration dates with ease.
Inventory lists for your freezer, fridge and pantry.
Sort your food by expiration date, name or category.
Search and find your food in seconds
Synchronize and share your lists with your family
FridgePal
Quickly add products to the inventory.
Add/Edit product details to the inventory by mentioning things like product name, image, type, expiry date and quantity.
Olio
• Olio is Food sharing application which enables users to pick up and safely redistribute their surplus food to local communities.
System Users and the Pain Points
Primary Stakeholders
Students and fresh graduates, have the following pain points:
Limited budget, limited time and want to save money.
Lack of knowledge on eating healthy nutritious food.
Needs for organizing fridge.
Secondary Stakeholders
Local residents, food banks, local grocery stores and restaurants, etc. And the pain point is:
Lack channels to distribute extra food (leading to food wastage).
Usage Research
Survey Summary
What was in the survey and why was it done?
Understanding the user’s habits around grocery buying and usage of food and beverage, was the main aim of the survey. Through the survey, we hope to get a grasp on their current pain points, how they solve the problems (or not) and find the gap that we can fill in. The survey can also help us prioritize users’ needs and narrow down the project scope, rather than populating the application with all possible features in the initial concept document.
What we learned from the Survey
Interviews
What is the interview about, and why was it conducted?
From the interview, we aim to gain a deeper behavioral understanding of the participants, especially on users’ grocery buying, usage, cooking habits, and their pain points relating to the whole experience. Additionally, we will compose WAAD and the flow model diagram based on interview data, and form future user personas and user journey maps.
In-Store Observation
Work Activity Affinity Diagram (WAAD)
Models based on data
Work Roles
Multiple work roles were created based on the learnings from the interviews and the WAAD diagram, based on these work roles the work space was defined before planning the usage of the application.
Flow Model
The user journey was planned along the system by marking all the areas of interaction, features and how all systems interact with each other in the user journey.
Physical Model
One thing which was found important was the physical presence of the user in the system and the model to find the user journey in the physical space was created.
Planning for the design
User Personas
Kaylee is an international student, this is her first time away from home. We built her persona, based on the fact that she has just moved to a new country, learning about the new culture, geography, food preferences and academic style. Kaylee did not have any prior experience or knowledge in cooking or storing food. She found it difficult to buy groceries by herself or knowing how to store purchased groceries for the best shelf life. Her main concerns about her groceries are their economical and nutritional values. She has observed that ends up throwing a lot of food as she doesnt have experience with optimal portion sizes.
Joe is a student athlete. He is a grad student at UT Austin, due to his arduous academic schedule, he is unable to find time to focus on his diet. Joe is someone who is focused on maintaining a balanced diet and on keeping his body healthy and fit. Joe is also unaware of the meals that can be prepared at home and hence ends up spending a lot on restaurants.
Ideation and Sketches
Initial Idea Sketch
Conceptual Design Models
Metaphors
As per the survey, it is observed that grocery shopping and stocking is an ‘experience’ for a lot of users. Using this finding, we want to incorporate simple things in the app that would let the user relate to that shopping experience, for example - we will call it the ‘shopping list’ instead of note making, groceries will be called ‘stock’ because people stock their groceries.
The UI of the stocking list would be such that it replicates the ‘fridge shelves’ to give the user more relatability.
System Ecology
Interaction
Emotional Impact
Storyboard
First Round of Testing
Wireframes
Prototype and Pilot Test
Prototype Planning
The idea of the product/app is to help the target audience plan and organize their groceries better. We wanted to test out the essential flows during the process which includes Shopping Lists, Recipes, Stocking Lists, Food Banks and Stocking tips. Based on this, we created the prototype to include each of these key tasks.
List of Key Tasks
Create your grocery shopping list
Description: Users plan their groceries before going for grocery shopping.
Scenario given: You are out of groceries and need to make a shopping list for planning the same.
Imperative sentence: “To plan your grocery list, please open the app. Create your shopping list on the application.”
Create your bought items stocking list
Description: Once users have completed their shopping, they add new stocks to the application by scanning or adding manually.
Scenario given: You bought your groceries and need to make a stocking list for noting down what you’ve bought.
Imperative sentence: “After buying groceries, please use the application to input the purchased items.”
Find storing/ stocking tips
Description: Once users have updated their stocks in the application, they can explore stocking tips for the best shelf life.
Scenario given: You have bought a lot of items from the grocery store, however do not know where/how to store them.
Imperative sentence: “Please open the app and find tips to stock your purchased items.”
Find meal recipes
Description: Once users have updated their stocks in the application, they can explore recipes based on their stock availability.
Scenario given: You want to make some meals and find some recipes based on the available stocks.
Imperative sentence: “Please open the app and find recipes based on your stock availability.”
Find food banks
Description: Users can explore nearby food banks to share or donate extra groceries.
Scenario given: You have bought extra items or overcooked, please find a way to share it instead of throwing away.
Imperative sentence: “Please open the app and find food banks near you to share excess food with.”
What We Learned
The users took some time to find the icon for creating a shopping list, which could be because it was the first task. But they felt that the icon was very small. So we could make the icons/banners bigger and in a different color for visual differentiation.
The users suggested that for the shopping list, it will be more intuitive to add items that are planned to buy and that are already bought instead of displaying multiple shopping lists.
The users felt there were too many buttons for the stocking list, which are not straightforward at first.
Stock update word did not make sense to the users, they felt stock availability could be a better word. Hence, we realized we need to apply a clearer, easy to understand verbiage across the application.
The users were confused between different functions and the flow of the shopping list and stocking list. So, we need to give an introductory walkthrough to make the users understand different functions and flow better.
The users found storing tips tasks the most intuitive, simplistic and easy to use.
For storing tips, it would be nice to have some infographic and visual elements under each item.
For finding the meal recipes task, users felt excited to find the videos. They also suggested that the app should suggest recipes with a few non-available items too.
For finding the food bank task, users suggested that the food bank list could have slightly more information like contact information & address and then direct them to the external site.
The general learning was the users want the app with minimal design, less cognitive load, better wording and no clutter. The space of the app to be used efficiently with just the right amount of information.
High-Fidelity Prototype
After collecting user feedback and learning about the issues found my users of the application, we made changes and finally created a design system with a high fidelity screens set.
Color System
Icon Style and System
Component Structure
Final Design Screens
The Team
