A mobile app that makes donating goods as efficacious, transparent, and convenient as possible.

UI/UX Design, UX Research, Visual Design


OverviewDesign DecisionsDiscoveryUser Research InsightsReframe the ProblemStoryboardsProduct MapDesign IterationsValue ExchangeReflections[BACK TO TOP]


In 2017, millions of people were and are being affected by natural disasters. With climate change being a major concern, we need to better support the victims of natural disasters. Donating money is the easiest way that many people choose. However, for people who cannot donate money, donating items also provides the opportunities for them to give. And the goods they contribute can still be helpful for the victims. How can we seize the power of technology to improve the current process of donation so that more people can contribute effectively?


lightHeart builds a communication channel between volunteers and donors regarding the needed items after disaster happens. By helping people understand what are the most helpful and providing the convenience of shipping items, it streamlines the process of donating goods. It also encourages people to embrace the habits of donating goods in their daily lives by making the donation experience memorable and rewarding.

Check out the interactive prototype for donors: here.

Tools: Interviews, Pen & Paper, Sketch, Principle, InVision
Duration: Nov. 2017 - Dec. 2017 (4 weeks)
Teammates: Zeeshan Rizvi, Elliot Allard
My Role: User research, Visual design, Interaction design

Design Decisions


Use pictures and stories to nudge people towards donating.

Research Insight: Donation is often a decision that is triggered by emotions.

Action: When users opens the app, they will be presented with various causes. The content is personalized based on their past donation history and what the local community is currently supporting. The severity of disasters will be encapsulated in images. When user clicks into individual cause, they can view the detailed story.

Result: A picture is worth a thousand words. Seeing the horrendous impact of natural disasters upfront, users are more likely to feel empathy and make a decision to donate.

Show donors the needed items in a non-intimidating way.

Research Insight: People often don't know what goods will be the most useful for the disaster victims. The further research shows that although NGOs sometimes list out the items needed on their own website, the long list can be intimidating.

Action: When user clicks on the "Donate Items" button in the cause detail page, they can see a repository of goods that are needed. The items are grouped by categories so that users don't need to face one long list. The icons further facilitate users to recognize items easily.

Result: Users gain a clear idea of what items are the most needed and are able to go through the list quickly.

Make the process of shipping donated items smooth and convenient for donors.

Research Insight: The cumbersome process of sending out the donated items deters people from donating.

Action: After users select the items they want to donate, they will receive an email with the list of indicated items and a shipping label so that they can drop their donations in the nearest postal office with no hassle.

Result: Since the current workflow is modeled after the standard product return procedure, users will have a sense of control. The easy drop-off lowers the barrier for busy donors to take actions.

When donors send in items, use QR code to streamline the process of data entry upon receiving the donations.

Research Insight: Humanitarian workers currently spend tons of time sorting the donated items and entering the data. They are also lacking channels to keep donors engaged in a long run.

Action: Once humanitarian workers receive the donated items, they can scan the QR code on the item list. The registered items will immediately show up on their phones. After they confirm, both the items and donor information will be added to their database. The repository of goods that are needed will be updated automatically on the donor's end.

Result: The QR code reduces the work load of manually entering the data. By the keeping both donor and donation information in one place, the app gives NGO staffs opportunities to keep in touch with donors in the long run so that they will be encouraged to donate the next time.

Use data science to help humanitarian workers generate a list of needed items faster and more accurately.

Research Insight: Currently, humanitarian workers often need to contact local organizations and groups manually to collect information on what is needed immediately and in the long-term. This process, entirely relying on human knowledge, can be potentially slow and unreliable.

Action: When the humanitarian worker sets up a new cause page, the system uses the key parameters (e.g., type of disaster, season) to search for items that were needed in the past similar disasters. It then generates an item list that the humanitarian worker can adjust based on the specific demands.

Result: The humanitarian worker no longer needs to worry about the delay in communication and can quickly publish the list of needed items in urgent situations. The data science approach also enables them to predict what items will be needed even before the disaster starts so that they can be more prepared.

