Mobile, UX Design

Connecting the supply and demand in food donation

Scroll down to learn more

'I'd like to donate food to help those in need, but it's so complicated...'

-- Spencer*, a working professional on food donation
(* Pseudonyms are applied to ensure anonymity.)

This was an 8-week master's course project. The prompt: Design an equity-driven solution. Deliver a working prototype and a pitch.

We identified the rising food insecurity issue and the gap in donation supplies as the design problem: Scaling and facilitating individuals' food donation to meet the demand at redistribution organizations.

the problem

42+ million people in the US have no stable access to healthy food. The number is rising every year. As much as individuals want to help, inaccurate donation actually leads to more waste. There were not enough donors to support the demand as well.


8 weeks (Oct-Dec 2021)

My Role

Product Designer
Project Manager

Key Skills

Concept Ideation
Information Architecture
Usability Testing
Wireframing + Prototyping
Project Management

Hungry Birds

Claudia Pang
Helen Xu
Namrata Panchumarti

The creator of foodo - team hungry birds
our goals + success metrics

We aim to...

  • Help users meet organizations' needs
  • Facilitate users' donation process
  • Scale and sustain impact

How to measure success?

  • # of generated donation lists;
    # of delivered wishlist donations;
  • # of completed pickups;
  • # of new users; % of recurring users
A sneak peek at our solution

We came up with an app-based platform, Foodo, that scales individual donation by facilitating the donation process.

Identify what organizations need
Key feature 4 interaction showcase - how to schedule donation pick up at your doorstep
Customize and generate donation lists
Key feature 2 interaction showcase - how to generate donation lists according to demand
Donate directly from online wishlists
Key feature 2 interaction showcase - how to donate from organizations' online wishlists
Schedule donation pickup at doorsteps
Key feature 4 interaction showcase - how to schedule donation pick up at your doorstep
phase 01
to kick off

We started off with the idea of repurposing household food surplus for those in need.

I led the team to identify research methods and consolidate findings to define our vision.

Secondary Research
To get background knowledge on the topic, we reviewed published reports and articles.
We analyzed articles and reports
Semi-Structured Interviews
We conducted 9 interviews with people of varying donation experience to dig into the what and why behind their actions.
I interviewed donors using Zoom and a semi-structured method
Key insights
Individual donors can bridge the gap

Organizations often collaborate with businesses for food supply. However, individual donors can provide extra support when businesses fail (e.g. in pandemic).

Donations that doesn't meet organizations' demand lead to waste

Receipt of unfit or unsafe food results in more waste.

Organizations may have specific needs that are different from other organizations, based on the communities they serve.

'We don't have enough storage space for refrigerated goods. So if people can't take them fast enough...we'll have to throw food away.'

People are unsure whether household food surplus is suitable for donation. Also, household surplus are hard to track and manage.

Convenience is key. People without cars or live far away may lose motivation if donation is regarded as an extra chore.
'I do know that the food bank is only a 20 min bus ride away. But...I don't have the time to make a trip for it.'

The sense of ease is crucial for individual donors to act
phase 02
define + develop
The big pivot
We realized that facilitating the collective efforts of individual donations can really make a difference, while reusing household food surplus is not suitable.
  • Household food surplus, however large in total, is still relatively small and cannot meet the demand for food
  • People feel uncomfortable donating food surplus as improperly preserved food may cause health risks
  • Managing food surplus is considered different from donation, and people think of it as more helpful for their own food waste management
design question

How might we scale individual food donation to meet the needs of food charity organizations?

who are the target users?

I led the conversation to prioritize active donors, as they are essential in adopting/scaling the system and motivate potential donors.

We decided to prioritize the needs of recipients relying on donation sites, as the organizations have an established system to support people in need and we can effectively scale impact by meeting their demand.

Thus, the stakeholders also include staff and volunteers at donation sites.

identify scenarios + requirements

We brainstormed ideas and tested with donors.
Then, we focused on facilitating accurate donations that meet demand across the donation process.

Identify what's in demand

