Web App Design for HFA’s COVID-19 Fundraiser
A powered-up fundraising experience
During the early outbreak of COVID-19 in Wuhan, China, the city was shut down and local hospitals were crying for help. Greater Washington Hubei Fellows Association(HFA), a grassroots non-profit run by volunteers, initiated a fundraiser through WeChat* to buy personal protective equipment (PPE) for local hospitals in Wuhan.
Tasked with helping HFA better manage the fundraiser while creating a better donor experience, I worked with 2 UX designers and a front-end developer to design a web app that facilitates HFA’s fundraising process by bridging its communication gap with donors. With prior experience collaborating with non-profits, I volunteered to be the liaison between designers and HFA and took the lead in project management.
*Wechat is a social media app widely used by Chinese Americans
CLIENT/
HFA
ROLE /
UX Research
Visual Design,
Interaction Design,
Content Strategy,
Project management
DURATION /
4 Weeks
TOOLS /
Figma, Trello, Google Doc
The Problem
Fundraising is never just about collecting money. As a volunteer-run organization, HFA struggled with keeping donors informed of the progress on their donation.
Digging into the problem
Fundraising, aka a headache of data and communication
HFA is a WeChat-based community. Its fundraising message shared among WeChat groups was the main generator for donations.
But with no confirmation sent to donors, HFA had to verify each donation and document the donor’s name, amount, date, and payment method and then compiled the data in a manually kept public Google sheet. Donors took it as a reference for money status, while HFA used it to show its transparency.
Meanwhile, HFA tracked each spending and documented details like item name, unit, price, as well as who made the purchase and whom to be reimbursed in the same Google sheet. And all the workload was deliberately assigned to one volunteer — its treasurer, to minimize confusion and errors.
Donation-wise: The treasurer checked PayPal/Zelle accounts every few hours a day, deposited checks, verified and posted
Expense-wise: The treasurer verified spendings, logged purchased items, confirmed delivery, and reimbursed the purchaser
But from my interviews with HFA volunteers, I found that as someone with a full-time job, the work was laborious and difficult to be updated timely. They did it all because they wanted to be honest with donors, making them feel confident that they were making an impact through HFA.
Sadly, hard work doesn’t always guarantee desired results
Insights gathered from my observations in HFA groups, and our interviews with 7 donors, helped us uncover the main barrier between donors and HFA, which was ineffective communication.
Donor list in Google sheet wasn't up to date, donors tried to confirm donations in HFA WeChat groups
Donation-wise: In the absence of a real-time donor list and immediate confirmations from HFA, donors had to go back and forth with HFA to see if their money had been received. Especially for donors outside HFA WeChat groups, they can only email or call because they were not informed of the Google sheet.
Progress-wise: The Google sheet might offer a big picture of the fundraiser, but donors also wanted to know whether HFA had bought qualified PPE, whether hospitals had received those supplies. However, it’s nowhere to track.
Even though HFA sometimes posted photos of PPE or delivery updates in their WeChat groups, this critical information, just like the Google sheet link it shared, went unnoticed easily because it was oftentimes jumbled up with irrelevant messages sent by others.
People chat, discuss and share on a mishmash of things in HFA groups, message overload makes it hard to find information easily. For outside donors, they didn’t know the progress at all.
The gap between donors and HFA
For donors
01. They want a consistent knowledge of the whereabouts of their money and the progress of the fundraiser.
02. They want their money to be received and confirmed.
03. They want HFA to be approachable.
For HFA volunteers
01. They want their message and progress to be conveyed effectively.
02. They want the information about donation and expense to be correct.
Bridging the gap
HMW help HFA better manage fundraising data so that they can be conveyed effectively to donors?
Focus on pain points and prioritize
Uncover opportunities through the most painful experiences
Following our user journeys from both perspectives, HFA, and donors, we brainstormed a series of ideas that cut straight to user needs at each phase from before donation to after donation.
We then had a quick vote on those ideas where we UX designers voted by the impact on users while our front-end developer voted on its feasibility. After plotting them to our prioritizing matrix, we got out “sweet spot” for features, which served as guidance for creating our MVP.
Deciding on the platform
Why mobile web app?
We first explored the possibility of creating a WeChat Mini Program, which is a “sub-app” accessed within WeChat with no need to download. WeChat even provides open-source design systems for designers to build upon, making the development and maintenance costs possibly lower. However, Mini Programs don’t support other payment methods except for its own WeChat Pay. This technical constraint made it out of the context and directed us to mobile web apps.
Most communication happened in WeChat on mobile devices. It would be more intuitive to access the fundraiser and donate through their phones, or even better, within WeChat. Similarly, HFA volunteers all had full-time jobs and might be on the go. It was much easier for them to need to share progress-related photos on mobile devices too.
A mobile web app functions well within the WeChat ecosystem. It allows us to provide a non-interruptive experience by making the process a part of the social media experience, where donors could easily access and follow the fundraiser while HFA could streamline their fundraising management.
Non-interruptive
workflow
Accessible when on the go
Low cost on development
Design solutions
How did we bridge the gap?
Hard work can be effective work
Integrate data into digestible content
Bridging the gap: automating data management for HFA
Automation saves people from the dull, dreary routine tasks, allowing more useful, productive use of time, reducing fatigue and error. ”
- Don Norman, The Design of Everyday Things
We decided to empower HFA with a "central control panel", where it could add donations, document spendings, post multimedia updates, and respond to donor questions. All the data input can be automatically integrated into organized tables with great precision, and translated into digestible content at one place for donors to view, rather than scattering around disconnectedly.
Liberate HFA from the dull, dreary routine tasks by “automating” data
Expense list
The treasurer can also input expense details, and mark the item as reimbursed, letting the system remind her at the time the information is needed. It will reduce mental load and effort, allowing more productive use of time.
Respond to donor comments
Account page
"central control panel"
Since more than 95% of donations were made through PayPal, we took the help of PayPal API, which allows donations to be automatically documented with donor’s name, amount, date, and contact info, resulting in a huge amount of saved time and way fewer errors when doing it manually.
For donations via Zelle or check that can not use APIs, HFA treasurer can easily add the information through a form that follows her eye movement pattern from top to bottom, enabling her to fill faster.
Add donations
Automatic donor list
Post multimedia updates
Add spendings
Iteration: the most "variable" challenge
The account page was probably the most "variable" one in this project. I made roughly over 15 versions, trying out different layouts and UI patterns, all in the hope of achieving easier and better management of the data. In that process, I showed the designs to my team for feedback and went back to draw another iteration.
Version 1
The early idea used card-based designs to group 3 types of information: donations, expenses, and updates, listed in the order of its importance to the treasurer, with shortcuts down below to allow quick access for adding donation/spending/new post and inbox.
Feedback: not intuitive, may cause redundancy, unnecessary development costs. Also, the shortcuts were inconsistent since “new post”, “add donation” and “add purchase” led users to create new things while “inbox” led users to a list of content.
In an effort to not overwhelm users with visual distractions, I rearranged the “shortcuts” to their corresponding sections.
Version 2
"Shortcuts" combined in a single-themed card where users can add new and view details, but also capture the most important information at first glance.
I also moved the inbox to the upper right to separate users’ more frequent main tasks (add donation/spending, create new posts) and less frequent secondary tasks (check inbox and respond to comments).
But I didn’t stop here.
A particular theme of HFA’s work revolved around 3 “How muches” — how much we raised? how much we spent? how much we left?
HFA volunteers started their day with this information to plan the work. For example, purchasers had to ask the treasurer about the balance every time before submitting an order, and it sometimes added to the communication costs within the team. So I started to think about how I can better inform users to make their work easier?
Building upon previous feedback, I reorganized each element on the page based on its importance to users. And it turned out that some of the elements didn’t need to consume so much real estate, especially on a space-limited screen like mobile. I then landed on 2 options that we all agreed on, one was to highlight the “3 How muches” by font size and hierarchy, the other introduced a dashboard to make the content less text-heavy.
Version A
I had HFA treasurer, purchaser, and president test and pick the best one. Version B won because it was easier to digest and helped HFA quickly align the team.
Version B
Based on that, I created the final version that greeted users with a quick summary, highlighting what they need for the day. I used a simple donut chart to give users a sense of the money breakdown. Having a clear idea of how the fundraiser has been carried out, they can continue their workflow accordingly with confidence.
From nowhere to right here
Access key information whenever needed
Bridging the gap: one-stop information hub for donors
Final version
Just like people keep organized to find things easily, we offered donors a fundraising information hub that enables the track of everything: donor list, expense details, progress, and evidence of deliveries, all in one place.
Followed by an F-shaped pattern, we arranged each section in an order based on its importance to donors, allowing easy scan and the freedom to see more when needed.
Donor's info hub
For the whole content layout, I proposed that we borrow the concept of an inverted pyramid from journalism, which puts the most significant and high-level insights at the top, followed by granularity details that donors can drill into, and other secondary content at the bottom.
From high-quality photos to heartfelt words, the progress shared with enriched content would bring donors along on the journey.
Progress updates
Donors are informed by clear articulation of HFA’s cause, goals, and how they would do it, which are all crucial for effective communication that helps build trust and confidence among donors.
Donor homepage
As some donors complained that the manually-kept Google sheet was hard to follow due to irrelevant information, we made the content tailored to its viewers, focused on what donors care the most. For example, the expense list did not include information about the purchaser or the reimbursement status.
Expense details
Donation & Spending details
Donor list
From back-and-forth to non-interruptive
Confirmed right after donation
Bridging the gap: donate with confirmation for donors
Recognizing the need to simplify the donation pathway, we prioritized the PayPal button based on donor behaviors — PayPal remains the most popular payment method for fundraising on WeChat. As a result, the steps for making a donation were reduced by almost 50%, with confirmation and no platform switch.
However, we were not able to automate every payment method due to technical constraints. But we tried our best to make their experience as smooth as possible. Knowing the difficulty of copying a fraction of a sentence in a WeChat message, we allowed donors to copy the information through “one-tap”. Donors paid via Zelle or check would also receive an email confirmation once HFA added their donations to the system.
Final version
Iteration: Accordion vs Card?
But how should we introduce non-PayPal methods without being too overwhelming?
I first explored the option to put the payment info in cards to form a coherent piece of content. With no extra steps, donors can quickly scan and pick whichever method they like.
However, I was concerned that this may lead to huge volumes of text-heavy information on the payment page, making it difficult for users to browse as displaying details for each item can clutter the screen.
no extra steps but also no content prioritization, making it harder to parse the layout visually.
Payment page
To minimize the amount of information on the page and make it less overwhelming, I then tried hiding the details by using accordions that sequence information. In this way, the design could display the critical information first, while everything else is still easily accessible.
Our front-end developer originally preferred the card design because he thought it’s straightforward and easy to implement. But after several testings with donors, we all agreed that the “straightforward” card caused an information overload, leaving some users confused.
Accordion won
Outcome
What's next?
Our design is more geared toward mobile users because the experience is now heavily dependent on WeChat. But as HFA expands its target audience, we might need to optimize the desktop version or scale for multiple fundraising projects, all depending on the context and user needs.
However, due to the advent of COVID-19 and severe budget cuts, we were told to halt the project just as we were about to start the hand-off process. Although HFA, especially its treasurer and president praised our design that it would dramatically enhance their communication with donors while alleviating their workloads, they had to put it on hold and prioritized their budget for other urgencies.
Would be more than happy to see it implemented soon. It would be extremely helpful for grassroots like us who need to get the message across and stay organized. I believe this can be used by other non-profits working in a similar fashion, and then we can all say bye to the hassle of managing data manually. ”
- Fang Lee, the president of HFA
For me personally, it was still a fantastic journey with huge learning and growing opportunities. Even though we did not see our product shipped into concretes, the lessons I learned to tackle setbacks and unexpected situations and grow upon them, had prepared me to become a better UX designer.
Treasurer interface
General interface
01. I got a sense of enterprise design as compared to customer design. Despite the human-centered design principles still being the fundamentals, designing enterprise products requires great attention to the workflows of users with different roles and solutions tailored to the roles. This may lead to different user interfaces and functions, just like what we did to separate permissions for treasurer and admin.
02. It’s my first time running a project that was built from scratch, I learned how to better align the team accelerate the process by creating a design system, as well as how to narrow down to the most urgent needs and balance between constraints to make an MVP and let iterations play in incrementally.
Also, maintaining quick check-ins with developers on the feasibility and development resources helps us detect problems early on.
