SF Hep B Free Bay Area
Simplifying the Donation Process

I met the members of SF Hep B Free in 2016 when I was working as a graphic designer. As someone from a Japanese background, I felt personally invested in the mission of eradicating hep B, a disease prevalent amoung Asian-Pacific Islander Community, from the Bay Area.

Role: UX designer

Platform: Responsive Web using Wix

Year: 2019-Present

My Role

In 2019 I was brought on as a UX designer to redesign their website. Recently I was asked to simplify the donation process on the website. Since Hep B Free runs on the donations from individuals and sponsors it was a great opportunity to make a major impact on the organization and the community. The website currently runs on Wix so there are many constraints on what can be built. I decided to design the best solution first then determine what was possible on the web design platform.

The Problem

In the current design, there is a lot of friction for visitors to make a donation. They have to either mail in a check or be redirected to a third party site. I worked together with a Hep B Free to streamline the process of making a donation. This work is still in-progress.


Brainstorm and Discussion

I started off by having several conversations with SF Hep B Free on how they had managed donations, fundraisers and campaigns in the past. I wanted to understand their main paint points and motivations.


Research & Discovery

I researched the interactions of donation pages on several non-profit companies. I wanted to understand how they structured the user's journey and what qualities made it easier and more difficult to donate.


Understanding the Users

Next, I took some time to understand the users. The easiest way for me to do this is to write out their potential motivations and paint points that are popping into my head on sticky notes.


User Task Flow

I use Figjam to create a high level flow of the user's journey. I divided the task into three parts:

1. The entrypoint: how users may land on the donation page of the website
2. Making the donation
3. The followup/ success state


Wireframes

I created wireframes using Figma. I used the prototype for a quick user testing with a few friends so I could validate my idea and uncover any major usability issues.


Initial Mock

For the higher fidelity mocks, I decided to keep the landing page as simple as possible with just the option of selecting the donation amount. The donation amount is based on the goals of the organization as well as the most common amounts from previous donations. I also included a link to stories about the lives of real people affected with hepatitis B. This is to showcase the direct impact that a donation has on families and individuals.

The landing page for donations. To reduce the cognitive load, the additional information won't surface until the donation amount is selected.

After selecting the donation amount, the user has the option to vhoose between a one-time and a monthly donation.

The user journey starting from the donation page to the success screen to the SF Hep B Free homepage.


Additional Ideas

After setting up an MVP donation flow, I wrote down a few additional ideas that I would like to implement in the future.

  • Include an option to show their name on the donations page

  • Explore ways to back the project/ show your support without donation money

  • Include links to other parts of website

  • Include stories of real people

  • Thank you email

  • Ability to share their donation on social media


Next Steps

I plan on adding the flow to Wix as closely as possible to the mocks although with the limitations I expect it will be difficult. It will require some research into how the software enables the giving and receiving of donations. Based on Hep B Free's budget, I can also consider hiring a developer to add the custom code.