Locate donation sites nearby
View organizations' demand lists

Prepare based on demand

Purchase at local stores with a list
Order food through online wishlists

Deliver donations with ease

Schedule donation pick-up
Donate myself or help others deliver

phase 03
design + evaluate
what i did in the design process

Ideate + Design

01 Information Architecture
I led the team to create the information architecture in Miro. Through user and class feedback, we went through a total of 6 iterations.
02 Low + mid-fi wireframes
I synthesized insights and information architecture to create low + mid-fi wireframes for concept testing.


03 Concept testing
We presented mid-fi wireframes to class members to gain feedback.
04 Usability testing
We tested with 5 participants to identify usability issues and validate feature ideas.


05 Insights-driven changes
I improved the information architecture, design, and copy based on testing insights.
Key task flows of foodo
Key task flows of Foodo
success metrics-informed design decisions

We designed our prototypes based on design goals and requirements identified in research.

Success metrics + user feedback guided my decisions for wireframe/prototype iterations.

I conducted usability testing
design goal 01

Help users meet organizations' needs

Key task flows - plan + prepare
Key user flows for goal 1: help users meet organizations' needs
design goal 02

Facilitate users' donation process

Key task flows - donation pick-up
Key user flows for goal 2: facilitate users' donation process
Key metric

# of completed donation pickup

'If I can't get the food to donation sites fast enough, it'd contribute to more waste. But I often don't have time.'

-- Liz*, donor on struggles for donation delivery

design goal 03

Scale and sustain impact

Key metrics

# of new users; # of recurring users

Due to time constraints, our MVP product did not involve detailed design for retention and volunteer onboarding. These will be the focus for the next phase of Foodo's design development.

I created the concept map for Foodo to scale and sustain impact.

Clickable prototype

Enjoy our prototype below!

what did people say about foodo?

'The concept of utilizing the gig economy, friends ,and family for food donation is what moved me the most.'

-- Course instructor

'I love your product because this is very encouraging and can break the wall to start donation.'

-- Donor and graduate student from class

next stpes

🀝 Diving into volunteering for drives

We need to dive deeper into the volunteer mindset and mechanisms to involve volunteers.

More research on the logistics of initiating food drives and interviews on volunteers' motivations are needed to ensure continued participation.

↔️ Scale coverage + impact

The next leap for us would be allowing individuals to order or request food. Providing ordering systems on the app or at donation sites can help us support more people in need. However, more research on food recipients is needed to understand their technological usage, food receiving behaviors, and thought process.

what i could do differently

πŸ˜… Involve experts + competitor analysis early

Involving more experienced donors and volunteers would provide us with more in-depth insights to design solutions that further meet their needs.

More thorough analysis on the competitor landscape or conversations on how to connect existing solutions could potentially help us scale coverage to more food recipients.

what i learned

🧐 Mind the unintentional consequences

We need to be mindful about the consequences of our design. I learned from our concept testing that people are worried about creating more waste if they cannot accurately meet the demand. Thinking through all possible scenarios, designing responsibly, and testing with people across each design phase can help!

Other Projects

A great fit!

Say hi!

How might we help people prepare for mountaineering safety?

winning grand prize at 2019 user experience design award


To participate in the UXD Award, we were challenged to 'design to connect human experience'. Connected like never before, we had a unique opportunity to improve public safety through the power of people.


As more and more people join the quest for the summits in Taiwan (+32% YoY), cases of hikers getting lost, hurt or even deceased have seen a +60% YoY increase. The team wanted to explore how might we design solutions that help improve hikers' safety.

A 10-month research-driven passion project winning the 11th UXD Award competition.

My profile pictureTeam member's pictureTeam member's pictureTeam member's picture
Product Design;
UX Research
Project Lead;
Product Manager
Experience Design, Research
Product Manager
Team member's pictureTeam member's pictureTeam member's pictureTeam member's picture
Visual Design
Motion Design
UX Research

I led the end-to-end product design efforts.
Research, strategy, ideation, wireframing, lo+mid-fi prototyping, testing, and storytelling.

