←  Back to portfolio
Diablo Valley College · ARTDM-172 · Team UX Project

Share Plate
food, found faster.

A mobile concept that helps people find trustworthy, current food-assistance information nearby—including hours, availability, eligibility, language support, and directions—without wasting a trip.

My role
Lead UX Designer & ResearcherResearch synthesis, IA, flows, UI, prototype, and test analysis
Team
Hunger Warriors · 2 peopleZafar Sahel and Nadia Abdoun
Timeline
10 weeksFall 2025
Tools
Figma  ·  FigJam
Maze  ·  Google Forms
Wireframed & prototyped in Figma Sketched & synthesized in FigJam Usability-tested in Maze

Project status: interactive concept prototype created for a college course; not a launched service.

Share Plate community feed screen
Share Plate find food banks screen
Recruiter quick scan
ContextCollege team projectDVC · ARTDM-172
RoleLead UX designerResearch through prototype
Research5 interviews32 survey responses
Testing7 participants8 usability tasks
Core insightTrust, not discoveryFreshness and language matter
StatusInteractive prototypeConcept, not launched
Problem

Food help exists, but the information is often unreliable.

Participants described outdated hours, unknown stock, language barriers, and information scattered across websites, flyers, and word of mouth. A failed trip costs time, transportation, and trust.

Product direction

Design around verified, time-stamped resource information.

Share Plate proposes one phone-first place to check current hours, availability, eligibility, language support, directions, and alerts—plus a channel for partners to keep listings current.

My contribution

I led the product structure and end-to-end experience.

I led research synthesis, personas, empathy and journey mapping, information architecture, user flows, visual design, the Figma prototype, and Maze test setup and analysis. Nadia Abdoun co-led interviews and secondary research and contributed to ideation and prioritization.

What testing revealed

Direct navigation worked; resource discovery did not.

Participants completed all tasks, but discovery tasks produced high misclick rates and one task averaged 104.4 seconds. The evidence pointed to clearer categories, labels, and menu hierarchy—not another visual-polish pass.

Product thesis

The central problem was not a lack of programs. It was whether people could trust the information enough to make the trip.

01
Stage 01

Empathize

We began with five interviews, a 32-response survey, and secondary research on food insecurity in the Bay Area. The goal was directional learning: identify where people lose time, confidence, and dignity while looking for help.

Research goals
  • Understand how people currently find food assistance, and where that process breaks down.
  • Identify the practical and emotional barriers keeping people from using existing resources.
  • Find the gap between what official directories offer and what people on the ground actually need.

Methods used

1:1 user interviews (5) Google Forms survey (32 responses) Competitive analysis Secondary / desk research Empathy & journey mapping
Method note: This was a small, directional college study—not statistically representative. Interview names shown in the case study are pseudonyms, and personas combine recurring patterns from the research.
Who we designed for
Portrait used for the Mary persona

Mary

Retired · 70–80 · Lafayette, Contra Costa County
"The Meals on Wheels breakfast bag isn't just about food — it's a lifeline."
Bio
Independent, enjoys knitting and walking her dog; comfortable with a smartphone and social media.
Goal
Keep a reliable source of food now that a program she relied on has been cut.
Pain point — Meals on Wheels had to cut its "Breakfast Bags" program, which Mary depended on.
Portrait used for the Mustafa persona

Mustafa

Student / car washer · 20–30 · Berkeley, Alameda County
"Tomorrow must be better."
Bio
Bilingual, hardworking, pursuing an associate degree while washing cars to get by.
Goal
Stretch a limited income and get his degree; needs information his non‑English‑speaking family can use too.
Pain point — Grocery prices keep climbing against a low, unstable income.
Empathy maps

Mary

Says
  • "Stopping the Meals on Wheels breakfast bag program was a shock."
  • "Assistance programs are key for the elderly."
  • "An app with resources sounds like a good idea."
