Designing an Effective Donate Form

I reached out to the Pittsburgh Food Bank last year about helping them redesign their website largely because I was having a hard time figuring out how to give them money.

So as part of our redesign of the Pittsburgh Food Bank’s website, we want to make the donate experience more visible and usable.

Ember

We’re still working hard to finish up the form design along with the rest of the site, but wanted to share some of the things we’re considering as we design the donate form:

  1. Be visible
  2. Cut out the noise
  3. Break big tasks into smaller steps
  4. Use button styling for input
  5. Provide smart defaults and suggestions
  6. Articulate impact
  7. Inline validation
  8. Use proper input types
  9. Reduce the number of taps
  10. Automatically generate city and state info
  11. Use single-field credit card input pattern

Be visible

We’re including the donate form above the footer on almost every page of the site. There’s still a dedicated donate page, but by including the donate functionality on each page we’re hoping users will be inspired to donate after reading about the Food Bank’s many wonderful initiatives.

Cut out the noise

It’s important to create an interface that helps users focus on the task at hand. For key tasks, such as a donate form or an e-commerce checkout form, it’s often a good idea to remove superfluous elements that can distract users. Including a simplified header and footer (a la Amazon’s checkout) and removing sidebars and other auxiliary content will help users accomplish the task faster.

Break big tasks into smaller steps

Another way to cut out the noise and help users focus is to break the form into smaller chunks. This reduces the cognitive load on the user, and also presents a much less intimidating form than exposing all fields at once.

Use button styling for input

Visually speaking, buttons are more approachable, more tap-friendly, quicker, and more visually appealing than a select menu, traditional input or radio button. We’re using button styling for the donation amount, with an optional input field if the user wants to donate a custom amount.

Provide smart defaults and suggestions

Many people (myself included) don’t know what a typical and appropriate donation to a food bank looks like. By providing some representative suggestions, we’re able to guide the user into the appropriate bucket. Barack Obama’s campaign donate form provides a series of button selections for common donation values:

Ember

On the food bank’s donate form, we’re also pre-selecting a reasonable value to guide users into donating a worthwhile amount.

Articulate impact

Donate form messaging

It helps for people to know the impact of their donation. Right now we have simple (placeholder) messaging that helps users understand how far their donation will go. We’re still working on the messaging and display of this info, but it will certainly help create a connection between the financial donation and the real impact it will have to alleviate hunger.

Inline Validation

There’s nothing worse than submitting a massive form only to be scolded to go fishing to find your erroneous fields. Inline validation can help users fix their problems while they’re still focused on the general area. We’re using the wonderful Parsley library to validate our inputs as users exit fields.

Reduce the number of taps

An important overall goal of a form is to reduce as much as humanly possible. The less work the user has to do the more likely they are to complete the form. Simple things like combining fields like “First Name” and “Last Name” into a field simply called “Full Name” reduces the amount of taps the user has to endure.

User proper input types

Using the proper HTML5 input types and pattern attributes pulls up the appropriate virtual keyboard on mobile devices, saving users from having to manually switch over to enter a number.

Automatically generate city and state info

Automatically fetch city and state info from ZIP code

Surfacing the ZIP code field first allows us to automatically populate the city and state fields using a neat API called Ziptastic. This reduces the amount of fields the user has to fill out, and as a result increases their efficiency.

Use single-field credit card input pattern

Donate credit card single field pattern

We’re using the single-field credit card input pattern to collect credit card information. This provides a more concise input method for entering credit card info, and testing data for this pattern is showing that users prefer it over a more traditional credit card input. So I’m excited to see how this plays out!

Work in Progress

The site isn’t live yet, so it’s still too early to tell whether the donate form will perform as well as we hope it will. A donation form is definitely a ripe place for some A/B testing, so it will be fun to experiment with over time.

If you have data, techniques, or anecdotes about web form design, I’d love to hear them. One of the benefits of designing in the open is that we’re able incorporate feedback and new ideas back into our design before we launch.

For more info on form design, I’d recommend taking a look at these resources:

