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?
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.
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
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
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.
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.
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.
Based on the user feedback, I continuously iterated on my designs from app architecture to visual design and interaction design.
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
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 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.
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.
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.
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.
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.
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)