Solution overview

Mountain Guru is a cross-device solution that makes mountaineering safer by providing actionable guidance in moments hikers need the most.

exploratory phase

to kick off

We looked into hikers' mountaineering journey and found that the preparation phase is key in defining safety, regardless of experience level or trail difficulty. Then, we defined the design vision.

User Interviews (n=6)
I spoke with hikers with different experience levels to understand the respective mountaineering journeys and pain points.
I conducted user interviews
Secondary Research
I reviewed reports, analysis, and regulatory resources to identify the causes of mountaineering accidents and laws & regulations.
I did secondary research to inform vision

our opportunities

Hikers often start their hike with social-fueled influences

Often driven by invitation from friends or updates on social media. One key decision is whether to hike with self-formed groups or commercial ones.

Self-formed groups are 6X likelier to face accidents than commercial groups due to insufficient preparation.
The danger of social media-fueled interest is that inexperienced hikers may choose trails beyond their abilities.

Challenging to find suitable benchmarks. Underestimation or misjudgment of situations. Insufficient training or preparation both physically or gear-wise.
40% of mountaineering accidents are due to hikers' inexperience.
'I brought my usual winter jacket and thought it'd be enough.' -- a 28-year-old hiker

Insufficient preparation leads to difficulties and danger
I mapped out the full mountaineering journey
  • Complexity of the journey is dependent on experience. The journey of beginners covers that of an experienced hiker.
  • Preparation is key. There's no second chance as what people bring -- physical condition and gear -- are what they have in the mountains.
I mapped users journeys and key tasks to identify opportunities

Design question

How might we help people prepare for mountaineering safety?

generative phase

diving deeper

We further explored the why, the barriers, and the complexities in the preparation process. With the insights, we defined our design goals.

User Interviews (n=18)
We explored the planning and preparation process of hikers from different experience levels to understand the essentials.
We did rounds of semi-structured user interviews to gain insights
Expert Interview (n=6)
We interviewed experts from mountaineering association, trekking guide, and UX industry to learn about their point of view.
We interviewed experts to get industry feedback
Experience Audit + Generative Workshop
We tried out resources to grasp what it takes to be prepared. Then, we sort through findings.
We did an internal generative workshop to sort through findings and navigate through the next stage

identifying major pain points

The complexities of planning

There are various decisions to make, equipments to prepare, physical condition to train, and routes to plan.
Information can be scattered all over the place, outdated, or unsuitable.
'I just don't know where to start.' -- a 23-year-old hiker

The reliance on experiences

Each trail is different. Lack of relevant knowledge and experience can result in immediate danger.
Dependence on others' update for trail condition and changes.

'Some info can only be learned from hikers who just visited the trail, such as sections blocked by landslides.' - a 56-year-old hiker

The difficulties of timely assistance

Signals are unstable or non-existent in the mountains. Rescue missions are constrained by weather and trail conditions.
Preparation and knowledge are essential for sudden challenges in mountains.

'Helicopters are not allowed in foggy weather. In terrains unsuitable for helicopter landings, victims can only wait for rescue.' - a mountaineering guide

defined Design Goals

  • Make mountaineering planning easy to work on
  • Simplify and motivate experience sharing

Success Metrics

  • # of users finalize plans with the service;
    % of recurring usage; user drop rate
  • # of user uploads;
    % of recurring sharing behavior

ideate + evaluate

exploring + validating ideas

We explored directions and variations through iterative concept testing, expert review, and contextual inquiry. We then nailed down concept directions and refined design principles.

