NGO
Web Design
Civic Tech
2023
How I increased donations with a page redesign
Researching, UX/UI, User Testing, Design Handoff
Background
I improved the checkout page to increase donations for
Declic - a non-profit group for online petitions and activism.
Impact
-5.26% increase in donations after redesigning the checkout page
-Improved user trust on NGO
-Evolved the design system
Problem: donation journey losing momentum
Declic had been running successful engagement campaigns for over 5 years, but the donation flow lagged behind. The lack of UX-informed design led to friction in the checkout journey, resulting in missed opportunities to convert engaged supporters into donors.
Improving the experience
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.
Heuristic evaluation
I reviewed the existing donation page to see how it complies with recognized usability principles.
Solutions
I made a series of new mockups with solutions for the problems highlighted above. Below is a selection.
Test it
The black theme was based on a page design that was already there, so I made a light theme to do an A/B test. For each variation, I used a sample size of 548,000. The number of donations each variant would get and the total number of donations were used to measure conversions.
Slighter Increase:
The amount of money received by Variant B (light) was 5.26% more than the amount given by Variant A (dark).
Additional improvements
This redesign for Declic was one of my first projects as a designer. After going back, I realized that my knowledge had grown. So I improved the two versions to reflect my current skills. Here is what changed:
I made the input size 44 px height WGAG-compliant for easier tapping.
removed all the helper text, which was unnecessary since we already had labels
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 just on color text to show errors, as some people might have visual difficulties and need a helper cue (icon)
I moved the error message from under to above the field for a better experience for people who use screen readers
NGO
Web Design
Civic Tech
2023
How I increased donations with a page redesign
Researching, UX/UI, User Testing, Design Handoff
Background
I improved the checkout page to increase donations for Declic - a non-profit group for online petitions and activism.
Impact
-5.26% increase in donations after redesigning the checkout page
-Improved user trust on NGO
-Evolved the design system
Problem: donation journey losing momentum
Declic had been running successful engagement campaigns for over 5 years, but the donation flow lagged behind. The lack of UX-informed design led to friction in the checkout journey, resulting in missed opportunities to convert engaged supporters into donors.
Improving the experience
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.
On the path to a pleasing experience
I reviewed the existing donation page to see how it complies with recognized usability principles.
Solutions
I made a series of new mockups with solutions for the problems highlighted above. Below is a selection.
Test it
The black theme was based on a page design that was already there, so I made a light theme to do an A/B test. For each variation, I used a sample size of 548,000. The number of donations each variant would get and the total number of donations were used to measure conversions.
Slighter Increase:
The amount of money received by Variant B (light) was 5.26% more than the amount given by Variant A (dark).
Additional improvements
This redesign for Declic was one of my first projects as a designer. After going back, I realized that my knowledge had grown. So I improved the two versions to reflect my current skills. Here is what changed:
I made the input size 44 px height WGAG-compliant for easier tapping.
removed all the helper text, which was unnecessary since we already had labels
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 just on color text to show errors, as some people might have visual difficulties and need a helper cue (icon)
I moved the error message from under to above the field for a better experience for people who use screen readers
NGO
Web Design
Civic Tech
2023
How I increased donations with a page redesign
Researching, UX/UI, User Testing, Design Handoff
Background
Lupl is a tool designed to streamline legal processes and workflows. I build a step feature that turns overload into manageable and enables users to better manage their workload.
Impact
-5.26% increase in donations after redesigning the checkout page
-Improved user trust on NGO
-Evolved the design system
Problem: donation journey losing momentum
Declic had been running successful engagement campaigns for over 5 years, but the donation flow lagged behind. The lack of UX-informed design led to friction in the checkout journey, resulting in missed opportunities to convert engaged supporters into donors.
Improving the experience
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.
On the path to a pleasing experience
I reviewed the existing donation page to see how it complies with recognized usability principles.
Solutions
I made a series of new mockups with solutions for the problems highlighted above. Below is a selection.
Test it
The black theme was based on a page design that was already there, so I made a light theme to do an A/B test. For each variation, I used a sample size of 548,000. The number of donations each variant would get and the total number of donations were used to measure conversions.
Slighter Increase:
The amount of money received by Variant B (light) was 5.26% more than the amount given by Variant A (dark).
Additional improvements
This redesign for Declic was one of my first projects as a designer. After going back, I realized that my knowledge had grown. So I improved the two versions to reflect my current skills. Here 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 just on color text to show errors, as some people might have
visual difficulties and need a helper cue, such as an iconI moved the error message from under to above the field for a better experience for people who use screen readers
