CiviContribute

Following on the heels of T.J.'s post about Ned's experience using CiviContribute and CiviEvent, I accepted the challenge of putting together a mockup for a new default look for the first page of a CiviContribute contribution page. I had a lot of fun with this and think it'll be a great first step toward improving an already wonderful free and open source tool for nonprofits.

In this screencast I walk through specific usability changes and reasons why I'm proposing them. There are notes posted after the video as well (thanks for those, T.J.). Enjoy!

It's important to note that we’ve just looked at the actual contribution form in this design exercise. We didn’t attempt to cover best practices for links coming to the contribution page. Neither did we cover requirements of the template as a whole, nor what content folks should put on their contribution pages to communicate the reasons for donating. That said, here's a summary of points made in the screencast.

Make it Easy on the Eye and Fun

  • Increase font sizes to make labels more readable
  • Decrease number of form elements and messages visible by default. Rely more heavily on context-specific messaging depending on cursor focus.
  • Use more white space to give the eye rest and increased focus
  • Unify the width of all form elements

Rearrange the Order of Sections

  • We researched quite a few prominent donation pages and a few research docs and many followed this format
  • Bringing Billing Information before Payment Information will be a step toward a universal order for donation pages across the web

Clean Up Payment Info

  • Feature images (while retaining radio buttons) for credit card choice to make it simple and appealing
  • Place the Paypal (or any other such third-party payment option) in-line with credit card choices
  • Change the wording of some labels as a way to move toward creating industry standard wording

Modify the "Continue" Button

  • Change to "Confirm Your Donation" and offer friendly text underneath
  • Make "Cancel Donation" a less-prominent text link

Final Notes

This is a mockup; more objective testing will be needed before implementing changes like these. This rough doesn't account for all use cases (ie How should choosing recurring donations work?), but it does provide a starting point. If you want to grab the PSD or JPG and add/edit/comment on it, feel free!