Building a high-trust donation form
Donation Preference Clarity: A UX project to reduce selection errors and Increase revenue
Problem Statement
36% of users mistakenly selecting the monthly donation option instead of a one-time donation. This issue arises because the default toggle button is set to monthly donations, leading to confusion and unintentional choices by users. Consequently, the support center receives a significant volume of calls from users requesting changes to their donation preferences.
Solution
Our team redesigned the form to address the donation page errors, and enhanced visual clarity by highlighting the selected donation option with distinct colors, bold fonts, or icons, making it immediately apparent to users. Improved the UI of the toggle button and used clear, descriptive labels and simple language to explain the differences between "One-Time" and "Monthly" donations.
Before….
Reduce user errors by making the donation options clearer and more intuitive.
Improve visual clarity to ensure users can easily differentiate between "One-Time" and "Monthly" donation choices.
Minimize support center calls related to incorrect donation selections.
Project Goals
Default toggle issue: The toggle was set to "Monthly Donation" by default, leading many users to proceed without noticing the option.
Visual hierarchy: There was no clear emphasis on which donation option was selected, making it hard for users to distinguish their choices.
Language clarity: The descriptions for the donation options were not easily understandable for users, leading to further confusion.
Challenges
64% of users mentioned that the donation form is confusing, they do not realize that “Monthly donation” is pre-selected.
10% of users expressed feeling that Colorado Public Radio is deliberately misleading them into contributing more money.
20% of the user mentioned that they realize that they have made monthly donation, only when they reach the next page of donation for the receipt and see the total payment of the year.
Member Interview pain points
A/B testing
Objective
To determine whether the redesigned donation form reduces user errors in selecting the intended donation type (One-Time vs. Monthly) and improves overall user experience.
Test Variants
1
Control (A): Existing donation form with the default selection set to "Monthly."
Hypothesis
The redesigned form will reduce the number of users unintentionally selecting the monthly donation option, thereby decreasing the volume of support calls related to donation changes.
Key Metrics to Measure
Error Rate: Percentage of users who contact support to change their donation selection.
Selection Accuracy: Percentage of users who confirm their donation choice without requesting a change.
Conversion Rate: Percentage of users completing the donation process.
User Engagement: Time spent on the form, hesitation (e.g., toggling back and forth), and drop-off rates.
Test Setup
Randomly assign 50% of users to see the existing form (Control) and 50% to see the redesigned form (Variant).
Implement tracking using Google Analytics (for heat maps and session recordings), and support center call logs.
Ran the test for 2-3 weeks or until statistically significant results are obtained.
2
Variant (B): Redesigned donation form with improved visual clarity, a redesigned toggle button, and clearer labels.
Redesigned Version - Donation form
According to NHS(National Health Service), about 8% of men suffer from daltonism, which means they can’t rely on color hues and will need more than just color to determine button’s inactive/active state. We expect that presence of a check sign on active button will evoke an active state
Adding Icons:
Coinciding inactive button with the background along with outline:
This is a hybrid between background and border-based visual cues. It will improve a saturated vs. grayscale background color cue by making it clearer that the gray-colored button is blending into the background while the colored active button is separated from it. However, if we do not add the outline , and the inactive button coincides with the background, it may be harder for participants to decide about the active state, since the inactive button may not be perceived as a button at all. Hence, decided to have the darker shade outline
Design with direct color scheme and different saturation of same color:
Confusion happens when the visual cue used to indicate state is an inverted color scheme. This style is not optimal as it isn’t clear to users that the darker button signifies the active state. many of them mistake the lighter button for the selected option because it also has an “on” appearance. Inverted colors are problematic because they make the buttons too distinct from each other. When the buttons look different, it’s hard to tell which one is given emphasis when users compare them. Toggle buttons need to have a similar style so users can compare the buttons and spot the active variant. They’ll then assign the active variant as the selected option. Without a baseline for comparison, users aren’t sure what the visual cue is.
Improved Labels:
Key properties of label, such as it’s thickness, text size and color was considered. Increasing the weight and size of the text will help determine the active state. Neutral colors carry less visual weight, therefore, our expectation was that the colored label will signal an active state. Since more saturated color has more visual weight, hence we used more intense color on active state to evoke the button’s activation.
Results
78%
Reduced selection errors
22%
Increase in monthly donation
24%
Increase in form completion rate
If you're interested in more details about this project, let's get in touch!