Thinks
  • "I may need to check other food programs."
  • "Maybe I should start saving for the hard days."
  • "I'll call my church to ask about food assistance."
Does
  • Smiles after answering questions.
  • Sits calm, shoulders relaxed.
  • Tells a story about a neighbor facing the same situation.
Feels
  • Anxious about losing a program she relied on.
  • Reassured thinking of her church as a backup.
  • Hopeful a trustworthy app could help her stay independent.

Mustafa

Says
  • "Working long hours but struggling to afford groceries."
  • "Went to the food pantry, but found no food."
  • "My family doesn't speak English — a bilingual app would help."
Thinks
  • "I'll double‑check the pantry's opening time before going."
  • "I'll study hard, get my degree, get a better job."
  • "Real‑time information in an app would be great."
Does
  • Glances at his wristwatch.
  • Asks if this is a paid interview.
  • Has a worried look in his eyes.
Feels
  • Worried about grocery prices.
  • Confused about pantry opening times.
  • Hopeful that tomorrow will be better.
Journey maps

Mapping each persona's imagined path through a food‑finding app surfaced exactly where trust breaks down — and where an opportunity was hiding.

Mary's journey map
Fig. 01 — Mary's journeyOpen app → after visit
Mustafa's journey map
Fig. 02 — Mustafa's journeyOpen app → after visit
What five interviews told us
Ahmad
38 · Taxi driver · Concord

"I work more than ten hours a day but still can't keep up with grocery prices."

InsightWorking adults still need help — timing and access matter as much as availability.
Leila
31 · Single mother, part‑time salon worker

"The hours online don't match real times. I called three places before finding one that was open."

InsightNeeds one verified source with current hours.
Samir
26 · Immigrant student, gas station worker

"Sometimes I see posts about free food, but when I get there it's already done or it says English only."

InsightLanguage and clear status build trust and dignity.
Mo
40 · Tech worker & volunteer, Bay Area

"Volunteer schedules change without notice. I wish updates came directly from the pantry."

InsightVolunteers need live updates for shifts and donation needs.
Joan
32 · Part‑time retail worker, Bay Area

"I don't know which places are open or have food left. Info is often outdated."

InsightWants real‑time status and clear hours to avoid wasted trips.
Across 5 interviews + 32 survey responses
Trust, timing and language kept surfacing as the real barriers — not a lack of food programs.
Survey signal — 32 responses
73%
need food assistance weekly, monthly or more often
59%
have had trouble finding the right time or location to pick up food
58%
would use a mobile app for nearby food + volunteer opportunities
70%
currently rely on general websites to find food programs
Secondary research & competitive scan

What outside evidence confirmed

  • Need is high and varies sharply by neighborhood — county‑level dashboards from Feeding America and CA Association of Food Banks show uneven access, matching interview stories of long lines and wasted trips.
  • Program changes and closures create real gaps — local reporting on Bay Area pantries lines up with Mo and Leila's experience of schedules changing without notice.
  • Trust and accuracy matter more than feature count — national research names reliable info, clear eligibility and consistent hours as the top drivers of access.
  • Language and cultural access are essential — nonprofit guidance recommends multilingual communication; Spanish and Chinese are common needs in Bay Area data.
  • Hyperlocal beats broad directories — county dashboards lag and don't show live status, but that's exactly what our users wanted.

Contradictions & gaps we had to design around

  • Public dashboards are not real‑time — they clash with users' need for "is it open right now."
  • Official directories are usually English‑first while the communities relying on them are multilingual.
  • County‑level averages hide the neighborhood‑level spikes our interviews actually surfaced.

Sources: Feeding America (Map the Meal Gap 2024), California Association of Food Banks County Data, Stanford Data Lab food‑insufficiency analyses, Local News Matters Bay Area coverage 2023–2025.

