Seattle’s Basket
Together, We Can Minimize Hunger and Nourish Hope in the Greater Seattle Area.
ROLE
Front-End Developer
UX Researcher
TIMELINE
Sept - Dec 2024
Zareen Tasnim (Me)
Tai Nguyen
Vy Nguyen
Michelle Kim
TEAM
TOOLS
Figma
HTML/CSS
Javascript
React
Firebase
01
Project Details
Project Sneakpeek
Figma Prototype
PROBLEM SPACE
Why Seattle’s Basket?
Grocery store standards for produce often prioritize visual appeal, requiring adherence to USDA grade standards. Consequently, farmers frequently discard “imperfect” fruits and vegetables—produce that, despite minor cosmetic flaws, remains nutritious and entirely suitable for consumption.
RESEARCH
Why this space?
The averages below are based on an individual or family cooking all their meals and snacks at home, they don’t include meals eaten out. Averages look at foods many people commonly purchase, such as eggs, dairy, meat, bread, and produce items.
THE RIGHT TO FOOD IS A HUMAN RIGHT
37%
Households in the greater Washington region experienced food insecurity between May 2023 and May 2024
76%
Among those facing food insecurity, 76% are employed, indicating that having a job does not necessarily protect against hunger.
WHAT DID WE FOCUS ON?
Our Problem Statement
How might we use local networks and food assistance programs to connect low-income consumers with affordable, healthy, ready-to-eat produce from local farmers?
02
Design Process
LO-FI, MID-FI, HIGH-FI
Our Wireframes Process
Lo-FiWe began with the lo-fi wireframe process where we played around with the user experience of our idea and the pages/flows that we may need.
Mid-FiOur next iteration focused on visual design elements including color and typography. While we initially pursued a cartoonish style, we ultimately chose a more refined aesthetic to better align with our goal of creating a credible, professional web presence.
High-FiIn our final wireframes, we incorporated actual images and refined the sizing to create a realistic representation of the finished website.
Style GuideHere’s a look at the final style guide that we followed for our website design on Figma and Code.
Dev Design Decisions
Since I was a developer as well, I wanted to share our tech stack and design decisions too!
One of the biggest things we had to do for the project was creating our own dataset because we couldn’t find a local dataset to work with. We created and formatted our own JSON file with the necessary fields.
03
Features
WHAT’S IMPORTANT
What pages/features did we decide to incorporate?
Baskets Page
Filter produce baskets based on type, variety, and price
Utilize the search bar to quickly find the specific baskets they are looking for.
Add baskets to their cart and proceed to checkout
Community Page
Browse a monthly calendar, where available food drives are displayed upon selecting a specific date
Click on an event where they are encountered with pop up box with details of the event
Click “Check it out” to learn more about the event.
Resources Page
View programs such as SNAP and Hunger Free Washington
Click on the buttons to learn more
LIVE WEBSITE
Checkout Our Live Website Below!
04
Future
FUTURE CONSIDERATIONS
What we might want to do further down the road
Language Accessibility
More language options to make it accessible to people from other countries
Recipe Integration
Suggest simple and budget friendly recipes that can be made using the basket contents
Map Integration
Incorporate an interactive map to show food drive locations, with directions and accessibility options