Case Study — 2020
Grocery Grab
In lieu of the recent events of COVID-19 and its effects with the grocery shopping experience, I crafted the app ‘Grocery Grab’ to help resolve the lack of transparency of currently stocked or out-of-stock items.
Role
Product Designer
Tools
Adobe Draw
Adobe Illustrator
Figma
Timeline
1 month, Apr to May 2020
Problem
How might we resolve the lack of transparency to items that are currently in-stock and out-of-stock?
At the peak of COVID-19, we’ve all seen the scenes of anxious customers wiping through grocery aisles, loading toilet paper, cleaning products, and canned goods. As thousands received work-from-home orders, state-wide lockdowns, and declared National Emergency, the survivalist instinct started to hit.

Unfortunately, with this huge stocking and demand of items, many customers walked into stores with aisles empty, and others even coming into the store the next week to still find their item out-of-stock.

How might we resolve the lack of transparency to items that are currently in-stock and out-of-stock?
Solution
Grocery Grab — a mobile app to ensure people’s grocery shopping experience through stock transparency.
Access grocery inventory
No need to arrive at the store with items out-of-stock. Under each item, there will either be in-stock, low-in-stock (noting inventory), and out-of-stock.
Explore a variety of stores
No need to rely on one app to access a particular location. Once logging in, there is a choice to either enter a desire location via ZIP code, city, or store name, or a choice of using one's current location.
Favorite and waitlist items
Favorite your loved items to purchase again, and get notified of items back-in-stock.
Research (problem space)
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:

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

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

03 — Reason/s to go grocery shopping.

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

05 — Locations person goes to when grocery shopping and why.
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. By finding commonalities between current grocery shoppers, I was able to pin point the major pains and experiences that general shoppers faced.
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.
Brainstorm
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, opporunities, and threats.
Created an Impact / Feasability chart to note the impact the idea would have and the practicality of a finalized feature.
Solution
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 an 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.
Feedback, feedback, feedback
What went well?
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.

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.
Iterations on Iterations
After taking in some feedback from the user testings, I was able to build and improve upon the issues previously experienced.
Branding
Designing "freshness"
To reflect the fresh and vibrant colors of produce, I used orange and green as my central colors. Orange reminded me of fresh and juicy fruit; green resonated with fresh greens such as lettuce, spinach, etc.

In regards to the elements such as buttons and pop-up screens, I used curved edges with a radius of 10 to reflect a welcoming, friendly, and transparent branding.
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.
Video of the final prototype, made with Figma.
Learnings and Takeaways
This was my first project where I created an entirely new app, without redesigning a current one. Definitely ran into many reiterations and epiphanies, venturing into a range design possibilities! I really aimed to provide an app that could work across generational gaps - users who are in college or just got out of college, parents, seniors, etc. - in hopes to make this grocery shopping experience accessible and inclusive to a range of people.
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 — How would onboarding look like? How might they update stocks or messages in their particular store?

Further explore edge cases.

How might we compare store prices if one item is out of stock? What if someone needs an item but it’s waitlisted and they aren’t able to go to another store?