Redesign Habitat NYC's Donation Flow to be more user friendly
When users are making payments on their mobile devices they do not like to fill out long, tedious forms.
A donation flow that utilized quick payment methods, such as Apple Pay and PayPal in addition to Credit Card payment options.
Getting Started: Finding our Users
We kicked off our user research by creating a screener survey, to screen for users that were over 18 years old, made frequent online donations to non-profits, and who were familiar with Habitat NYC.
Out of 42 responses, we found that the largest groups of frequent donors were in their 20s - 30s and in their 60s, so we brought in users for interviews who fit that age range.
User Interviews: Understanding Our Users
In order to better understand the online donation behaviors of our users for this project, we held a round of user interviews.
We interviewed a total of 6 users that reflected the spread of demographic results we found in our survey. The users we interviewed were evenly split between men and women, and their age ranges were as follows: 3 users in their late 20s-early 30s, 1 user in their 50s, and 2 users in their 60s.
Sample User Interview Questions
Tell me about the last time you made an online donation.
Can you share with me about your best experience making an online donation?
Tell me about the worst experience you had making an online donation.
Can you tell me about your process that you go through to determine whether or not to donate to a certain non-profit or cause?
What motivates you to want to make a donation?
Common Themes Begin to Emerge
As we got about halfway into our user interview process, we started to hear similar feedback from our users. That said, the deeper we got into our user interviews, and the more data points we collected, the more confusing it all became.
After transcribing all of our user interviews and pulling out quotes and important points, my team needed to quickly and easily synthesize the seemingly overwhelming amount of information that we had gathered from our users.
"The more you have to type in like, I live here, my credit card is this, the more you’re kind of afraid that [your personal information] ... is going to be stolen or misused."
"I am very reluctant sometimes to make a donation because I know that I'm going to start having my inbox will be cluttered with so many requests"
Making Sense of Everything: Affinity Mapping
My team wrote out all of the main data points and quotes from our user interviews on to 6 different colored post-it notes, a different color for each person. We then organized all of the post-its into different groupings with similar themes or ideas.
After about 45 minutes, we had identified 11 different affinity groupings, and then we articulated "I" statements that summed up what that user insight was for each group.
Affinity Mapping Insights
What stood out to us after affinity mapping was that most of our users made online donations on their mobile devices.
Additionally, we identified the following 4 insights as the key to our design process.
I want a fast and easy donation process
I want to know my payment is secure
I want to make and informed donation
I want to see the impact of my donation
Visualizing our Primary User
Based on the research insights gained from our user interviews and the affinity mapping process, my team developed a persona that would embody our primary users' needs, goals, behaviors, and pain points.
With a better picture of Jesse, we were able to articulate a hypothesis and problem statement that would serve as our lighthouse and guide us in our design process to make the donation flow better meet Jesse's expectations.
Jesse (they/them), 32
Jesse's Key Traits
Uses their iPhone for most online behavior
Doesn't like filling out long forms
Donates online frequently
Likes to see the impact of their donation, i.e. where the money is going
How might we ...
help Jesse make a quick and secure donation to Habitat NYC, while providing them with the information they need to make an informed donation?
Further Research: Usability Testing
Now that we had a better understanding of our primary persona, we held a round of usability testing on the current Habitat NYC website to see, in context what some specific issues were with the current donation flow.
We gave our users the task of making an online donation to Habitat NYC.
Usability Testing Results
6/6 users expressed concern about Habitat NYC's current payment security and how their data would be kept safe
6/6 users wanted more information about the impact their donation would have
6/6 users wanted to see quick payment options when they checked out
User's quotes about current donation flow
"Most donation portals I've used have PayPal, so I'm used to seeing that when I make a donation online."
" I want to know a little bit more about where my money is going ... for me to figure that out, I would have to go searching for it on the rest of the website which is not something I'm interested in doing"
Current Habitat Donation Screen on Mobile
Following the usability testing we did on the current Habitat NYC platform, my team held a design studio, to quickly generate ideas for how to improve Habitat NYC's mobile donation flow that met our users' needs and expectations.
Paper Prototype Screens
And still, more research.
Before moving to digital wireframes, my team decided to usability test our paper wireframes, and it's a good thing we did.
The benefit of usability testing with paper wireframes is that people are much more likely to give candid feedback because the fidelity level is so low.
We quickly learned that our design solution fell short of meeting our users' needs and expectations, and we needed to do further research.
Where is the Apple Pay? I made a donation to a political campaign this weekend, and it was super fast with Apple Pay. Why don't you have that option?
The feedback we gained from the usability testing of our paper prototypes led us to research what standard mobile payment flows look like. We looked at what other non-profits were doing, and we also looked at what e-commerce websites with more mature design practices were doing as well.
We realized that if we only looked at what other non-profits are doing, we weren't going to find the best solution for our users because our users are more likely to be making purchases on e-commerce sites more frequently than making online donations.
Charity Water's Donation Screen
E-Commerce Site's Check Out Screen
NRDC's Donation Screen
Non-Profit Donation Pages
E-Commerce Check-Out Pages
Credit Card was the main option for making a donation to the organization
A few, more established non-profits had a PayPal Payment option
Many did not have quick payment options like Apple Pay or Google Pay
Most required you to input all of your contact information before proceeding with making a donation
Offered at least 3 options for payment including, quick payment options such as Apple Pay or Google Pay
Did not require you to input all your personal information before selecting your payment option
Moving to Mid-Fi and Hi-Fi
As we moved from paper wireframes to mid-fidelity wireframes and eventually hi-fidelity mockups, my team kept going back to the data we uncovered in our research.
We ultimately ended up with a flow that had information about Habitat NYC's mission and how many people they were helping.
When users got to the thank you page, they could see stories of families whose lives were transformed through Habitat NYC's work.
Mid-Fi Donation Screen #1
Mid-Fi Donation Screen #2
Mid-Fi Donation Screen Thank You
Hi-Fi Donation Screen #2
Hi-Fi Donation Screen #1
Hi-Fi Donation Screen Thank You
The most important takeaway from this project for me was to always go back to the data.
Throughout our design process, we held usability tests on every level of fidelity. As we sifted through the feedback of each usability test, we always found ourselves going back to our research to determine our next steps.
Each usability test helped us understand the data from our user interviews on a deeper level, and ultimately it led to cleaner and more intuitive designs that served our primary users' needs.
If I were to further iterate on this design, I would see how we could translate our updated design to a desktop version.