Storyboarding + Low-Fi Mocks for Concept Testing
(4 rounds, user + expert interviews)
We came up with various concepts throughout the process. Once the concepts were consolidated, I led discussions to create storyboards, sample user flows, or lo-fi mock ups to showcase key interactions and gain feedback.
I created a variety of materials to test our concept with users
Contextual Inquiry + Observations for Concept Validation (personal try-it-yourself testing)
To validate insights, concepts, and feasibility, I trained myself to complete a 3-day trekking trail to Mt. Jade, the highest peak in East Asia, as a form of contextual research. I also observed and inquired fellow hikers along the way.
1. Hikers rely on experience to react to emergencies.
Hikers can only rely on experience in times of emergencies. I encountered sections where trail got lost to landslides, and I relied on experienced hiker to navigate the way.
2. With thin air and gear weight, physical condition is key to a safe return.
When the air is thin and hikers have gear on their shoulder, physical condition directly links to whether they can return safely in a multi-day hike
3. Some survival tips can only be learned through experience.
Some survival skills can only be learned through experience. I learned how to find water in areas where there's no streams and rivers by following the lead of fellow hikers

what i found


πŸ€” People prefer a cross-platform solution across the mountaineering journey: make plans on desktop, track records via wearables during hikes, and upload memories afterwards via mobile.
☝️ People prefer to complete all tasks in one platform.


πŸ€” Start guiding at the moment people consider to hike.
😊 People seek a step-by-step preparation method where they make sure everything is covered.
🀝 Prompt active sharing of experience when people are most engaged -- no longer than one week after they complete the trails.

User Experience

πŸ‘Œ Engage users to complete key actions through bite-size pieces.
πŸ‘‰ Provide clear next steps and facilitate the process.
🀝 Connect and motivate users to facilitate experience exchanges.

what i did

Refined Direction

A cross-device solution that help formulate mountaineering plans, connect the inexperienced with experienced, and enable on-trail updates.

Defined Design Principles

Mountaineering Planning Breakdown

'I want to get step-by-step guidance to make sure I don't miss anything.' -- an interviewee

Information Exchange for Trail Updates

'Having the most up-to-date info is key.' -- a mountaineering guide

Hikers Network

'I want to find the guides that can help me hike the trail safely.' -- an interviewee

design + evaluate

insights-driven iteration

I designed wireframes and lo + mid-fi prototypes to gain feedback and iterate.
We did 4 rounds of offline usability testings (n=20) to refine design and concept.

key design space 01

Breakdown the planning process to actionable steps

the goal

How do we make the process actionable and easy to follow?

I led the discussions to identify the essentials and created mocks. Then, we tested with users.

first version

We started off focusing on the journey breakdown

Our first version of hi-fi design highlighted the steps in the journey.

A. Key preparation steps
Helpful to navigate the steps.
❌ The linear nature between the steps is unclear. Copy needs to be revised.

B. Breaking down trail sections
The concept is useful for planning.
The current presentation is unnecessary and cannot provide useful information.

C. Key info in each section
The info is much needed and users do want to have some images to identify key landmarks.
❌ More details on the exact location would help users prepare.

second iteration

Providing essential information on each step

I created mid-fi prototypes for testing.

A. Key preparation steps
Clear to follow through each step.
❌ Too many sub-steps cause frustration.

B. Breaking down trail sections
Helpful to know the current status.
The design is unhelpful for visualizing slope, or context of location.

C. Adding details
Details about key landmarks are helpful for users to identify the path.
❌ It's unnecessary to have so many pictures.

third iteration

Deep dive on essential info

I created mid-fi prototypes for testing.

A+B. Separate core preparation phase (B) with sub-steps within each phase (A).
Distinguish the two for better hierarchy. Move sub-steps to the right to help users focus on task at hand.

C. Ensure essential information is included and properly presented.

D. Streamline unnecessary info
Remove unnecessary images and info.

final design
A showcase of our final design for breaking down the preparation processes
key design space 02

Keep up-to-date via information exchange

helping users stay on track

Optimize navigation with hiker network's updates

A. Offline navigation
Guiding users from one landmark to the next, with estimated arrival time to make accurate decisions.

B. Voice notification
Based on hiker network's update about trail condition, the system provides pre-downloaded voice notification when users arrive near the GPXΒ location.

C. Low battery mode
During the battery-saving mode, only the navigation feature would remain.

the pivot

'I need both hands to steady on the trail.'
'Staying on the right trail and knowing your progress are essential to safety.'

