Floating labels in Checkout
Floating labels in Checkout increased mobile conversion by 1.3% while improving accessibility.
What we tested
In this experiment, we introduced floating labels to input fields in the Checkout Modal. It’s a small but meaningful UI enhancement designed to improve clarity and ease of use for donors. As donors begin typing, the field label moves above the input, staying visible and reducing confusion.
This change also improves accessibility, aligning with WCAG standards for form inputs.
We tested two visual variations of this update, both with the same interaction pattern but slight differences in color and shadow styling.
Hypothesis
By making data entry more intuitive, we expected floating labels to enhance the donor experience, reduce errors, and increase donation conversion, especially on mobile.
Test setup
| Duration | 45 days |
| Timing | September-October 2024 |
| Audience | 4.3 million visitors to Checkout Modal |
| Group split | • Control (33%) – default form behavior • Test #1 (33%) – floating labels with original colors and shadows • Test #2 (33%) – floating labels with updated colors and shadows |
| Key metrics | • Donation conversion • Average revenue per user (ARPU) |
Key results
- Test group 1 showed consistent improvements, particularly on mobile and iOS:
- +1.3% conversion increase on mobile
- +1.7% conversion increase on iOS
- We also observed an increase in ARPU for test group 1:
- +2% ARPU increase on mobile
- +1.7% ARPU increase on iOS
- Some nonprofits observed up to +3% increase in overall donation conversion
- Test Group 2 didn’t show meaningful changes, reminding us that even small styling details can impact performance.
Segment insights
The test revealed some interesting findings in conversion to recurring donations. Here's the breakdown:
By device
- Tablet users saw the biggest lift in conversion, while mobile and desktop also showed steady gains
By country
Australia and the U.S. showed the highest improvements in conversion to recurring donations:
- +14% in Australia
- +4% in the U.S.
Conclusion
Test group 1 clearly outperformed, delivering measurable gains in both conversion and ARPU. It also enhanced accessibility by aligning with WCAG guidelines. Based on these strong results, we’ve implemented this version of floating labels in Checkout Modal to improve the donor experience across the board.
What this means for you
You can trust that your Checkout experience is built with both performance and accessibility in mind. At Fundraise Up, we test every improvement to ensure it not only raises more revenue, but also meets the highest UX and compliance standards.
→ Explore how we build accessible donation experiences
