New Story is a housing nonprofit tackling one of the world's biggest problem: homelessness.
The unconventional work we do is catching the media's attention, increasing traffic to our website. The donor experience was in need of a full redesign so that users can be well guided and give confidently to our work.
Sole UX Designer & UI Engineer
May 2021 - July 2021 [3 months]
Research, data synthesis & collection, wireframes, prototype, task analysis, UI design, usability tests, deliverable hand-off
Nonprofits are notorious for having dated, frustrating UX-- it's compelling enough for users to abandon their task of donating to the organization despite feeling inspired to moments prior. Our donation experience was functional; that was it. One could get the job done if they were set on it, but it had great opportunity for improvement.
Donors needed a way to give online with less clicks and more payment options with confidence and ease.
To create a simple and intuitive donor experience where donors can confidently auto-fill details for a quick payment process, change payment methods, and eradicate the need for support call to complete the task.
To kickoff the discovery phase, I conducted a usability heuristic evaluation on our donor experience that revealed key pain points:
USER AUTONOMY
- Problem: Lack of payment options; subtle to no visible “emergency exit”, CTA buttons could also use more prompting (i.e. “Next step” over “Donate” on the payment information page).
- Potential Solution: Provide at least 1 other payment option; New Story Logo to lead to home page (most intuitive) or implement back to home page button / back button to previous page for any edits
CONSISTENCY AND STANDARDS
- Problem: Culture in copy is inconsistent (i.e. “can’t be blank” error message vs. “Please ___”, “Your donation is complete. Thanks.”, Asterisk on required fields, etc.)
- Potential Solution: Grammar check, remove redundant notifications to streamline communication (i.e. banner on top post successful donation.), add more body post successful payment to reassure donor of their completed task (maybe include videos, note on upcoming email confirmation, etc.)
HELP AND DOCUMENTATION
- Problem: Some people may opt out of completing their donation due to lack of additional information such as “Learn more” or “Agree to Terms and Conditions”
- Potential Solution: Include “Learn more”, "Terms and Conditions", and/or “i” button with pop-up for reassurance
PERCEIVED SECURITY
- Problem: Need to increase a sense of security when providing sensitive details
- Potential Solution: Reassuring the donor by visually creating familiarity surrounding security (i.e. visual emphasis/accents around credit card input cards). The CTA copy can help manage expectations and reduce anxiety by utilizing phrases such as, “Next step”, “Continue”, “Review”, etc. Create quick links or “i” (information) buttons for reassurance in case donors need support
While conducting a task analysis with 5 users on our donation platform, the average rating was a 5/10 for a straightforward experience.
However, the pain points were many-- our users frequently experienced anxiety or uncertainty throughout the process. They completed their tasks but they were left wanting in the end:
Nonprofits across the board have been collecting donations in various forms. We heard the people and saw the need to expand our payment options for our donors. A quick content inventory with influential nonprofits provided some insight:
PAYPAL
PayPal is more commonly used on retailers’ websites as it has high conversion rates for successful checkouts. This is valuable insight despite the option being less evident in the nonprofit sector
.
Interaction: It always redirects the donor/user to a new page to login to PayPal (pop-up), then redirects again to the checkout page for final review of payment.
May not have as much UI autonomy here for the payment information page other than providing the option of PayPal before taken to a pop-up/new page.
ACH
ACH is always paired with a description of why it’s the preferred payment method, particularly with nonprofits. It’s a longer process if Stripe/Plaid isn’t offered (i.e. Amazon’s interface).
Interaction: Pop-ups are the go-to method across traditional ACH and Stripe/Plaid interfaces. For example, (RED) completes the checkout process on the pop-up all the way to the end.
May not have as much UI autonomy here for the payment information page other than providing the option of ACH before taken to a Stripe/Plaid pop-up/new page.
EXPRESS CHECKOUT
G-Pay and Apply Pay are utilized platforms across nonprofits and retailers. It is more commonly used at retailers’ websites, which is a bonus for familiarity and learnability
.
Interaction: Typically a pop-up or same-page checkout- I assume there’s more design autonomy for a same-page checkout vs. a pop-up provided by the donors’ utilized web browser.
The benefit of express checkout is the least amount of clicks-- it requires approx. 2 clicks to complete the task. Card checkout is currently the most popular form of payment.
Everyone who uses the internet is pretty used to making transactions online. Filling out card details is a rapid process these days, and a lot of the experiences tend to bleed into each other-- meaning, features like autofill, 1-click-pay, and even UI design tend to repeat itself. Retailers paved the way on this one, and we wanted to make our experience just as seamless and efficient. But there were some knots to work out from the first pass:
1. Reduce # of steps: 4-steps might be one too many
2. Clarify unfamiliar platforms: "Who is Plaid? And DonorSecure? Can I trust them?"
3. Optimize for collecting more details: our growth team communicated the value of having donors' name, email, and home address [optional] for data collection and potential partner connections
A second pass at the donation flow was designed bearing efficiency, simplicity and data-collection in mind with the use of iconography, tabs, and auto-populating input fields.
Five users were given the task of donating $50/month to New Story. While the task itself was completed with flying colors, the debrief revealed that a sense of security is fully-established at the end of the flow with proper feedback. The hang up was consistent across all participants:
1. "Thank you!" page was too new: We provide access to the users' auto-generated donor dashboard underneath the "thank you" copy, but the introduction to a new next step didn't help. At most, they expected a note about checking their email.
2. Managing expectations: "What's a dashboard? Did I create that? How do I get back to it?" Our users needed more clarity on what to expect next from the auto-generated dashboard
MORE INFORMATION
ADJUSTING DONATION
ERROR MESSAGE
The redesigned donation flow received an average rating of 8/10 for overall user experience from our 5 participants and described it as a "simple, straightforward, and secure" experience.
This was just the beginning of a series of roll-outs to elevate the donor experience. I had the privilege of redesigning the Donor Dashboard and Campaigns, which will be included in my portfolio soon.
Unapologetically nudging you to check out New Story-- feel free to experience the donor journey for yourself and contribute to an important cause!
