A Modern Grocery Shopping Experience
Problem
When shopping for groceries, I would be randomly jumping from one aisle to another aisle being all over the place while scanning and checking off items on my shopping list. The other option is I can start from one side of the store and go through aisle by aisle grabbing items that are on my list, where I meticulously have to scan through my shopping list and check off the item I just obtained.
Both can be time consuming and frustrating, especially if in a rush.
Solution
Why not categorize my grocery list by the aisles set forth by the grocery store? Sort categories by the common layout of grocery store aisles? Save time from randomly searching from aisle to aisle. Even if sorting by category is not similar to the aisle layout within the store, user is now shopping by aisle instead by item.
User Flow 01
Adding and manage items to be added.
User Flow 02
More options.
Sketch of Main List
Sketch of Checked (Completed) Items
Sketch of Floating Action Tray
High-Fidelity Flow Map
• The flow map below maps out the following of the user:
• Logging in
• Adding items
• Checking off items
• Viewing Checked off items
• Add, edit and delete
• Clearing a list
Add Item to List
After user logs in, they will be able to add multiple items to their list.
Manage List
As the user is checking off their items, they can add them back to the main list if they accidentally checked an item that was not ready to be checked off.
Edit List
User can edit or delete an item along with an additional options to start a new list.
Design System
App Information Landing Page
Wireframe
Final Design
High-Fidelity