Free produce sign and donated apples found on campus
Fig. 03Field evidence — outside resources
Hungry ad and donation box at DVC and public library
Fig. 04Field evidence — libraries & colleges
Competitive analysis — Share Plate vs. existing platforms
Feature Share Plate goal FoodFinder Feeding America 211.org WhyHunger
Real‑time updates Live status Sometimes outdated No No No
Multilingual support English, Spanish, Dari, Pashto English only Some regions Limited No
Map & directions Integrated map + filters Yes Yes Basic map Some
Volunteer matching Built‑in Very limited No No Limited
Donation tools Food, money, time Info links only No No No
Verification system Checked daily by partners Varies Partner data No No
User alerts Push (open/close) No No No No
Offline access Basic info cached No No No No
Accessibility Screen‑reader friendly Moderate Moderate Moderate Poor
Key insight — FoodFinder offers broad listings but lacks alerts and multilingual support. Feeding America has strong partnerships but data can lag. 211.org focuses on call support over a self‑serve app experience. WhyHunger leans toward advocacy over day‑to‑day usability. Share Plate's edge is combining verified, real‑time, multilingual data with built‑in volunteer and donation tools — a gap none of the four fully cover.
Patterns that shaped the direction
Patterns across users
  • Trust and accuracy are the main pain points, above feature richness.
  • Multilingual access is needed — Spanish, Chinese, Dari, Pashto came up repeatedly.
  • Phone‑first behavior: people look quickly and decide fast.
  • An emotional load sits underneath all of this — anxiety, embarrassment, frustration.
  • Volunteer coordination is unclear on the giving side too.
Notable anomalies
  • Some people trust 211 or community Facebook groups more than official sites.
  • A few respondents said "maybe/no" to using an app — they still want accurate info, just possibly through non‑app channels.
Why this mattersA verified, multilingual, real‑time source helps both families find food and volunteers know where to go.
02
Stage 02

Define

With research synthesized, we turned findings into a sharp point of view for each persona, then reframed their needs as design questions we could actually sketch toward.

Opportunity statement

How might we help people quickly find reliable food assistance — without confusion, stigma, or a wasted trip?

Design principles

Five commitments, pulled straight from the interviews, that every design decision had to answer to.

01

Accessible

Large touch targets, readable type, and screen‑reader‑friendly structure for people using the app under stress.

02

Trustworthy

The prototype makes verification status and timestamps visible because outdated information was the strongest recurring complaint.

03

Community first

The proposed service gives approved pantry and partner staff a lightweight way to update hours, stock, and urgent needs.

04

Inclusive

Language access is treated as a launch requirement to validate—not a future decorative add-on. Spanish, Chinese, Dari, and Pashto were recurring research needs.

Research → design → benefit

The throughline from what we heard to what we built.

Research finding

Users couldn't verify pantry hours before leaving home.

Design decision

Real‑time pantry status

User benefit

Fewer wasted trips, more trust in the app.

Research finding

Users struggled to find nearby resources quickly.

Design decision

Map & distance filters

User benefit

Less travel, faster access to help.

Research finding

Listings across the web were outdated and English‑only.

Design decision

Verified, multilingual listings

User benefit

Greater trust and dignity for every user.

POV statement — Mary

Mary NEEDS information about the current open food‑assistance programs BECAUSE she depends on those programs for some of her food.

How might we —
  1. How might we keep this information updated?
  2. How might we suggest backup programs?
  3. How might we connect programs with locations?
POV statement — Mustafa

Mustafa NEEDS access to food‑assistance resources BECAUSE he has a low income and rising grocery prices, and his family doesn't read English — a bilingual app matters to them.

How might we —
  1. How might we surface community stores with affordable prices?
  2. How might we show real‑time information?
  3. How might we point to resources at his community college?
  4. How might we offer the app in different languages?
Proposed verification model

“Verified and current” is the product promise, so the operating model has to be visible too. This is a proposed service flow for a future implementation—not a live integration built in the course project.

