How I Increased Donations with a Page Redesign
Client
Declic
Role
UX/UI Designer
Team
Solo Design
Scope
Researching, UX Design, UI Design, Prototyping, User Testing, Design Handoff
Platform
Web
Year
2023
What is Declic
Declic is a non-profit group and the first Romanian website for online petitions and activism. Members take part in various campaigns to sway politicians and encourage social change.
Why a redesign
What if the donation checkout page could do more than just accept card payments? The checkout page needed improvements to make the experience better and increase donations.
What challenged me
Since I used to work as a campaigner for this organisation, it was hard for me to stay neutral when making design decisions.
Context
How it started
I have been a user engagement campaigner at Declic for more than 5 years. We did lots of optimisations for campaigns. However, user experience was limited due to a lack of dev input and a lack of UX knowledge. When the donation page was updated, I used the chance to make the experience better.
Improving the experience
Where to start
Firstly, I had a round of listening tours with the product owner and developer. To be sure that everyone was on the same page, we started by discussing the user flow diagram. This helped to better see the checkout page and what needed to be changed.
User flow for existing users
User flow for new users
Heuristic Evaluation
I reviewed the existing donation page to see how it complies with recognised usability principles.
Design Assesement
1
The text is difficult to read because of the colour choices; it fails the contrast test.
2
The card number field doesn't have any space between numbers; the input fields are not visually balanced, and this makes the design look messy and unreliable.
3
All types of error messages appear in this spot, not under the input field that was filled incorrectly; the error message colour and the primary button colour are the same, which can lead the user into confusion and, ultimately, abandonment of the task.
4
The yellow button fails the contrast ratio test and is difficult to read; it directs the user to change its donation, thus potentially abandoning the task.
Time do design
Solutions
I made a series of new mockups with solutions for the problems highlighted above.
Default State
With input
1
I added a back button in the flow for users not feeling trapped.
2
Added a consent box.
3
Increased contrast for readability.
4
I grouped the numbers into smaller chunks and added feedback cues for the user.
Incorrect input error
No input error
1
All error messages appear contextually under each field.
Test it
A/B test
Because the frames with the black theme were based on an existing page design, I made some new ones light-themed so I could do an A/B test to see which one performed better.
My presupposition was that an easy-on-the-eye design (a lighter theme) would have better conversion rates. To verify that, I did an A/B test using a 548,000 sample size for each variation.
For the whole group of users, the sample size was statistically significant. In this test, I used the number and amount of donations to measure the conversions.
My presupposition was that an easy-on-the-eye design (a lighter theme) would have better conversion rates. To verify that, I did an A/B test using a 548,000 sample size for each variation.
For the whole group of users, the sample size was statistically significant. In this test, I used the number and amount of donations to measure the conversions.
Var A: 41 donations
Var B: 58 donations
The results were not statistically significant. Although the donation amount from Variant B (light) was 5.26% bigger than Variant A (dark). So we choose to use the higher-performing variant.
Additional improvements
This redesign for Declic was one of my first projects as a designer. After revisiting it, I realized that my knowledge had grown. I decided to improve the two versions to reflect my current skills and show my progress. Below is what changed:
- For easier tapping, I made the input size WGAG-compliant at 44 px height
- To declutter the UI, I removed all the helper text, which was unnecessary since we already had basic labels like names and e-mail
- I increased the body line height at 150% for better readability
- I increased the contrast for the input border, as interactive elements require a minimum contrast ratio of 3:1
- I didn't rely soley on red text to show errors, as some people might have visual difficulties and need a helper cue, such as an icon, to understand the error
- I moved the error message above the field for a better experience for people who use screen readers
Improvements for light theme
Improvements for dark theme
