Groceries

A quick and efficient productivity app

Creating design solutions that are easily accessible and easy to use.

About Groceries

Groceries is a productivity app for making grocery lists. Recipes can be stored and ingredient lists will be pushed to your groceries list.

The Challenge

The goal was to create a quick and efficient user experience — to determine main functions and design solutions that are easily accessible and easy to use.

My Role

I was responsible for the User Experience (UX) and User Interface (UI) Design.

I Created/Designed

  • Journey Map

  • User Flow

  • Interaction Design

  • User Interface Design

  • Visual Design

  • Animation

 
 

Onboarding

Users are launching app for the first time.

 
  1. “Quantity” and “category” are both commonly selected when adding an item. To save time, the categorization palette automatically drops down, eliminating an extra click to open it or an extra step to access it later.

  2. Multiple items are usually added at one time. To increase productivity, after an item is “added”, the keyboard will reappear with the cursor placed in the text field, ready for the user to quickly add the next item.







 

Shopping List

View Prototype →

 
  1. The number of items in a list is located next to its name, allowing the user to know exactly how many or few items the list contains without having to open each list individually.

  2. A checked item moves to the bottom of the list, freeing the user from having to process irrelevant information.

  3. The “Remove Checked” CTA is placed above the list, instead of below, for easy access. As users are finishing their shopping list, they will be located at the top of the page. This design eliminates the need to scroll to the bottom of the page.







 

Recipe List

View Prototype →

 
  1. Users can “star” their favorite dishes to conveniently access them in the “Favorites” list.

  2. The “Shopping List” icon informs users of active lists regardless of where they are located within the app.

  3. Multiple recipes can be added to a shopping list at one time. The “Add to Shopping List” CTA is anchored to the bottom of the screen for easy access.

Design Toolkit

  

Additional Work

Components

Website

 

Website

Retail + Digital

Website

Microsite

Website

Mobile App