Designing for donations

Posted by Jaan on January 4th, 2010 | 6 comments

Donating money to a charity online should be quick and easy, and it should be apparent what the money will be used for. With that in mind, it is surprising how often charities miss the mark when it comes to the actual donation screen.

Here are some of my step-by-step notes and drafts from a concept exercise on behalf of a well known charity. The starting point example is actually based on two different donation screens, but we agreed that it would help get the point across within the charities organization if we started with a “worst case” example.

So, the goal with this exercise was to create a screen that encourages more site visitors to give, and give larger amounts. I don’t know if these ideas will ultimately be used, but they illustrate ways of evolving the user experience in a way that should increase the amount of money collected.

The starting point

At the start of the project the center of the donations page has the words “Charge me” followed by one drop-down menu with well over 50 (yes, fifty) options starting at $2.00 increasing by one dollar up to $30 and then in larger increments up to the $1000 mark. The second menu has only one option: zero cent.

Round 1

We remove the second menu. It offers no value (literally) and has a negative effect on the overall impression of the charity at the point of transaction. And it is a transaction, even if that particular word is sometimes seen as inappropriate in the charitable context. I believe calling something by its real name makes it easier to resolve any issues that surround it.

Also changed the copy from “Charge me” to “I am donating”.

Round 2

In-person donations at this charity average a respectable $30. Online donations come in at an average of just $17. I am certain the very long drop-down menu is part of the problem. It includes over 50 options and initially they only increase by one dollar at the time. It takes a lot of scrolling to get anywhere.

I cut the donation options from 50 to just seven. This offers a good range, and makes sure all options are always visible. The amounts also represent those the charity know, based on both offline and online experience, are likely to make people whip out their credit cards. The new amounts are $20, $30, $40, $50, $100, $150, and $200.

This intentionally puts the minimum donation amount over the $17 average. It is a slightly risky move but with large potential upside.

I also did away with the drop-down menu and replaced it with a clear display of all the amounts plus radio buttons. Clear and simple.

Round 3

Until now focus has been on tweaking what is already there. Time to make a big move.

A problem with donating is that even when we are giving a relatively small amount, say $10 or $20, the money suddenly feels like $100 or $200 and we might hesitate to give it up.

To work around this I remove the seven donation amounts, and replace them with a large bold field with “$20″ in it. This establishes the giving of something tangible like a twenty dollar note as the normal, logical thing to do; “Of course I should give a twenty, anything less would be silly”.

Before I visualize the effect of the donation I put a nice big button with the copy “+20 I can help more” next to the amount field. Each click raises the amount to be donated by 20 dollars. It shamelessly (for a good cause) plays on pride and generosity.

Under the “I can afford…” button I add a text link option: “I can’t give more than $10″. This lowers the amount in the field and displays the message “Giving, not the amount, is what matters.” Making it possible for people to give, even if it is a bit less, makes perfect sense.

Round 4

Another challenge with charity sites is that one rarely gets a really good idea of how the money will be used. Food for poor people in my city, or schoolbooks for kids in a developing nation, or tools for farmers, sound good but they are still quite abstract. In this round we fix this problem by visualizing the result of the donation.

To the right of the donation amount I add a headline: “30 families in this area need your help”. Underneath it 30 family icons (with different numbers of parents and kids) represent the families.

The idea is that for each 20 dollars one of the icons would be highlighted, i.e. your money benefits these people.

Still I didn’t feel this was clear enough. So for each icon that lit up, I added a call-out listing what a family would receive for the money. For example a bus pass, seven breakfasts and a weeks worth of lunch boxes to take to school.

Much better. Plus, imagine if if you are the person donating money and suddenly changed your mind… It’ll be a lot harder to do when you have to picture a family missing out on breakfast and lunch for a week.

Conclusion

The goal with this exercise was to create a screen that encourages more site visitors to give, and give larger amounts. At the end of it we had two alternative solutions. The first one (round 1-2 above) uses small improvements to create a better experience. The other completely rethinks how online donations look and work (round 3-4).

Time will tell if these ideas get used, but at the very least they illustrate ways of evolving the user experience in a way that should increase the amount of money the charity collects.

To learn more about designing for charities, including the importance of having a funding goal, stating a clear mission, offering other ways to help and so on, please see “8 tips to design a charity website” at the Webdesigner Depot.

How would you improve a donation screen? What is the most important thing on a charity site? Share your thoughts in the comments or via Twitter where I am @orvet. Your tweets will turn up below if you include a link to this post (bit.ly works perfectly).