advertisement
advertisement

Designing A Better Charity Donation Form

Why let bad design get in the way of giving? Here are some tips to make the UI/UX of giving painless.

Designing A Better Charity Donation Form
[Photo: Flickr user Alan Light]

Promotional stunts like the Ice Bucket Challenge do a lot to get people interested in charities, but if poorly-designed donation sites get in the way of converting that goodwill into money, what’s the point? But good design can help. In a post over on his blog, responsive web design guru Brad Frost gives tips on how charities can use design to maximize the amount that floods into their coffers.

advertisement

According to Frost, the problem with many charity sites is that they are overly busy, poorly articulate the impact of donations, and require a number of complicated steps to complete a donation. A good example is the webpage of the Greater Pittsburgh Community Food Bank, a site Frost himself couldn’t figure out how to donate money to. Reaching out to them in the hopes of redesigning their site, Frost is currently in the process of trying to streamline the Food Bank website to create a cleaner, more intuitive user experience that makes it easier to donate.

Here’s what Frost is doing.


Make donating obvious: Many charities have extremely busy websites, where it might be hard to find a donation box, or where a donation box may be hidden away on a single page. And when visitors do want to donate, superfluous elements on the donation page like sidebars and navigation elements can distract or overwhelm visitors. Frost made sure that in the Greater Pittsburgh Community Food Bank’s new design, a prominent donation button could be found on each page, and when users did choose to donate, everything but the donation interface was elegantly stripped away, reducing cognitive load.

Articulate The Effects Of Charity: Although people might want to donate money to a charity, they might not know how much they need to donate to make the kind of impact they want. In the case of the Greater Pittsburgh Community Food Bank, the problem was solved by suggesting a number of default amounts, and explaining exactly how many people each donation could feed, and for how long.

Make donating easy: Donation forms can be long and confusing to navigate, prompting some users to give up on donating midway. Even worse, sometimes charity forms won’t tell a user if he or she filled something incorrectly until after they have tried (and failed) to make their donations. Frost recommends a different tack. On the new Greater Pittsburgh Community Food Bank page, this donation process will begin by tapping a single button for a suggested amount, then move visitors to a simple, four-step form with intelligent autofill.

Although Frost’s new design for the Greater Pittsburgh Community Food Bank hasn’t launched yet, you can track Frost’s process on the redesign here. While Frost is hardly the first to use these techniques to streamline the donation experience, rarely have they all been explained so well in the same place. Why let bad design get in the way of helping people?