Donating money to a charity should be as quick and easy online as it is to stuff a few coins in a collection pot on the high street. It should also be apparent what the money will be used for.
With these two things in mind, it is surprising how often charities miss the mark when it comes to their online donation screens. Fiddly pull-downs, peculiar microcopy, trillions of steps, and minimal transparency.
Here are some of our step-by-step notes and drafts from a concept exercise on behalf of a well-known charity. The goal was to create a screen that encourages more site visitors to give, and give larger amounts.
We 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
(Disclaimer: we combined two screens in to one to have a truly poor starting point for the exercise.)
The centre of the donations page has the words “Charge me” followed by one drop-down menu with well over 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 cents.
Round 1
First of all we remove the second menu. It offers literally no value and, worse, has a negative effect on the overall impression of the charity at the point of transaction.
And it is a transaction, even if some people might object to using that word 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
Online donations come in at an average of $17. Not bad but comparatively not good enough. I am certain the very long drop-down menu is part of the problem. With over 50 options 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 the options are always visible on screen.
The amounts 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. It is time to make a big change.
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 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 the exercise was to create a screen that encouraged more visitors to give, and give larger amounts. At the end of it we had two alternative solutions. The first one (round 1-2 above) used small improvements to create a better experience.
The other completely re-imagined how online donations look and work (round 3-4).
Time will tell if these ideas ever 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.
