Project

My Pantry

As someone dedicated to reducing, reusing, and recycling, I wanted to explore the challenges people face when trying to minimize food waste at home. This involves effectively tracking existing groceries and expiration dates, identifying missing items, and monitoring consumption patterns. Alarmingly, the average US household throws out $200 worth of food per month. In addition to the significant financial loss for grocery shoppers, this waste strains natural resources and contributes to excessive environmental pollution. Starting as a student project, I decided to dive deeper and refine my solution after the conclusion of the course.

Role

  • User experience
  • UI design
  • Prototyping

Date

Jan 2018, revised 2020

Tools

  • Sketch
  • Photoshop
  • InDesign
  • Gliffy
  • ProtoPie
Phone mockup showcasing My Pantry

My Pantry

Your essential mobile companion for saving time, money, and the environment. My Pantry offers an efficient and customizable food inventory system that is accessible on the go and shareable within your household. Easily track your groceries, monitor expiration dates, compile shopping lists, and estimate your spending – all in one place.

Product advertisement
 

Adding Pantry Items

  • Quickly add one or multiple items to your pantry lists in your preferred way. Utilize suggestions for minimal typing, scan the barcode, or effortlessly repeat previous entries by adding from history.
  • Easily track expiring food by entering the expiration date using the calendar or the voice command. Planning to freeze an item? No Problem. Let the app do the work and notify you when it expires.
 

Pantry Views & Editing

  • Organize your items into lists that match your home.
  • Need to restock an item? Save time and clicks by reusing entries. Select them in the pantry, add them directly to the shopping list and keep the item details.
  • Easily see what foods are in the house by viewing specific lists, by using the Search, or by viewing all entered items by category.
  • Store item photos for quicker scanning and to view the pantry like you would at home.
 

Shopping List

  • Keep all your grocery shopping needs in one place, access the list anytime/anywhere, and when ready to shop, filter the list based on store and current needs.
  • See what the shopping will cost in advance to plan your expenses.
  • Share the list among the household to easily delegate the shopping.
  • For faster shopping, organize your categories based on store layouts to avoid repeating isles in the store.
  • Quickly add additional items to the list, and perhaps surprise your loved ones by picking up their favorites.
  • In the store, get a clear view of what you need in each section and check off items as you go. When done shopping, move the cart items directly to the pantry and no more typing is needed.

Prepare

Research process steps

Research

With the problem identified and a rough idea in mind, I needed to gain a better understanding of the market and audience. Given the project's constraints, I conducted focused research on apps with a similar purpose and examined existing user feedback. I audited competitor apps to evaluate their strengths and weaknesses, identified potential market gaps, and analyzed numerous reviews to understand current user experiences. Synthesizing this data, I extracted user needs and pain points to guide the direction for the new app.

User Pain Points

Synthesized user pain points

User Needs & Motivations

Synthesized user needs
Persona 1
Persona 2
Persona 3

Personas

I also used the findings to create three primary personas, inspired by real people who match my target audience. These personas helped me consider individual needs, behaviors, and goals throughout the design process, and they inspired user scenarios and potential opportunities for support.

Explore

Sketches
Flowchart 1
Flowchart 2

Content & Flows

Ready to ideate solutions, I created numerous quick sketches to explore layouts, prioritize content, and planned the information architecture using flowcharts.

Wireframes

Creating simple wireframes and a clickable prototype was an important step to get a feel for the design and catch issues early in the process.

Prototype version 1

Prototype V1

It was time to create the first high-fidelity clickable prototype. I prepared my visual assets and components in Sketch and assembled the prototype.

Evaluate

Illustration of testing questions

Testing & Iterating

With the prototype, I quickly discovered issues to address. I revisited the drawing board to simplify some flows, enhance UI ergonomics, improve accessibility, and enhance the overall visual experience. Informal user testing sessions and A/B tests guided my decisions throughout the process.

Implement

Project styleguide

Visual Identity

Research findings not only guided the app’s functional direction but also emphasized the role of visual design in user experience. Many users expressed a preference for clean design and the ability to organize content using a variety of colors. Feedback revealed that some struggle to read dark text on white backgrounds in bright, fluorescent-lit environments such as grocery stores. In response, I created both a dark and an off-white/warm background theme, along with a diverse color palette for categorization. Providing such flexibility presented challenges when selecting colors – from readability to ensuring overall harmony. The colors needed to define the app’s visual identity and effectively represent various food groups. If I had continued iterating, I would have simplified the main color palette.

When creating components, I followed iOS UI patterns/guidelines and carefully evaluated hit targets and font sizes. To infuse delight into the often stressful task of household organization, I went for friendly, lighthearted elements such as calm colors, rounded shapes, and encouraging messages.

Prototype

Ergonomic interactions in any environment

Walkthrough of the pantry regular view

Workflows to optimize productivity and time

Walkthrough of the pantry list view Walkthrough of how to add and edit in the pantry

Simplified grocery shopping

Walkthrough of the shopping list Walkthrough of the categories and favorites feature

Waste reduction support

Showcasing the food expiration feature

Emotional design for a positive experience

Showcasing some encouraging elements in the design