01Partner updateApproved pantry or program staff update hours, availability, eligibility, and language support.
02ValidationThe system records the source, update time, and an expiration window for freshness.
03Published statusUsers see “updated” and “verified” information directly on every result.
04Community reportUsers can anonymously report a closure, mismatch, or unavailable resource for review.
Product scope

Primary experience

Find verified food help → confirm availability and eligibility → get directions → report incorrect information.

Supporting features

Saved searches, alerts, support contacts, donation opportunities, and volunteer information.

Future opportunities

Partner update portal, multilingual localization, offline access, live inventory integrations, and advanced community features.

03
Stage 03

Ideate

We ran two rounds of a 6‑8‑5 sketching exercise on a shared FigJam board, kept every idea, grouped what repeated, then stress‑tested the raw list with a MoSCoW prioritization pass.

Sketched live on a shared FigJam board
6‑8‑5 sketching — round one
6-8-5 sketching exercise round one, hand-drawn wireframes
Fig. 05 — Home, food‑stock search, opening hours, volunteer, newsby Nadia Abdoun
6‑8‑5 sketching — round two
6-8-5 sketching exercise round two, hand-drawn wireframes
Fig. 06 — Home, map & nearby, real‑time status, available food, programs, offline modeby Nadia Abdoun

How we ran it

Each teammate did a short six‑eight‑five round to sketch quick ideas independently. We kept every idea and noted why it might help our users, then regrouped as a team, labeling clusters by user need and keeping anything that supported trust, accurate hours, language access, or simple navigation. That shortlist — plus the raw list below — fed directly into prioritization.

Raw features list
Finding & accuracy
  • Search by zip, city or neighborhood
  • Map and list views
  • "Open now" / "today" filters
  • Verified hours with timestamp + verifier
  • Notes on ID, eligibility, capacity
  • "Report a problem" button
Access & language
  • Language choice on the first screen
  • Large‑text mode, simple reading level
  • Read‑aloud on key pages
  • Share by text or WhatsApp
Navigation & planning
  • Directions by car, bus, walk time
  • Save favorites and recent places
  • Calendar reminders for pantry days / shifts
Trust & safety
  • Source badges for county / nonprofit partners
  • Last‑updated date and time
  • No account required to search
  • Simple privacy note
Volunteer & partner side
  • Short update form: open / closed / notes
  • Photo upload for signs and flyers
  • Basic approval flow for trusted updaters
Future nice‑to‑have
  • Offline saved list
  • Alerts for sudden closures on favorites
  • On‑device eligibility checker
MoSCoW prioritization
Must have
  • Search (map + list view)
  • Eligibility checker for food programs
  • Language options
  • Notifications
  • Search bar
  • Emergency contacts access
Should have
  • Ability to share a listing
  • Save feature
  • Filters (distance, hours, dietary options)
  • Create account
  • Volunteer sign‑up
Could have
  • Social hub
  • Partner info (food banks, schools, grocery outlets)
  • Social media integrations
  • Community resources (schools, libraries)
Won't have (this round)
  • Offline mode
  • Alerts for sudden closures
  • AI chatbot
04
Stage 04

Prototype

From the Must‑Have list, we mapped the information architecture, sketched low‑fidelity wireframes, set a style guide, and built a full high‑fidelity prototype screen by screen.

Core experienceFind → verify → understand eligibility → get directions → report an issue

Interactive prototype

Open in Figma ↗
Sitemap

Six main sections branch off Home, each opening its own set of task-specific screens.

Home
Search bar  ·  Closest food locations  ·  Closure/emergency alerts  ·  Shortcuts
Resources
  • Food assistance programs
  • Apply for SNAP / WIC
  • School meal programs
  • Housing support
Get Support
  • Call · email · live chat
  • Emergency contact (211)
  • FAQ
Community
  • Feed
  • Events
  • Programs