I found that mobile solutions have limitations in supporting hikers on the go. Hikers often tuck phones away as it's dangerous to use during hikes.

However, using offline GPX maps is key to track progress. Thus, I led the design of helping hikers navigate through wearable solutions.

Hikers may need to use both hands to cling to the cliff when hiking

Integrate wearables to enhance safety

As a lot of hikers already have the habit of wearing wearable devices to track physical condition, integrating wearables into the system would reduce risk of using mobile phones.

A. Up-to-date route info
Based on other users' updates, users would receive GPX-enabled voice notification during the hike.

B. Estimated arrival time
Based on users' activity data and other users' data input, the system provides timely estimation of arrival time to the next key location. The system would also show status of arriving 'on time', 'early', or 'late'.

C. Progress check
The system displays activity data to help users monitor progress. Key data points include distance, altitude, and speed.

ensuring a sustainabile system

How do we motivate and facilitate trail condition update?

As hikers rely on fellow hikers for latest updates, ensuring a user-friendly system was key. We came up with a mechanism that allows hikers to input updates with voice, while the system would convert voice to text, and add GPX note for easier tracking and uploading after connecting to the internet.

Enable users to upload trail updates with ease

A. Instances saved with GPX tags
Files are automatically tagged with GPX notes. When users upload the file, it will be sorted to GPX maps online according to its location notes for accurate information.
B. Modify content with ease
Users can choose to add photos, edit, or delete instances as they see fit.

final design
The final design is a complete system that allow users to get accurate guidance and help others at the same time
key design space 03

Connect hikers to exchange experiences

adding human elements

'Some details can only be answered by those who are familiar with or just visited the trails.'

I led the iteration of designing a network for hikers to match with professional guides that are familiar with the desired trails, and find people that visited the trails recently.

first iteration

Matching professional guides

We started with focusing on helping users find suitable guides as it is an effective way to reduce risk.

A. Guide intro
πŸ‘ Provide a clear overview.
❌ UI background is distracting.

B. Build trust with info on experience, skills, and pricing.
❌ Not all information is essential. Users prefer to see evidences of the guide's experience rather than descriptions of it.

C. Upcoming tours
πŸ‘ Clear overview of available dates.
❌ Calendar-view is unnecessary. Users care about the date range and availability.

second iteration

Showcase the hiking guides with only the essentials

I created mid-fi prototypes for testing.

A. Showcase key skills
πŸ‘ Allow users to search with skill tags.
❌ The skills may be irrelevant as the core skills needed differ by trail and season.

B. Available tours +status
πŸ‘ Clear overview of tours and availability.
❌ Users are often browsing around for trustworthy guides, and prefer to book available tours after they feel that the guide is credible.

C. Build credibility with blog posts and experience sharing
πŸ‘ Good to visualize and deep dive into the guide's experience.
❌ Users prefer to see more images of the guide's diverse experiences first, and further read content after they get interested.

third iteration

Find guides based on mountain/trail

I found that users want to find guides that are truly familiar with the trails to ensure safety. Thus, I led the iteration of sorting guides by trails, and streamline information.
A. Show top guides for the trail

B. Find out available tours or DM the guides
If users are interested, they can choose to resume to next steps.

C. Showcase recent experiences with the trail

D. Showcase reviews highlight

Find hikers that visited the trail recently

To facilitate hikers' exchange and identify latest updates, we came up with a trail-based system for users to identify the experienced hikers and ask for updates.
A. Showcase the latest persons that finish the trail
Community members can then message the person and learn about the specific updates.

B. Get notified when there's updates

C. Showcase the people that also finish the trail
Chronological order to help users identify recent visitors.

D. Q&A chat forum
Users can post questions and answers in forums to learn about the latest info.

key final design
The final design of hiking guide's info page

Winning UXD Award!

I had never imagined that our UX study group project could get this far to winning first place among 871 teams in the 11th User Experience Design Award!

The whole team flew from Taipei to Shanghai to pitched our story in front of jury presented by UXPA China.

The winning team of UXD Award