Help donors validate an organization by showing their friends' past donations and the press release.

Research Insight: People are more likely to trust an organization if they see their friends or family have donated to that organization before, or if the organization has a positive presence in press.

Action: Users can check out the organization profile page, and view who in their circle of friends have donated to this organization before. NGO staffs can also add relevant press release to their profiles to establish credibility.

Result: Seeing their friends' past donations and positive press presence, people are more likely to donate.

Provide flexibility by allowing users to drop off their donations in the nearby donation center.

Research Insight: When there's donation centers nearby, people often prefer to donate in person rather than shipping the goods. In this case, the directions and open hours are essential for people to know.

Action: Users click on "Drop off Goods" button and then see the related information of nearby donation center.

Result: Users can immediately get directions to the nearby donation center. They will also be able to see the open hours and contact the donation center in advance if needed.

When donors drop off items in-person, use NFC to ease the item transfer process and add personal touch to the experience.

Research Insight: Even when donors donate in person, sometimes they just "dump" the items and may not feel rewarding. At the same time, NGO staffs need to spend hours sorting the goods afterwards.

Action: When donors bump their phone with the staff's, a "Drop off Now" button will appear on their screen. When they click the button, the items will be transferred to the staff's phone immediately. After the staff confirms the items, the donor will see an heartwarming message while all the donation data will be recorded on the staff's side.

Result: The action of bumping the phone is almost like a fist-bumping, giving donors and staffs a sense of connection and excitement. The transfer of donated items will also be easy and convenient for both sides.

Onboard users by supporting their regular donation process and including organizations that accept item donation all year long.

Research Insight: Currently, people usually donate items around their cleaning schedule. However, they are not sure what organizations or causes will accept things they intend to donate.

Action: Users can enter the items they want to donate in the search bar, and the system matches them with organizations and causes based on the items, distance, and their friends' donations.

Result: The app become a hub for donating goods so that users are motivated to download it even before the natural disaster happens.


To understand the current process of donations, I conducted 12 stakeholder interviews with 2 other students. We talked to 12 people who have donated either money or supplies at least once in the past 12 months to a charitable organization. I also did online research and examined media interviews of people who have spent time working at disaster sites to gain their perspective. The goal of this research was to broadly examine what needs, motivations and biases potential donors and volunteers have in order to build a solution that creates values for both parties.

The user journey maps below have demonstrated the key touch points that stakeholders will experience in the post-disaster donation context.

User Research Insights

The journey maps have revealed the pain points that donors and NGO staffs often encounter in the current donation process:

1. Lacking convenience deters people from donating.

"I don't have a car. If the donation center is too far away or not accessible by bus, I probably won't donate."

Even though many interviewees are deeply concerned about the cause, their tight daily schedule discourages them from donating if they are asked to walk the extra mile to do so. Thus, many of them choose to donate money rather than goods in the post-disaster context.

2. People want their donations to have real impact, and often distrust the NGOs.

"I was hesitant to donate because I saw that the organization was not using the donated money effectively in the news."

People want their donations to be used effectively. They often question the credibility of NGOs before donating. Social influence is critical to erase people's doubt. If they know their friends or families have donated to the same organization before, or if they see the positive presence of organization in press, they are much more likely to donate.

3. People don't know what items are the most needed.

"I'm still a student, so I can't afford to donate money. I don't know what items to donate neither."

For people who cannot afford to donate money but still want to contribute, there's lack of channels for them to know what items are the most needed by the victims of disasters.

4. NGO staffs and volunteers need to spend lots of time and efforts organizing and sorting physical donations.

"Generally after a disaster, people with loving intentions donate things that cannot be used in a disaster response, and in fact may actually be harmful."

Well-intentioned people can send in items that are not needed in the disaster area. However, they often are unaware of the challenges caused by storage, transportation, sorting, cleaning and distributing donated goods. NGO staffs and volunteers often call the crush of useless, often incomprehensible contributions "the second disaster".

