top of page
An easy-to-navigate donation flow
Through a UX Design of a donation flow, I
found users were passionate about giving and wanted specific needs to make giving online simple and easy.
Solo UX/UI Designer
Feb - Apr 2023
Website & Mobile
, Excel, Mural, Apple Products
Adobe XD
In my second project for a Google UX Design Certificate, I was offered several options to choose from for the project. Given my background working for nonprofits, I chose prompt:
The donation flow is for a website I dreamed up - For Women and Girls (FWG) - fighting for gender equality.
EMPATHY
Who is the user?
In Mebane, North Carolina, I asked five people at a coffee shop to explain their experience with online giving - motivations, likes and dislikes.
User Research - Dr. X
User Research - Ellie
User Research - Don & Donna
User Research - Dr. X
1/3
What about the competition?
A Competitive Analysis of five gender equity websites found strengths in donation flows - big buttons, clear instructions, unique design, and easy transition. Several donation flows included frustrations users mentioned in interviews.
Donation flow weaknesses from other gender equity websites
DEFINE
What is the user's pain points?
The feedback of users discovered the top four pain points:
Top four pain points from User Research
What is the problem I am trying to solve?
Problem Statement
Ellie is a graphic designer who wants an easy, quick online giving experience to support her causes.
The essential elements Ellie is looking for in online giving are — big buttons and fields, easy form flow, many payment options, and clear customer service contacts.
How do I give the user what they want?
IDEATE
To avoid a tedious form. I steered towards a multi-step form (three pages) with simple questions with big buttons and fields. I added a number system so users see progression.
Step 1 - Amount
Across the top of each form is a 1, 2, and 3.
The number show the users progression through the form - amount, billing info, and payment,
Step 2 - Billing Info
Fields and buttons are large and easy to see and navigate.
A check box limits mailers - which annoyed users.
Step 3 - Payment
Many payment options - PayPal, Venmo, CC, and eCheck - as requested
Customer service contact info at bottom of form
Form - Step 1 Amount
Form - Step 2 Billing Info
Form - Step 3 Payment
Mobile Wireframe
How did I meet the users needs?
PROTOTYPE
Easy navigation
Big button and fields
Simple form -
Brief questions on 3 pages
Contact Information -
Info on bottom
Limited Mailers
A checkbox for mailers
Many payment options
4 types of payments
How did I conduct the Usability Study?
TEST
I recruitment friends and family to evaluate the prototype of the online donation flow. The
user interviews were in person or by Zoom and lasted 30 minutes.
2
Rounds
of interviews
5
Users
who give online
5
Complete Tasks and Rate
1 (Found Easy), 2 (Difficult) 3 (Gave Up)
1) Open website and navigate to donation page
2) Fill out an amount on the form and click next
3) Fill out the billing page and click next
4) Choose a type of payment and submit form
5) Complete the form again with different payment
SUMMARY - What did users rate poorly?
80%
were confused by two donation buttons
60%
said monthly & one-time donation confusing
60%
said Venmo & PayPal transition abrupt
60%
40%
wanted confirmation
of donation amount
wanted tax info sent
Transition in navigation bar from wireframe to final
Design error correction from wireframe to final
Tax information added from wireframe to final product
Transition in navigation bar from wireframe to final
1/5
How did the portfolio change after iterations?
FINAL
"Now that makes me want to give!" - Users reaction to final design
What lessons did I learn?
To learn from failure is an important quality in UX design. As one of my first projects, I learned from my failure new ways of designing, iteration, and finding what the user needs.
bottom of page