Ana | Product Design

NGO

Web Design

Civic Tech

2023

How I increased donations with a page redesign

Role:

Product Designer

Year:

2023

Team:

Solo

Scope:

Researching, UX/UI, Design handoff, User testing

Background

I improved the checkout page to increase donations for

Declic - a non-profit group for online petitions and activism.

I improved the checkout page to increase donations for Declic - a non-profit group for online petitions and activism.

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

-5.26% increase in donations after redesigning the checkout page
-Improved user trust on NGO

-Evolved the design system

-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

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

Slighter Increase:

The amount of money received by Variant B (light) was 5.26% more than the amount given by Variant A (dark).

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

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 icon

I moved the error message from under to above the field for a better experience for people who use screen readers

Learnings & reflections

Growing by iterating: Revisiting my work after gaining more experience helped me solidify design reasoning and understand where there was room for improvement.

Improvement driven by small details: Increased input sizes and adjusted error messages support user confidence, especially for NGOs.

Data-based decisions: A/B testing is always a good idea, if possible, for quick design validation that drives conversion impact.

Thanks for reading

Next Project

ana@anaracheleanu.com

Are.na

ana@anaracheleanu.com

Are.na

ana@anaracheleanu.com

Are.na