Sharity

Empowering people to donate through transparency

View prototype

my role

User Research
Product Thinking
Visual Design
Interaction Design

team

Myself

timeline

2 weeks

tools

Figma
Google Form

How it started

This idea sparked from a conversation I was having with a friend, I mentioned that I've been scouring through 20 different charity webpages, with information presented in different ways. The experience of researching charity I'm passionate about was overwhelming and gave me a hard time deciding on which charity to donate to, which forced me to close my window and made me forget to go back to it.

The problem surface in my head: Are other people encountering the same experiences? How can we help people find the right charities and encourage them to donate?

User Research

I was very curious to see if other people have felt the same way and so I started by sending out two different surveys, one targeting experienced donors and another one for inexperienced but interested donors.

screenshots of the surveys I sent out (left for interested but inexperienced donors, right for experienced donors)

For the experienced donors, I specifically wanted to learn about their:
1. current charity decision process
2. fain points and frustrations
3. factors that influenced their decisions
As for interested but inexperienced donors, I was curious to learn about:
1. how they would go about finding the right charity
2. questions and challenges they'd expect
3. factors that will influence their decision

What’s the problem?

After chatting with people about their experiences and concerns, I’ve highlighted the top 3 problems:

1. People don’t have exposure to charities they might be interested in
2. People don’t know the legitimacy of the organization
3. There is very little transparency as to how the money is being used

These key points can often deter people from getting started and lead to people feeling not very confident going through the donation process

Brainstorming Ideas

After identifying the problems, I started sketching some ideas to help people with their donation process, thinking about the experience from charity discovery to donation.

hand sketches to help me capture the different pieces of this experience

I then took my sketches to Figma and created some grey scale screens for usability testing, specifically wanted to get insight on what people's expectation is throughout the experience and if people felt confident with the experience from discovery to donation.

grey scale screens used for user testing

User Feedback

Based on user testing with these greyscale, I noticed that
1. having both the home and discovery pages felt redundant, some people didn’t even notice the difference at first glance (“Oh, are these the same?”)

2. the bookmark feature had low discoverability, people wanted to be able to save different charities for future reference and find them immediately.

3. I donated, now what? There still remains low transparency between the donation and the donor.

HMW help users discover charities that align with their interests

Based on the user feedback, I continuously iterated on my designs from app architecture to visual design and interaction design.

Onboarding Experience

In the product I included an onboarding journey that allowed them to select causes they care about and size of the charity they’re interested in. The goal with this is so that we can create a curated list of charities or projects for the users when they arrive into the product and focus on problems that matter to them

Discover Page

Initially, I had 2 separate tabs “Home” for personalized feed and “Discover” where users can search based on charity sectors. However, to reduce unnecessary cognitive overload with 2 different tabs, I decided to combine the two into one page. By including a “For you” page, users can easily find organizations that are based on their interest and discover other categories with the horizontal scroll tab (right below the search bar).

Information Hierarchy

Information hierarchy plays a key roll on the charity pages. While the readers scroll, I wanted to display the information they would care about the most and answer questions they may have as they go.

iterations of the charity page

left: tiles break consistency from the cards (core path of how people enter these pages)

middle: reuse tag components seen on the cards to ensure people that they have clicked on the intended charity or project

right: image takes up a lot of real estate and may often not provide people with the most valuable information, don’t want to distract users from the core information

Use Colors to Story Tell

I used a fading black overlay to help story tell and instill feeling in the reader, the color correlates to the dark mood that is related to the challenges to set the scene and help people empathize with the situation.

How can we build trust between charities and donors?

Data Visualization

64% users from research responded that they are often concerned about how the organization is using their donation money. Thus, with the assumption that we can retrieve a breakdown of the charity’s spendings, I thought about how to share each organization’s financial history.

design iterations on how to present financial history

I debated between which data visualization to use and ultimately landed on the donut chart as it’s easy to interpret, especially with the help of the colors, where green represents program expenses (money spent on work) and red signifying money that went towards the administrations along with yellow being more neutral, representing the money used for fundraising.

See Progress

To keep things transparent i also wanted to incorporate a tab where users can access their donations and see the updates based on their donations. This is a place where they can come back and see the progress of the project since their donation to encourage the act of giving back.

Final thoughts

Being able to utilize design for social good gets me excited about technology, so this was a super fun project for me! Some key takeaways
- Information hierarchy impacts decisions
- Visual design instills emotions and effects storytelling
- Personalization is great to a certain extent (don't overwhelm users with too many choices)