UX Design | UX Research | Visual Design | Store | Search
How I helped essential workers access essential surplus goods
A marketplace for essential items during the pandemic
OVERVIEW
Problem
During the Covid-19 pandemic, essential workers need food and essential items to survive. Restaurants and farmers need to sell food to survive.
👩🏼🌾 + 👨🏻🍳 + 👩🏻⚕️
"How do we connect the restaurants who want to sell food/surplus goods with essential workers who struggle to get food items due to their irregular work hours during the pandemic?"
Solution
We designed an app that connects essential workers with local restaurants & businesses by matching businesses that have available surplus items the users need.
My Role
UX Research
UX Design
UI Design
Tools
Figma: wireframing, prototyping
Zoom & Slack: communication
Google Doc: shared document, research archive
The Team
1 PM
3 UX designers
1 UX researcher
Timeline
2-week design sprint
Refined in 2020. for a week.
Our Approach
1. RESEARCH
Overview
Background
Problem Exploration
Market Research
Comparative Research
Feature Prioritization
The Network of Users
User Persona
3. EVALUATE
Design Jam Presentation
Post Design Jam Solo Iteration
Usability Testing
Design Refinement
Interactive Prototype
Next Steps
My Contribution
UX Research
Problem exploration, User Research, Market Research, Design Presentation
UX Design
Wireframe sketches, Screen flow
UI Design
Designed the first portion of the initial high fidelity prototype with the team.
Sole UX/UI Designer for the second and updated Iterations.
Discover Food Items Nearby
Find popular surplus items from small businesses near your location.
Check the local businesses in your neighborhood selling essential items. Shop without worrying about product shortages or social distancing at big box stores.
Find Stores Catered to Your Need
Get matched with stores based on your shopping list.
Make a list of items you need, and we'll find the right stores for you. Save time and energy from shopping at supermarkets where these essential items are likely to be sold out.
Quickly Compare Stores
Compare stores with quick swipes and make sure they meet your needs.
By swiping through the matched stores, you can quickly see who carries the most items you need, is open when you get off from work and is the closest, and has the best price.
RESEARCH
Background
SFUXD held a remote design jam over the course of two weeks during the Covid-19 Pandemic. Participants with diverse skills and experience were placed in teams. Teams explored problem directions related to the Covid-19 and created design solutions for the chosen problem.
Prompt
“ We are currently facing new problems due to COVID-19. How can we identify and solve these problems?”
Problem Exploration
In order to encourage divergent and creative thinking, we decided to explore problem areas, strategies, and possible solution ideas individually before coming together and presenting our ideas to the group.
Each member focused on topic areas within the prompt that interested them the most, and later presented to the rest of the team to decide on the direction to move forward with as a group.
Here are two main topic areas I was interested in and did research to narrate the story.
Problem #1
What I Spotted:
“Small businesses are struggling due to social distancing protocol.”
👨🏻🍳
Restaurants
Restaurants are pleading for help as they face losses of up to 80%. Many restaurants operate with take-out or have closed indefinitely.
👩🏼🌾
Farmers
Suppliers/farmers have surplus goods with no channel to sell due to the collapse of the restaurant industry. Even with the pandemic-driven increase in demand, small and mid-size farmers are still struggling to optimize production and figure out which markets are right for them.
❓
"How might we help local restaurants to survive and minimize losses by helping to sell food /surplus goods?”
Problem #2
What a Teammate Found:
"Essential workers on the frontline of the pandemic have unmet needs for food and other life essentials"
👩🏻⚕️
Medical Workers
It’s difficult for them to get essential items due to their extended work hours, newly enforced grocery store hours and scarce supplies at major stores.
❓
“How can we help essential workers to get food items they need in their limited time outside of work while maintaining social distance?"
Solving Two Problems Together
As a team, we saw an opportunity to integrate two problems and find a single solution for both needs.
👩🏻⚕️ 👮🏾
Helping essential workers to get food items
👨🏻🍳 👩🏼🌾
Helping small businesses to survive
"How do we connect the restaurants who want to sell food/surplus goods with essential workers who struggle to get food items due to their irregular work hours?"
Market Research
I first dove into gathering news articles and community platforms to find more about any current solutions for the problem we want to address. Below is the two significant shifts I found.
Changes in the Industry I spotted:
1. Restaurant chains are starting to sell produce/products from their restaurants.
Panera, Subway, and Denny’s have started selling groceries in some states— including paper goods, cheese, bread, raw and deli meat, and fresh and frozen fruit and vegetables — in their parking lots or stores. Customers can order online or from their cars, and employees bring the packages to them.
2. Farmers are hosting Farmers Markets in hospital parking lots and bringing produce to medical workers.
Hospitals and farmers’ markets are partnering to bring produce to frontline workers as a channel for local farmers and suppliers to sell their goods.
Comparative Research
To see how other competitors are solving similar problems, I looked at the below products. Since a large portion of the flow will be similar to location-based grocery or food ordering apps, I researched how these apps unfold user flow and the competitive features to learn from.
Location-based search with saved address speed up the process.
-Uber & Instacart
Extra precaution for Covid-19 virus with an option to choose contactless deliveries and pickup.
- Instacart
Recommend items that are popular or similar to items chosen by users.
- Doordash
Create a list of items first and then check for location and availability.
- Target
Feature Prioritization
With insights collected from research, I created an Effort vs Impact 2x2 matrix to visually analyze Feature prioritization to have a shared vision and purpose as a group.
The Network of Users
We came down the below cycle of how our solution will impact the network of the user groups.
User Personas
Based on the insights gathered, we created the following personas to help guide the design process.
DESIGN
With the data from the research, we divided the rest of the product roadmap between the team members. I took the lead to develop user flow & wireframe sketches since the project direction was heavily influenced by my research of problem area and comparative analysis.
Journey Mapping
For the first iteration, I focused on the user flow and user journey of an Essential Worker as they are the main "customer" group.
Key Screen Sketches
I first sketched some key screens in order to illustrate the basic functionalities and layout and share my vision for the solution with the rest of the team. Since our target users, essential workers, use their mobile phones to shop on the go, I sketched the wireframes for mobile screens.
Wireframes Built Together
Based on the wireframe sketches I created, two other UX designers and I split up designing screens for an interactive prototype. During this process, we collaborated in real-time using Figma. We shared ideas and had discussions using Slack, and worked together with flexibility for necessary changes.
EVALUATE
Design Jam Presentation & Feedback
As a group, we organized the presentation material, and a team member presented it to the rest of Design Jam participants. We received insightful feedback and questions. Some of the feedback/takeaways were following:
Seems useful for times aside from pandemic.
How would users verify they are essential workers?
How would inventory be updated for each seller? How would Seller's flow look like?
Found it meaningful that Essential helps multiple user groups.
POST DESIGN JAM | Solo Iteration
Positive feedback from the presentation was a sign that Essential is heading in the right direction. Design jam was about fast-paced iterations, so not all details were executed with satisfying quality. I wanted to spend the weekend polishing it up.
Usability Testing
Because the presentation time given for each team was short, the feedback my team received wasn't enough to dictate the next design phase. I wanted to dig deeper and learn more about usability from the actual user point of view.
Task Scenario
I conducted structured usability testing sessions with four potential users who currently work for essential businesses. They tested the interactive prototype, and I watched how they completed a given task using Zoom's screen share feature. The task was the following:
All 4 participants were able to complete the task and gave me feedback that they would be interested in using this app if the below criteria are met:
Show other items available from sellers besides items I have on my shopping list
Make it less about medical essential workers as target user, be more inclusive of other essential workers.
Seller comparison takes too long and involves going back and forth between pages. Make it easier.
Make the seller matching feature catch more attention, as it's a feature that differentiates this app.
Design Refinement
Based on the data gathered from presentation feedback and usability testing sessions, I created the final design of Essential app using Figma. Over the course of a weekend, I worked on improving the screen flow, usability, visual design, and branding.
For the design revision, I focused on the below aspects:
Enhance essential worker(user)'s flow.
Make the function of Shopping List more clear.
Make seller comparison easier along with visible details.
Show recommended items of sellers before checking out
Update visual design: Font, Colors, Logo
Visually communicate that the product is for a wide range of essential workers, not just medical workers.
Add playful and smoother transitions with micro animations
| Launch Screen: Diversified User Illustrations
Before:
Miscommunicates that ‘Essential’ is Exclusively for Medical Workers
Highlighted medical essential workers as users.
After:
Indicates a Diverse Group of Essential Workers as Users
Included a variety of front-line essential workers as targeted users.
| Popular Items: Highlighted Surplus Items Nearby
Before:
Lacks Visual Interest around Surplus Goods Feature
Mostly text describing surplus items.
Not enough visual motivation to encourage checking out surplus goods.
After:
Encouraging Shopping for Surplus Items with Added Visual Elements
Added visual elements like photos in card style for quickly swiping through trending surplus items.
Placed the Shopping list banner on top to encourage store matching.
Setting location is placed on top of Home screen to easily toggle between saved places.
| Shopping List: Clear Purpose of the Shopping List
Before:
Unclear What Happens Next
Unclear what building the list does.
No CTA visible until an item is added to the list.
After:
Highlighted CTA Encouraging a Convenient Way to Find Items User Needs
User is encouraged to add the popular surplus items nearby while building a personal shopping list.
Clear CTA to build a shopping list to be matched with sellers that have the items.
Search bar is on the top to allow quick item search.
| Matching with Sellers: See Options at a Glance
Before:
Lacks Visual Hierarchy
Not clear if seller information is clickable to view more details.
After:
Visually Organized to Prioritize Information
Visual hierarchy with color highlights important information to check while comparing sellers.
Card style layout groups information and allows to quickly scroll through.
Rating has been added to help to validate sellers.
| Choosing a Seller: Quickly Compare the Offerings
Before:
Takes a Few Tabs to See Seller Details
Have to click icons on the map to compare sellers.
Seller information was a bit small to read clearly.
Changing Item quantities required using a drop-down.
After:
Simply Swipe to View Next Store Details
Easier comparison is possible by swiping to see other sellers' details such as available items, pricing.
Users can see item recommendations for each store besides the items on their shopping list.
Changing quantities is quick and directly done on the same screen.
| Order Placement: Review the Order Details and Contactless Pickup Options
Before:
Missing Details of Order and Pickup Option
Able to review orders at a high level.
After:
Double Check the Details and Be Safe
Clear CTA for setting pick up time.
Can choose pick-up options either in-store or curbside.
Able to review orders in detail: item name, quantity, and unit price.
| Confirmation Screen: Ensure Successful Pickup
Before:
Simplified Order Confirmation
Map is placed for quick location finding.
After:
CTA Buttons to Ensure Successful End of User Journey
CTA button to see order details instead
CTA button to connect to map application.
CTA button to notify or contact the seller when arrived for pick up.
Next Steps:
Explore seller's user flow as the seller is a secondary user.
Find ways the general public can also use to help the businesses while providing added incentives for essential workers.
More Projects
