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.
Using the HEB app's current design, I follow one of two workflows.
The search flow follows these steps
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.
The search flow follows these steps:
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.
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:
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.
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:
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.
I'd love to hear your ideas and feedback from this design challenge. You can find me on linkedIn.
stay updated on new guides, designs and courses
