Visual Design
Interaction Design

3 weeks

In lieu of recent events with COVID-19 and its effects upon the grocery shopping experience, I crafted the app “Grocery Grab” to help resolve the lack of transparency of currently stocked and out-of-stock items.

Problem Space

How might we resolve the lack of transparency around items that are currently in-stock or out-of-stock in grocery stores?

At the peak of COVID-19, people began to hoard toliet paper and other essential items. Things like cleaning supplies and hand sanitizer became prized. With this huge increase in demand and a slowing supply chain, many customers walked into stores with empty aisles.


During the peak of COVID-19, I observed and heard common pain points from my peers and wanted to explore deeper in what deterred their grocery shopping experience

Prior to reaching out for interviewees and conducting user interviews, I focused on 5 key areas of inquiry:

  1. Compare and contrast the grocery shopping process from before versus after the stay-at-home.

  2. Pain points when it comes to finding the exact or similar food product they need/want.

  3. Reason/s to go grocery shopping.

  4. Previous and current comments or opinions on how they perceive food.

  5. Locations person goes to when grocery shopping and why.

Sense Making

Gathering my findings, I created an affinity map to note arising themes and similar experiences. This helped me gather and organize the arising themes and similar experiences based on their relationships with the key areas delved on, rather than only taking note of key quotes and going on from there.

A common problem that people faced was the lack of transparency.

From the user interviews I conducted and conversations with peers, everyone noted the limited or out-of-stock items they ran into when shopping.

When it came to some specific items - such as the brand name, they found those shelf locations to be empty so they had to either settle for another ‘lesser’ quality or brand, or aim to retrieve their item at another location, which in most cases, ended up not having the item available.


Reflecting upon the pain point, I started with 10 ideas and funneled them down to rest on one feature to prototype.

When it came to developing an entirely new app from scratch rather than redesigning a current app, I took steps to funnel down a concrete vision - i.e., SWOT analysis, brainstorming, feasibility/impact chart.

Churned 10 ideas and grouped the, based on what the feature would solve.

Created a SWOT analysis to dive into the idea's strengths, weaknesses, opportunities, and threats.

Created an Impact / Feasability chart to note the impact the idea would have and the practicality of a finalized feature.


Note the store's current inventory to ensure customer's search for items; be transparent about items restocked.

I primarily wanted to note the store’s inventory. Why?

01 — For people to ensure that they could obtain the item, there would be a clear indication of the item in stock, through visible inventory.

02 — To take note of items that were in-stock, low-in-stock, or out-of-stock, there would be visual cues such as color and icon.

03 — In the event that an item was out of stock, people were able to waitlist items to get notified of a recurring shipment.

What are the Steps?

Created and utilized information architecture to note user flows and essential components and screens prior to initial sketching.

This helped me visualize the specific actions a user would take to utilize a certain feature as well as how the app would look structurally. When ideating different paths a user would take and screen layouts, I primarily looked at opening screens from current apps I had downloaded - e.g., DoorDash, Uber, Target, etc.

Additionally, I noted questions and additional information to take in mind when creating layouts.

Mid-Fidelity and Feedback

After getting a collective agreement of my mapping with potential users and referring to other grocery or delivery apps, I proceeded onto the mid-fidelity wireframes.

With my wireframes, I merged my user flows and sketches together, using color to note links, buttons, and actions. I found myself diving into other alternative layouts, either meshing sketches together or developing something entirely new!

Mapped out wireframe to show the user flows, insights I got out of the feedback, and thought I took in mind with some features.


I used a Likert scale to statically allow users to express how much they found the app to be intuitive to use. The average score was 8 out of 10.

What went well?

01 — Potential users found the prototype to be easy and intuitive to use as it had similar user flows with their current app interactions, and found that the solution solved the core problem - stock transparency.

02 — Many positively commented on the animations implemented; adding that it gave a real tangibility, despite it being interacted with via screen.

What can be improved?

01 — Needed to be more visible clarification on certain points such as the ability to waitlist items and whether the favorites list depicted on the main page was referencing the store’s general favorites or the user’s personal favorites.

02 — Before finishing my wireframes, I ran into other edge cases and screens that should be added - i.e., check out page, notifications - but did not yet finalize the screens and elements because I wanted to reconfirm by solutions through user testing.


After taking in some feedback from the user testings, I was able to build and improve upon the issues previously experienced.

Final Deliverables

Value points of app presented once app is opened.

Choose the store that works best for you.

Get notified of store notifications and restocked items.

Check inventory of other locations.

No need to desperately hope for restocked items every time you go to the store. Add items to waitlist and get notified when restocked.

Specify your search with filters.

Quickly add/remove items in your cart.

App Walkthrough

Next Steps

Extend screens to beyond the check-out screen to note alternative ways to retrieve items.

Exploring and researching potential ways to check-out and retrieve grocery items - drive and pick up, pick up, delivery, etc.

Backend screens to enable stores to input their own data.
Stores could update stocks, messages, etc. all through one app - mobile or desktop.

Explore more how the CMS (content management system) would look like for employees.