LearnDesigning for donations


writes on February 8, 2010

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.


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.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

0 Responses to “Designing for donations”

  1. Found your page and really liked it thanks for sharing!

  2. Nice walkthrough of how a charity, or charitable organization, can go about redoing their donations process to entice people to give more AND make it easier to do so. I love the idea of adding a ‘I can only afford’ option — yes it’s less than optimal, but I’m 100% sure all would rather get some than none.

    My wife and I donated to http://www.worldvision.org for our Wedding gifts, and as I can recall their donation process was pretty useful in terms of letting us know what we were paying for with our donations.

    Nice info and good topic!

  3. love this. thanks for the great examples!

  4. Good suggestions to not only make it easier to give, but to make it obvious what you’re contributing towards.

    Definitely playing on pride and generosity here is a good thing, and yet still effective.

    Thanks for the ideas!

  5. Greg Wolkins on February 9, 2010 at 2:03 pm said:

    Not only is this a nice case study, it could serve to demonstrate to management the thought process that should go into every design decision.

  6. Jaan & Andreas,

    Excellent article. This is a very good example of how usability/UI/UX should be analyzed, regardless of the industry being discussed.

    Very good read, thanks.

  7. Nice article with some great points made, I don’t offer gratis design but I am sure these tips will help with a design I am in talks about for a relatively well known charity.
    Thank you.

  8. Nice article, but the button in iterations 3 and 4 throws me. It casts doubt in my mind about what the button is going to do and increases the chance of me not clicking it at all. Here are some questions this form might raise:

    1. “If I press this button, am I agreeing to donate $20? What happens next?”
    2. “If I press this button, is it going to add $20 first and THEN submit the form?!”
    3. “This $10 link, does it take me to another page? It’s a link after all.”
    4. “Perhaps the button just adds $20 to what’s already in the field?”

    Also, think of the user that actually only wants to donate $20. They might click the button (which raises the amount to $40) and then think ‘oh, hang on, there are some more fields I need to fill in, and there’s a submit button!”. In that case, the user is going to be peeved they’ve just donated $40 instead of $20 and the level of trust is lost.

    I don’t think we’ve come to a conclusion here without seeing the bigger picture. Perhaps a submit button further down would stop the first three questions, but every time you raise doubt in the users mind, you’re running the risk of no donation at all, surely?

    • Jaan & Andreas on February 9, 2010 at 2:23 pm said:

      @ PS Thank you, good points! The illustrations do not include some of the final elements (like the submit button). We chose to instead focus on illustrating how the goal of making more people give, and give more, can be reached by re imagining something like the donation screen.

      If screen #4 was a final deliverable it would indeed have all the relevant elements on it, including the header, footer and all those other bits. And in this case, also a progress indicator of the type e-commerce sites often use to good effect (“view order – shipping address – payment details – review/place order”).

      In the actual exercise screens that followed #4 these were put in place, and the whole final suggested experience was very nice, tidy and without any reasons for doubt. Clarity always wins.

      For the next step-by-step post we’ll make sure to note what the illustrations deliberately omit. Thanks for high-lighting it!

  9. Thanks for the great article! I have had a few opportunities to design for charity/donating websites, but the biggest challenge is make the user feel sympathetic and to make them donate. This article did a good job of explaining the donating part (:

  10. Great article! I might try this tactic the next time I want a pay rise….

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop