Grocery App Redesign

Intuitive Shopping List Flows

A new grocery shopping experience

When the pandemic began, grocery shopping changed for most people. Whether it was cooking at home more than before, trying to find essentials in stock, or ordering for pick up rather than walking the aisle. Amidst this shift, grocery stores have also innovated, with many putting more focus on their apps.

My grocery store of choice is H-E-B. Their app has a lot I like about it, but building my shopping list is one of the key friction points I've experienced. It feels like so much more work than my previous method of just meal planning in a shared note between my wife and me on our phones. We would list out a dinner idea for each day of the week and then make a list of what we needed. I would go to the store and buy what was on the list.

If I want to order online, I have to transfer this list to the app by typing the name, searching and selecting an item to add to the list. It takes about 10x as long as just typing it in a note.

We both want to use the app and enjoy using it once we've entered the list. But the friction of building a list in the app has often caused us to give up. And we return to making a list in the note on our phone.

Today is the day for me to go to the store, and it got me thinking, what would I change about the app's design allowing it to integrate better into my everyday life.

I decided to create a fun design challenge for myself.

Because we're building the list while brainstorming meals, looking at our weekly schedule, looking at what's in the pantry… A little extra cognitive load is enough to keep us from building the list in the app itself.

I designed two flows to replace my two current methods of building my shopping list. The goal was to remove the intermediate steps so I could focus on the food we needed rather than focus on building the list.

My two current grocery list workflows

Using the HEB app's current design, I follow one of two workflows.

Search Flow

HEB app search flow
grocery app search flow

The search flow follows these steps

  1. Type the name of each item into the search.
  2. Browse the search results.
  3. Select the product I want.
  4. Add it to a shopping list.
  5. Repeat.

This workflow is intuitive, but the extra steps add up when I of 70 items to add to my list. You can see the workflow in action through my search flow prototype.

Move Flow

HEB app flow
grocery app move flow

The search flow follows these steps:

  1. Go to a past list
  2. Find items I want to buy this week.
  3. Select the item I want.
  4. Move it to a new shopping list.
  5. Repeat for every item.

Again this workflow is intuitive, but the repeated steps add up when I buy a week's worth of food for my family. You can see the workflow in action through my search flow prototype.

My two new grocery list workflows

Import Flow

grocery app import flow

This import replaces the search flow by allowing me to import a list from the notes app on my phone. The import flow follows these steps:

  1. Open notes app on my phone.
  2. Share the note with my H-E-B app.
  3. App does its best to match imported items.
  4. I have the option to edit an item if it was mismatched.
  5. Each item is approved using 1 tap.
  6. Shopping list imported.

The key improvement here is that it allows me to use a more flexible space (the notes app) to sort out what I need to buy. I can then easily import that list to the H-E-B app. You can see the workflow in action through my import flow prototype.

Transfer Flow

grocery app transfer flow

This transfer flow replaces the move flow. The key difference is that it only takes 1 action per item to transfer them from one list to another. The transfer flow follows these steps:

  1. Go to a past list
  2. Select from the menu a new option, "Select items to move to another list."
  3. Check each item I want for today's list
  4. Transfer selected items to a new shopping list all at once.

Again, this flow isn't is similar to the move flow. The difference is that there is one action per item rather than 4. You can see the workflow in action through my transfer flow prototype.

Tell me what you think

I'd love to hear your ideas and feedback from this design challenge. You can find me on linkedIn.