Blog  /  Work

Putting Task-Oriented UX to Work for Cancer Research Institute's Online Donation Experience

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. 

screenshot showing CRI's old donation form process

4 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.

screenshot showing the many form fields on CRI's old donation experience

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. 

set of four forms showing effect number of form fields has on conversions

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.

screenshot showing first step of CRI's new donation form

We started by taking the start-to-finish donation process from 4 pages to 2 pages. 

screenshot showing the new CRI donation experience, cut down to two pages

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

GIF showing the features and functionality of the new CRI donation form

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.

screenshot showing the descriptive button text on CRI's new donation form

And finally, we created a thank you page with the primary purpose of encouraging additional task engagement, so user engagement didn’t stop when the donation was completed.Screenshot showing CRI's new post-donation thank you page

Even the smallest increase in conversions can result in big bucks. CRI saw a 10% increase in online donations. Not bad! 

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. 

TEST IT YOURSELF! Make a donation to Cancer Research Institute >

Ben Cash
Founder/Strategist & Incessant Whistler
Clare Sweeney
Content Strategist & World Traveler
Share This!
Don't be a stranger.

Send us a message. Give us a call.

Meet Our Team