Blog Articles
NonprofitOur workBest Practices

Putting task-oriented UX to work for Cancer Research Institute's online donation experience

Summary: Simplicity, ease, and speed: how UX improvements to the CRI donation form increased donations by 10%.

Making an online donation should be as easy as dropping a coin in a bucket.

But that’s not always the case. On some nonprofit websites, the online donation experience falls flat. Between finding the donation form, too many required steps, or poor directional copy, it can be confusing or even discouraging to donate online.

The donation form — even the entire website — is not built for the organization. It’s built to be a tool for users to get information and accomplish tasks. The biggest task of all? Giving a monetary donation, the foundation of success for charities.

Taking a task-oriented approach means supporting users in the effective and efficient completion of their desired tasks. Take automobile design, for example. When you get in your car, you have a destination in mind. Some cars may provide a different experience along the way, but they are fundamentally built to get you from point A to point B. A website should work the same way, and all roads should lead to making an online donation ridiculously easy to accomplish.

Meet the Cancer Research Institute

We recently redesigned the website for Cancer Research Institute, an organization leading the research, awareness, and funding efforts for immunotherapy, a revolutionary cancer treatment with the potential to treat all types of cancer.

This is their old donation experience.

Cancer Research Institute Online Donation Process, Four Browser Windows

Four pages to navigate. 40 fields and/or buttons to interpret. 750 words to read. Whew! There are a LOT of form fields here, and it feels daunting at first sight. There’s even a survey question related to how you can help them cut down on printing costs.

Two Cancer Research Institute Browser Window for Online Donations

Form data drives real results

These graphs show an analysis of over 40,000 HubSpot landing page forms, and how the number and type of fields consistently decrease conversions. This and other studies remind us that the longer and more complicated the form, the less likely a user is to complete it.

Four Separate Line Graphs Showing The Relation Of Conversion Rates And Form Fields, Text Areas, Text Fields, and Select Boxes

Refreshing the CRI donation experience

We tasked ourselves with giving the CRI donation experience a major makeover, prioritizing their donor audience and thinking about how to make donating easier and simpler for them.

Cancer Research Institute Online Donation Process, Initial Donation CTA and Donation Form Website Browser Screens

We started by taking the start-to-finish donation process from four pages to two pages.

Cancer Research Institute Online Donation Process, Choose Your Donation Amount Page and Check-Out Page

We also reduced the number of fields and buttons by 25% and the amount of copy from 750 words to 150 words.

And applied UX best practices every step of the way, including:

  • Embedding much of the FAQ copy into contextual popups when and where needed

  • Converting form radio buttons to actionable button levels

  • Default-selecting the most popular choices

  • Using progressive disclosure to only display certain fields based on user needs

Cancer Research Institute Online Donation Process Giphy, Select Donation Amount and Information Input Area

We found a study supporting our practice of explicit microcopy — demonstrating that using more descriptive submit button copy can actually double conversions in comparison with using “Submit” or other nondescript options. We made CRI's submit button specific to what the user had selected or input in the form, while also letting them know that clicking the button would make the donation.

Cancer Research Institute Online Donation Process Form and Submit CTA

Test, then test again

Creating great user experiences means we seek first to understand the mindset of the user and the tasks they want to accomplish onsite. Applying a task-oriented approach to any donation experience starts with testing—taking the temperature of current donation forms and simplifying the process as much as possible.

We can vet a donation experience by asking a few key questions: Starting from the homepage, how long does it take a user to find the donation form? Once on a donation page, how quickly can a user complete the process of making a donation?

Is there a real need for each and every field included on the form?

How easy is it to understand the donation process? Are there any moments of confusion or frustration for the user while they attempt to make a donation?

What did we learn?

The more roadblocks there are in an online donation experience, the fewer conversions the organization will achieve, and this can stand in the way of reaching true funding potential.

Making the donation process easy seems like a no-brainer, but this task-oriented approach to the experience design should be at the forefront of the vetting and testing process. This is true for one-time donations, recurring gifts, fundraising campaigns, or any other way money is raised. Every decision and update made to the online donation experience—it’s design layout, copy, and functionality—must be checked for simplicity, clarity, ease, and speed.