Donations / Volunteers
  • Donation centers
  • Accepted items
  • Volunteer sign-up
News
  • Breaking news
  • Featured stories
Profile
  • Edit profile
  • Saved searches
  • Notifications
  • Login / sign up
Core user flows

Mary — find a program near her

Home
Search
Available programs
Click search result

Mustafa — get to the food

Home
Available food stock
Select location
Get directions
Style guide
Sprout Green
#66B37A
Primary — buttons, highlights, icons
Forest Green
#3D8553
Headers, hover states, contrast
Sunlight Yellow
#FAD646
Accent — CTAs, alert highlights
Mint Mist
#F5FAF7
Soft neutral page background
Charcoal Gray
#2B2B2B
Primary text
Warm White
#FAFAFA
Text on dark buttons / headers
Soft Sage Gray
#D6E2D3
Separators, input outlines
Clay Red
#D05E3A
Errors, warning icons

Type scale runs from large display headings to compact UI labels. Icons are paired with text labels and should be validated across languages rather than assumed to be universal.

Typography
  • Display / headings — Fraunces, 600–700
  • Body & UI — Inter, 400–600
  • Labels & data — IBM Plex Mono
Components
  • Rounded cards (22px radius)
  • Pill buttons & badges
  • Status chips (yes / partial / no)
Spacing & grid
  • 1180px max content width
  • 24px card gutters
  • Responsive 1–4 col grid
Accessibility

The prototype demonstrates several accessibility-minded choices. Full accessibility still requires implementation and testing with assistive technologies and multilingual users.

Demonstrated in the prototype
Large touch targetsButtons and list rows support quick, accurate taps.
Plain-language labelsStatus, hours, eligibility, and directions are surfaced before secondary detail.
Consistent navigationRepeated patterns reduce memory load for stressed users.
Search without mandatory account creationThe core discovery journey does not depend on a profile.
Requires implementation and validation
Screen-reader testingValidate reading order, labels, errors, and map alternatives.
Dynamic text and zoomConfirm layouts remain usable at enlarged text sizes.
Multilingual localizationUse human-reviewed translations and test comprehension in context.
Keyboard, switch, and reduced-motion supportValidate beyond the visual Figma prototype.
Low‑fidelity wireframes

Before visual design, we wireframed every core screen at low fidelity to lock the structure and flow.

Wireframe: login or sign up
Login or sign up
Wireframe: login
Login
Wireframe: sign up
Sign up
Wireframe: food donation resources
Food donations
Wireframe: volunteer resources
Volunteer
Built & prototyped in Figma
High‑fidelity screens

The full prototype, organized by section.

Onboarding

2 screens
Login screen
Welcome back / Login
Create account screen
Create account

Home & search

3 screens
Find food banks screen
Find food banks
Search screen
Search
Food banks near results screen
Search results

Decision: Lead with current status, distance, hours, and a clear search path. Detailed eligibility information moves to the resource page so the first scan stays fast.

Resources & support

2 screens
Resources and support screen
Resources & support
Get support screen
Get support

Decision: Separate food discovery from broader support services, but keep emergency and benefits help reachable from the same system.

Community

3 screens
Community feed screen
Feed
Community events screen
Events
Community programs screen
Programs

Scope note: Community content supports the mission, but it is secondary to the verified food-finding journey and would require moderation before launch.

Giving & volunteering

2 screens
Donations screen
Donations
Volunteering screen
Volunteering

Staying informed

1 screen
News screen
News

Profile & account

4 screens
Profile screen
Profile
Edit profile screen
Edit profile
Notifications settings screen
Notifications
Saved searches screen
Saved searches
05
Stage 05

Test

We facilitated a usability study using Maze with 7 participants and 8 tasks across direct navigation, search, and resource discovery. The sample was small and directional, but it exposed a clear information-architecture problem.

Facilitated with Maze
7
participants
8
tasks tested
0
participant drop-offs
104.4s
slowest average task
What worked

