Improving the donor experience on GiveWP donation forms
Improving the donor experience on GiveWP donation forms
Contribution
Product Design
Developer
Jason Adams
Year
2023
Before
Before
Before
After
After
After
With the launch of Give 3.0, I decided to take the initiative to redesign our donation forms. My focus was on our two form layouts: Classic and Multi-step. In this case study, I will address only the Classic form layout. The main goal was straightforward: improve the donor experience and ensure consistency in our UI.
I audited our current donation forms and identified areas for improvement. I will break down the form into sections to make it easy to understand my approach and the reasoning behind the redesign.
With the launch of Give 3.0, I decided to take the initiative to redesign our donation forms. My focus was on our two form layouts: Classic and Multi-step. In this case study, I will address only the Classic form layout. The main goal was straightforward: improve the donor experience and ensure consistency in our UI.
I audited our current donation forms and identified areas for improvement. I will break down the form into sections to make it easy to understand my approach and the reasoning behind the redesign.
With the launch of Give 3.0, I decided to take the initiative to redesign our donation forms. My focus was on our two form layouts: Classic and Multi-step. In this case study, I will address only the Classic form layout. The main goal was straightforward: improve the donor experience and ensure consistency in our UI.
I audited our current donation forms and identified areas for improvement. I will break down the form into sections to make it easy to understand my approach and the reasoning behind the redesign.
Design Direction: Simple, clean, modern feel
Design Direction: Simple, clean, modern feel
Design Direction: Simple, clean, modern feel
Header Section
Header Section
Header Section
Header Section
INSIGHTS
1
1
The underline beneath the title wasn't relevant; it's obvious that this is the heading of the section.
The underline beneath the title wasn't relevant; it's obvious that this is the heading of the section.
The underline beneath the title wasn't relevant; it's obvious that this is the heading of the section.
2
2
Some donors were finding it difficult to understand the goal type. Our core goal types, aside from the amount raised, are the “number of donors” and “number of donations”. While the dollar symbol denotes the amount raised, the text "goal" beneath the number isn't clear enough for the number of “donors” and “donations”. This was not clearly understood with our current goal component.
Some donors were finding it difficult to understand the goal type. Our core goal types, aside from the amount raised, are the “number of donors” and “number of donations”. While the dollar symbol denotes the amount raised, the text "goal" beneath the number isn't clear enough for the number of “donors” and “donations”. This was not clearly understood with our current goal component.
Some donors were finding it difficult to understand the goal type. Our core goal types, aside from the amount raised, are the “number of donors” and “number of donations”. While the dollar symbol denotes the amount raised, the text "goal" beneath the number isn't clear enough for the number of “donors” and “donations”. This was not clearly understood with our current goal component.
SOLUTION
1
Removed the underline and made the heading more prominent.
Removed the underline and made the heading more prominent.
Removed the underline and made the heading more prominent.
2
To avoid confusion, I added context to the donation goal bar by highlighting the donation goal type.
To avoid confusion, I added context to the donation goal bar by highlighting the donation goal type.
To avoid confusion, I added context to the donation goal bar by highlighting the donation goal type.
Donation Amount Section
Donation Amount Section
Donation Amount Section
Donation Amount Section
Goal: Make it easier and faster for donors to make a decision
Goal: Make it easier and faster for donors to make a decision
Goal: Make it easier and faster for donors to make a decision
INSIGHTS
1
The custom amount field serves as both an input and a display field for any selected donation amount, which can be confusing.
Secondly, we want donors to make decisions as quickly as possible, and having the custom amount as the first option complicates this process because it requires them to think of a specific figure to donate.
Lastly, the custom amount button in the donation amount levels is redundant; selecting it simply activates the custom amount field, which can also be done by directly selecting the custom amount field.
The custom amount field serves as both an input and a display field for any selected donation amount, which can be confusing.
Secondly, we want donors to make decisions as quickly as possible, and having the custom amount as the first option complicates this process because it requires them to think of a specific figure to donate.
Lastly, the custom amount button in the donation amount levels is redundant; selecting it simply activates the custom amount field, which can also be done by directly selecting the custom amount field.
The custom amount field serves as both an input and a display field for any selected donation amount, which can be confusing.
Secondly, we want donors to make decisions as quickly as possible, and having the custom amount as the first option complicates this process because it requires them to think of a specific figure to donate.
Lastly, the custom amount button in the donation amount levels is redundant; selecting it simply activates the custom amount field, which can also be done by directly selecting the custom amount field.
INSIGHTS
2
Switching currency is currently done in the custom amount field, which gives the impression that it only applies to the custom amount. However, this selection also affects the donation amount levels.
Switching currency is currently done in the custom amount field, which gives the impression that it only applies to the custom amount. However, this selection also affects the donation amount levels.
Switching currency is currently done in the custom amount field, which gives the impression that it only applies to the custom amount. However, this selection also affects the donation amount levels.
3
The current active state of a selected donation amount, while standing out from the rest, makes it difficult to quickly scan the options. The primary state of the other buttons also demands attention, causing users to spend more time making a decision.
The current active state of a selected donation amount, while standing out from the rest, makes it difficult to quickly scan the options. The primary state of the other buttons also demands attention, causing users to spend more time making a decision.
The current active state of a selected donation amount, while standing out from the rest, makes it difficult to quickly scan the options. The primary state of the other buttons also demands attention, causing users to spend more time making a decision.
INSIGHTS
4
The theme for our UI components was to go with a flat design with less emphasis on shadows
The theme for our UI components was to go with a flat design with less emphasis on shadows
The theme for our UI components was to go with a flat design with less emphasis on shadows
5
Currently, users take three steps to make a decision: selecting the checkbox, selecting the dropdown, and choosing their preferred frequency. This increases the time spent on making a decision.
Additionally, the frequency selection can be easily missed with this component. Lastly, the recurring donation option is the last shown in this section, decreasing the chances of donors opting for a more impactful recurring donation.
Currently, users take three steps to make a decision: selecting the checkbox, selecting the dropdown, and choosing their preferred frequency. This increases the time spent on making a decision.
Additionally, the frequency selection can be easily missed with this component. Lastly, the recurring donation option is the last shown in this section, decreasing the chances of donors opting for a more impactful recurring donation.
Currently, users take three steps to make a decision: selecting the checkbox, selecting the dropdown, and choosing their preferred frequency. This increases the time spent on making a decision.
Additionally, the frequency selection can be easily missed with this component. Lastly, the recurring donation option is the last shown in this section, decreasing the chances of donors opting for a more impactful recurring donation.
SOLUTION
1
Removed the custom amount from the amount grid and positioned the donation amount levels above the custom field to enable donors to make decisions faster.
Removed the custom amount from the amount grid and positioned the donation amount levels above the custom field to enable donors to make decisions faster.
Removed the custom amount from the amount grid and positioned the donation amount levels above the custom field to enable donors to make decisions faster.
2
Positioned the currency switcher above the donation amount levels and custom amount field to clearly indicate how their action changes the currency at the top level.
Positioned the currency switcher above the donation amount levels and custom amount field to clearly indicate how their action changes the currency at the top level.
Positioned the currency switcher above the donation amount levels and custom amount field to clearly indicate how their action changes the currency at the top level.
3
Changed the active state of the selected amount and the default state of the donation amounts to improve scanning and reduce the time spent on selecting a donation amount.
Changed the active state of the selected amount and the default state of the donation amounts to improve scanning and reduce the time spent on selecting a donation amount.
Changed the active state of the selected amount and the default state of the donation amounts to improve scanning and reduce the time spent on selecting a donation amount.
4
Removed the shadow and used a border to differentiate from a default checkbox with a label.
Removed the shadow and used a border to differentiate from a default checkbox with a label.
Removed the shadow and used a border to differentiate from a default checkbox with a label.
5
Moved the recurring donation component to the top of this section to increase the chances of donors making a more impactful donation. Additionally, I used tabs to reduce the time spent on making a decision.
Moved the recurring donation component to the top of this section to increase the chances of donors making a more impactful donation. Additionally, I used tabs to reduce the time spent on making a decision.
Moved the recurring donation component to the top of this section to increase the chances of donors making a more impactful donation. Additionally, I used tabs to reduce the time spent on making a decision.
Donor Info Section
Donor Info Section
Donor Info Section
Donor Info Section
Goal: Make it cleaner and consistent
Goal: Make it cleaner and consistent
Goal: Make it cleaner and consistent
INSIGHTS
1
The new direction for our new forms required us to change the alternating background fill for sections.
The new direction for our new forms required us to change the alternating background fill for sections.
The new direction for our new forms required us to change the alternating background fill for sections.
2
I noticed some inconsistencies with input fields on the form. For example, the current custom amount input field is different from the other input fields.
I noticed some inconsistencies with input fields on the form. For example, the current custom amount input field is different from the other input fields.
I noticed some inconsistencies with input fields on the form. For example, the current custom amount input field is different from the other input fields.
SOLUTION
1
Removed the background fill to ensure consistency across all sections. To maintain uniformity, I ensured that the headings and descriptions of each section look the same.
Removed the background fill to ensure consistency across all sections. To maintain uniformity, I ensured that the headings and descriptions of each section look the same.
Removed the background fill to ensure consistency across all sections. To maintain uniformity, I ensured that the headings and descriptions of each section look the same.
2
Updated the input fields with their respective components.
Updated the input fields with their respective components.
Updated the input fields with their respective components.
NEW TEXT INPUT COMPONENT
Payment Details Section
Payment Details Section
Payment Details Section
Payment Details Section
Goal: Make it easy for donor to decide
Goal: Make it easy for donor to decide
Goal: Make it easy for donor to decide
INSIGHTS
1
Notice component design needed to up be updated.
Notice component design needed to up be updated.
Notice component design needed to up be updated.
2
We wanted donors to see their donation summary after filling in their details; having the payment gateways show before that wasn’t the ideal experience.
We wanted donors to see their donation summary after filling in their details; having the payment gateways show before that wasn’t the ideal experience.
We wanted donors to see their donation summary after filling in their details; having the payment gateways show before that wasn’t the ideal experience.
3
The donation summary needed to be the first thing donors see in this section.
The donation summary needed to be the first thing donors see in this section.
The donation summary needed to be the first thing donors see in this section.
SOLUTION
1
Updated the design for the notice component.
Updated the design for the notice component.
Updated the design for the notice component.
2
Changed the position and feel of the design, keeping a clean and simple direction in mind.
Changed the position and feel of the design, keeping a clean and simple direction in mind.
Changed the position and feel of the design, keeping a clean and simple direction in mind.
3
Moved the donation summary to the top. This ensures that donors see it before the payment gateways. Additionally, added a CTA to allow donors to change their donation frequency, encouraging more recurring donations and thus higher impact for organizations.
Moved the donation summary to the top. This ensures that donors see it before the payment gateways. Additionally, added a CTA to allow donors to change their donation frequency, encouraging more recurring donations and thus higher impact for organizations.
Moved the donation summary to the top. This ensures that donors see it before the payment gateways. Additionally, added a CTA to allow donors to change their donation frequency, encouraging more recurring donations and thus higher impact for organizations.
Reflections
This was an awesome experience, requiring a lot of system thinking to ensure design consistency across all our custom fields and form layouts.
This was an awesome experience, requiring a lot of system thinking to ensure design consistency across all our custom fields and form layouts.
This was an awesome experience, requiring a lot of system thinking to ensure design consistency across all our custom fields and form layouts.