Reframe the Problem

The research insights has shown that while there are numerous established ways for people to contribute monetarily after disaster happens, both potential donors and humanitarian workers experience lots of pain in the current process of physical donation. The simple solution will be to encourage all the people to donate money. However, by taking this measure, we inevitably exclude people who cannot afford to donate money but still want to contribute. The challenge then becomes: how might we streamline the process of donating goods so that more people can participate effectively in the post-disaster context?


Connecting donors and humanitarian workers to streamline the information flow in the context of donating physical goods after disaster happens.

Product Map

Design Iterations

The initial prototype was focused on testing out the key flows.

On the donor side, we prioritized the individual cause page, and the ways in which they could donate. One of our goals was to motivate donations, so this focus on individual causes and the convenience of reaching donation pages helped us achieve these goals.

The initial prototype for donor's app

When testing the prototype with potential users, we realized that:

Move away from proving individual volunteer's credibility to the organization's.

In the cause detail page, I decided to show the volunteer who's posting the cause rather than showing the organization, thinking it would add a more personal touch to the cause. In the initial design, I also allowed donors to rate the volunteers. However, during the user testing, people casted doubt on whether the ratings and reviews of volunteers were accurate and fair. Since there could a large organization behind one volunteer, the ratings and reviews should not be given to a volunteer solely. Additionally, ratings and reviews can be very subjective, and need to be used with great caution in the case of voluntary donation. Thus, in the final design, rather than showing the ratings on volunteers, I decided to use friends' past donations and press release to show the organization's credibility.

Moving away from ratings and reviews on individual volunteer to showing the organization's credibility.

Harness the power of micro-content to keep users motivated.

One of the problems that surfaced in the user testing is that people would hardly go beyond the "Most Needed" items tab. Many of them were not even aware of the existence of other category tabs. To solve this problem, I added a CTA at the bottom to guide users to go through various categories. Later, I changed the text from "Next" to "Keep Good Things Comin' " to cheer users up and keep them motivated.

Adding a CTA and keeping the text fun and positive to keep users encouraged when they go through the item list.

Make the information on home page clear and relevant.

Seeing severe impact of natural disasters in pictures elicit people's empathy immediately. Knowing that their friends have donated to the same cause upfront can make the charitable giving more contagious through network effect. In my second prototype, I included the profile pictures of one's friends who have contributed to that cause on the home page. However, the user testing showed that people were not sure about meaning of those profile pictures. "Have they donated? Or are they being affected?" To resolve this confusion, I added the explanatory text.

Optimize the displayed information on home page to get users interested in the causes.

Show the number of items needed to increase transparency and to be aligned with user's mental model.

In the initial design, I used a progress bar under each item to indicate how far away the organization is from its goal. As the donor clicks the plus button, the progress bar will move forward to help visualize his/her contribution. The problem with this design is that people still want to see the clear number of items needed. The number makes the process feel more transparent and can even nudge people to donate more than they initially intended to.

Adding the number of items needed to make the process more transparent.

Value Exchange

The app connects donors and NGO staffs and offers them convenience, transparency and opportunities to foster a long-term relationship.


Test early, fail early

After the second phase of this project, I regretted deeply that I didn't do enough exploration and user testing in the early stage. The problem of reviewing individual volunteers could have surfaced up early if I had tested the idea in the low fidelity prototype. To make my design process leaner, instead of designing screens and then conducting user testing, it might have been more efficient to conduct focused testing on a complete design module while finishing the rest. In that case, I could have constantly incorporated the new feedback into my design.

Learn about users with constraints

Due to the time and resource constraints for this project, it was really hard for us to find someone on the volunteer side to interview with. Instead, we improvised our research and collected the persona information via some untraditional channels, e.g., youtube videos, medium blogs, etc. I was surprised by the large amount of information we gathered in a very short period of time. With all due respect to the traditional research methods, I learned to be more flexible and resourceful when facing the limitations.