Moving Foward

Reflecting on our MVP design, we'd need to dive deeper into

πŸ€” How might we simplify the UI and make the process of planning more engaging and motivating for users to follow?
πŸ€— How might we tackle the emotional challenge and encourage users to actively participate in experience sharing?
πŸ₯° How might we build trust in the ecosystem to facilitate positive changes?

We might need to deep dive on the data utilization and recommendation algorithms to ensure balancing accuracy with privacy. We'd also need to dig into users' considerations regarding selecting commercial groups and their attitudes towards data sharing.

what i learned


As a researcher, product designer, and collaborator, I learned a lot through the process. The exchanges of ideas between the interdisciplinary team was the key that helped us overcome challenges, constantly ideate and test new ideas, and develop a solution that we're proud of!

Product Design

The experience of setting standards, managing product development, conducting user research & usability testing, translating insights into product strategy, and working with an interdisciplinary team are valuable lessons that I'd like to further nurture as I grow.


8 Weeks

My Role

Visual Design
Brand Identity
Interaction Design
**Individual project

Key Skills

Design System, Typography, Logo Design, Wireframing, Brand Strategy, Figma


The Vera Project is a home to Seattle's creative community. Their mission is to provide a safe space for people to express themselves, learn skills, and foster community transformation via music and art.

In this project, I redesigned the website and branding guidelines for The Vera Project as a way to enhance their visual identity as a creative community.

The Current Look of The Vera Project
An image showcasing the current look and feel of The Vera Project's logo, website, and Instagram
Design goals
Stand out from the crowd
The Vera Project competes against other local organizations for people's time and attention. An instantly recognizable and strong visual branding will help Vera boost brand awareness.
Coherence across channels
The Vera Project communicates with its audience across various digital touch points. It's key to retain visual consistency to ensure seamless and consistent brand narratives.
Fun and creative
A home to Seattle's local creative communities, The Vera Project promotes youthful, dynamic, and creative expressions in art & music.
the logo
A geometric lettermark logo represents The Vera Project -- community, creativity, and youthful energies.

This approach allows branding while does not constrain the space to specific pictorial association.

The simple form allows the logo to serve as a container for images or patterns.

My logo design for The Vera Project
gird system
A variety of geometric shape overlays creates visual dynamics and structure.

The distinctive look signifies a sense of creative energy where elements are connecting in space.

The Overlays

The overlaying rules follow the key element in each content section (usually the largest component). Then, indent or extend the overlaying asset(s) by 1 column width.

An image showcasing the grid system of the overlaying rule
The Dynamic Circles

Circle elements are visible in each content section to create dynamics in composition and guide visual flows. They are flexible components free of alignment or overlay rules.

An image showcasing the grid system of the usage of circle
2 sans serif typefaces ensure a modern and sleek look for The Vera Project

Considering the dynamic and geometric nature of the visual system, the typefaces focus on readability, with varying weights to create hierarchy and nuance.

The compact tracking of Oswald helps create a sleek and modern look. The uppercase treatment adds emphasis.

A common Sans Serif typeface, Roboto is highly readable and compliments well with Oswald. The uppercased titles help add emphasis.

An image documenting the typography
color palette
Two main hues of split complementary color schemes create nuance and balance in the dynamic compositions.

The pair of both warm and cool colors enhance the creative and humane quality to the identity. The value of the colors are set to provide sufficient contrast when used against each other.

The secondary accents complement the palette and offer enough range to establish a clear visual hierarchy and readability in various settings.

An image showcasing the Hex code for the color schemes
Imagery features artistic and musical activities with a sense of liveliness.

Reduced saturation and tinted warm-tone unify the images, ensuring visual consistency and overall cohesion.

The imagery should showcase The Vera Project’s welcoming community and evoke interest in its creative activities.

An image showcasing the imagery guideline

See how the visual system applies on website and social templates.

All images are courtesy of Unsplash and the artists. The usage here is for demo purposes only.

An overview of the final application on websiteAn overview of the final application on mobileAn overview of the final application on social templates