16 Comments

  1. Ivo Santiago

    Hey Brad,

    Really loved your work specially the way you’re dealing with credit card. This reminds me Gumroad. 🙂

    You might have already answered this question but are you using any kind of tool for a/b testing? I’m trying to understand how can I implement it in my tool but I’m kind of lost and dunno where can I start from…

    Thanks a lot

  2. Toby

    Great, thanks Brad! Here are some thoughts re recurring donations based on our A/B testing:

    – Monthly donations are tricky. We always see very different monthly amounts to one-off amounts, so a different set of values for each case has always worked better for us. ($25/mo is quite high, especially considering the low admin costs of recurring donations.)

    – Putting the checkbox for monthly after the amount doesn’t feel quite right. Monthly donations are so valuable that some attempt to upsell is always very worthwhile, and you’re signalling implicitly that a one-off donation is the default by leaving it unchecked. (Not that I’m suggesting pre-checking it. My hypothesis is that a different form component — perhaps a dropdown, a button group, a radio button, or something else entirely — will convert better.)

    Thanks for putting this out there — and if you have data you can share in future I’d be fascinated to see it!

  3. Thierry

    > Buttons are more approachable, more tap-friendly, quicker,
    > and more visually appealing than a select menu, traditional
    > input or radio button.

    I don’t agree, for what it’s worth I think radio buttons are the best fit for this as “[they] represent a selection of one item from a list of items”[1].

    They also make more sense for keyboard users as the selection within the buttons is done via arrow key versus , / when using buttons . Which means buttons are *not* “quicker” as the article suggests.

    In my opinion, progressive enhancement should always be the way to go.

    [1] http://www.w3.org/TR/html-markup/input.radio.html

  4. Jason

    Why not lead with the “monthly donation” question? That seems to fit better upfront, and you could then adjust the suggested donation amounts based on which option was selected.

  5. Dave

    Brad,

    You’ve got a lot of great things going on with this page. It’s a nice, clean design that scales well and keeps a person on task with what they are there to do, donate.

    I really like the way you’ve integrated the explanation of the impact a donation will make. Although, that message overwrites the text to choose an amount. So unless someone clicks another amount, they may miss that experience which may have led to a higher donation. Still, it’s a really smart design.

    The auto generating city and state is another great reduction of steps. As a user, I really appreciate things like that.

    Last bit of feedback would be to make the Next Step button a different color than green to make it unique on the page. The hover state stands out, and is the same as your final call to action (Complete Donation >). Use the repetition of hitting the yellow button to ease people into hitting it one final time to donate.

    Overall, great work. Just splitting hairs on minutia.

    Dave

  6. Beate Sørum

    Brad,
    Thanks for a great post – these are some good tips, and heaven knows the charity sector needs help on donation forms!

    I want to share some of the experiences from redesigning the donation forms of The Norwegian Cancer Society (in collaboration with Netlife Research). We chose to make regular donations the default in our form, and immediately saw a good increase in both the number of new regular donors (+288%), and the amounts they give (+382%). We have not seen any indication that this hurts conversions for one-off donations, so I definitely recommend trying it out!

    This way, you can also have different default amount suggestions for the two giving-options. Changing the amounts based on regular/one-off would allow you to remove one or two amount suggestion-buttons. My gut feeling is that there are a few too many to chose from as is.

    Some other things we’ve done quite successfully, is 1) make the form portable, so we can insert it into any article whenever we want. This means we can keep people in the same emotional context where they decided to give, and not send them looking for the right form. And 2) make one “normal” form that asks all the data we want, and one very short form that only asks for name and email to use in situations were we think we might attract a lot of “less loyal” donors, i.e. situations were we are highly visible and appeal to people outside our normal donor demographic.

    Here’s a presentation that I and Ida Aalen did at the Institute of Fundraising National Convention this July, presenting our results and tips: http://www.slideshare.net/BeateSorum/iof-national-convention-2014-from-good-intentions-to-more-web-donations .

    Good luck with the rest of the work – glad to have such good colleagues in the noble war of making charity donation forms usable!

  7. hurekatek

    you did great job. but can we add some user message option on the donate form.

  8. Dan Beam

    For what it’s worth, using requestAutocomplete (basically a payment form in the browser itself) would simplify your payment, validation, and input steps and supports digital goods.

    More info: http://www.html5rocks.com/en/tutorials/forms/requestautocomplete/

  9. Scott

    An effective online donation form is one of the main ways for an organization to retain donors.

  10. Bjoern

    Great work! I work with charities quite frequently for marketing and branding strategies. I would possibly add the option to sign up for a newsletter, as they can then be approached with special events, appeals and further donations.

    I’d also give the option to share that they have just donated on Twitter and Facebook, after they’ve completed the donation. This may seem annoying, however, this is the point where the user feels good about themselves, they may want to share this with others, and consequently, perhaps inspire their friends and followers to donate too.

  11. Web Axe

    Completely agree with Thierry above; radios are the correct element. NEVER select the use of an element because of it’s “visually appealing”.

  12. Michael Tuck

    Outstanding article. I am involved in a project where we are creating an app to present a large amount of information in a highly structured, interconnected fashion, with some fairly complex user interaction required. A donation form is only one small aspect of our app, but the principles that you present, and the supporting info that goes with them (including the info from Luke Wroblewski) is proving very useful for our work. (Nice counterpoint from Thierry Koblentz also; his response, and its final result, is impressive.)

  13. Armur

    “Get idea -> test it -> draw conclusions” is how it should work. Not “our web-designer knows what users want the best”.

  14. Tim

    Brad,
    Interestingly enough, we at Brooks Brothers had set this same exact format (button selection for a donation amount and what that donation is worth to the charity) within our shopping bag and checkout process in 2012 for St Jude and Make A Wish. Looking at your post was like looking at my user flow diagrams.

    in the coming holiday season, you could definitely visit this site and see it work.

  15. Theresa Neil

    Great tips! We applied many of these concepts in our $100 Million Dollar Form Redesign for the Leukemia and Lymphoma Society two years ago. http://theresaneil.wordpress.com/2012/10/19/100-mil-dollar-form/
    There are still a number of improvements to be made but we have to get the decision makers to understand the benefits to certain UX best practices, like setting a default donation amount.

  16. MrCotelandia

    The first thing I thought when I saw the first picture was that the input was a strange button.

Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.