Direct navigation was fast and predictable.

  • Volunteer page reached in 3.5 seconds on average.
  • Donation page reached in 4.4 seconds.
  • News, Support, and Notifications were reached in under 17 seconds.
  • These direct-navigation tasks recorded 0% misclicks.
What failed

Resource discovery created hesitation and wrong turns.

57.9%
misclicks · Find Resources
61.4%
misclicks · Search Food Bank
60.5%
misclicks · Community Programs

Find Community Programs averaged 104.4 seconds, pointing to unclear categorization, visibility, and labels.

Maze usability test heatmaps showing misclicks on Find Food Banks, navigation menu, and Search screens
Fig. 07 — Click heatmaps from Maze, round 1Find Food Banks · Nav menu · Search
Evidence → proposed iteration

The course ended before a full second validation round. The changes below are proposed revisions based on round-one evidence and are clearly labeled as not yet retested.

Before

Resource categories were spread across navigation and search.

Participants scanned several locations and misinterpreted “Resources,” “Programs,” and “Food Banks.”

Proposed revision

Move food-resource categories into one primary discovery hub.

Use clearer labels, visible category cards, and a prominent “Open now” or “Available today” entry point.

Before

Community Programs was buried inside a broad community structure.

The task took 104.4 seconds on average.

Proposed revision

Rename and reposition the category around the user’s goal.

Place “More food and benefits programs” beside food-bank results and test the label with new participants.

Status: revised direction proposed from evidence; not presented as a validated outcome.
Dignity, privacy & implementation

Protect people using the service.

  • Allow basic search without creating an account.
  • Ask before using precise location and offer ZIP/city search instead.
  • Avoid public labels that identify someone as food insecure.
  • Allow anonymous reports of incorrect listings.
  • Use plain, non-stigmatizing language and imagery.

Launch requirements beyond Figma.

  • Partner verification and role-based update permissions.
  • Listing expiration, review, and dispute workflows.
  • Data-retention rules for location, accounts, and reports.
  • Human-reviewed translations and accessibility validation.
  • Operational ownership when a listing becomes stale or unsafe.
Success metrics — beyond this course project

These are proposed post-launch measures—not outcomes from the college prototype.

Time‑to‑find
Median time from opening the app to selecting a resource.
Search success rate
Share of searches that end in a chosen, verified listing.
Repeat usage
Return visits per user over a rolling 30‑day window.
Pantry visit conversion
Directions requested that lead to a completed pantry visit.
Volunteer engagement
Active volunteers submitting status updates per week.
User satisfaction
Post‑visit rating on trust, ease, and dignity of the experience.
Task completion rate
Share of core tasks (search, directions, volunteer sign‑up) finished.
Listing freshness
Share of listings verified within the last 7 days.
Reflection

What I owned

I led research synthesis, personas, empathy and journey maps, information architecture, user flows, visual design, the low- and high-fidelity prototype, and Maze study setup and analysis. Nadia Abdoun co-led interviews and secondary research and contributed to ideation and prioritization.

Biggest product risk

The hardest problem is not navigation or visual design. It is maintaining credible data across many independent organizations. Without an operational verification model, “real-time” becomes another empty promise.

Most important test finding

Users could reach obvious destinations quickly, but broad labels such as Resources and Community Programs caused hesitation. Testing changed the priority from polishing screens to restructuring discovery.

What I would do next

Build the proposed discovery revision, recruit fresh participants who have used food-assistance services, test in multiple languages, and separately prototype the partner-side listing update workflow.

Hardest tradeoff

Users need quick scanning, while eligibility rules and documentation requirements can be detailed. The design surfaces status, distance, and hours first, then moves deeper requirements to the listing detail screen.

What surprised me

Participants rarely asked for more programs. They repeatedly asked for current hours, reliable availability, and language access. That reframed Share Plate from a directory into a trust-and-verification problem.