Shoppy
An app that allows in-store shoppers to efficiently find items they need by checking for item availability in nearby stores.
My RoleProduct Designer. I worked on user need-finding, visual and interactive prototyping on Figma, and user testings.
TeamDoris Liu, Sean Race, Wye Mun Chin, Jennifer Nunez, Michelle Wan (Designers)
Timeline7 weeks
This is a passion project.
Background
In March 2020 when the pandemic shelter-in-place happened, people were frustrated with finding essential items such as staple food, sanitary items, and many other various items due to panic buying. This caused a widespread case of anxiety and uncertainty among families and individuals.
Many people want to reduce the amount of time outdoors to protect themselves from catching the virus as well. For my design course, my team and I decided to tackle this Covid-19 issue.
Current Effects of Panic Buying
Shoppers are getting frustrated with not being able to find essential needs at their local grocery stores. Many shoppers are either going to multiple stores to find items on their shopping list or turning to online shopping to avoid the risk of getting sick.
Before we delve deeper, some may ask:
“Can’t we just rely on online delivery instead?”
There are three primary reasons why we are focusing on improving the in-store experience instead of online ordering.
1. Save Shipping Cost
Shoppers can avoid delivery delays, extra fees, and limited time slots.
2. Social Activity
Increased personalization and interactive shopping experience.
3. Item Reliability
Easier to discover new items in tangible ways.
“How might we help grocery shoppers safely get everything they need during times of food import insecurity?”
User Research & Insights
Many people are forced to visit more than one store because they cannot find everything they need on their lists and thus they risk exposing themselves further.
How are In-Store Shoppers Currently Feeling?
“It’s frustrating having to go to multiple stores to get everything I need on my list. I feel guilty for needing to go out for groceries.”
“I hate seeing empty shelves when I already waited half an hour to get into the store. At least the workers are nice but I feel bad for them.”
Market Analysis
We looked at several apps that have a similar idea for reporting stock levels at stores to gain inspiration and prevent us from inventing a tool that already exists.
Our Competitive Edges:
Allows flexible item reports instead of a pre-fixed set of options. (WhatsInStock & Supermarket Check-in)
Avoids duplicate reports by having auto-fill suggestions while inputting information.
Defining Our Vision
To align our product vision, we each created scenario storyboards to quickly envision problems and solutions. This helped us gain a better understanding of how the solutions would interact with users’ environments. We selected the best idea based on several interviewees’ relatability to the problem.
I worked on translated our ideas from sketches to wireframes on Figma. Then, I tested several college students to get feedback on the general user flow and idea.
UI Elements
The vibe we want to convey for Shoppy is freshness and abundance. This guided us to soft and refreshing spring colors.
Design Iterations
To increase accessibility based on previous user testing results, I decided to add a higher color contrast for CTA components by darkening the soft periwinkle (#A4B9F7) to a calming blue (#4463BE).
Increased overall color contrast for better accessibility and organized ‘My Reports’ under specific store locations to simplify the main functionalities flow.
Enlarged store information and included more details for items matched.
Increased edit visibility and removed the “upvote & downvote” feature.
Increased color contrast for better accessibility and changed percentage matched to ratio, reflecting item matched measurements better.
Clarified the alert and edit report buttons and added a color spectrum to better visualize the ‘Stock Availability’ options while creating a report.
Enlarged ‘Store’ card component on the homepage for better accessibility and improved the overall visual hierarchy. Took out Sorting/Filter on the store page and added a Shopping List dropdown on the store page to increase user’s shopping list search flexibility.
Final Comps
What I’ve Learned
While working on Shoppy, I got to delve deeper into defining the core problem and designing for long-term instead of short-term problems. By constantly asking what caused the issue and why it happened that way, I found solutions that could benefit multiple scenarios and interactions. I also had the chance to explore different types of ways people adapted to crises and how designers can learn from a variety of backgrounds and experiences.
When COVID-19’s lockdown started in March 2020 in California, many people were frustrated and demanded solutions like opening more delivery time slots, enforcing more social distancing in stores, or asking for more items to be in stock.
However, I learned that many situations involve several perspectives and affect not just the target audience, but the system (such as delivery workers, supply chain, store employees).
Designers have to consider how their designs affect everyone involved.