PANO Donation Flow

UX Research

Overview

• Background

PANO (the Pennsylvania Association of Nonprofit Organizations) is a statewide membership organization supporting the thousands of nonprofits that serve millions of people in the Commonwealth. The donor experience was in need of a redesign so that users can be well guided and give confidently to their work.

• Project Problem

The donation experience was functional but hard to discover and execute on mobile. 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.

• Project Goal

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.

• Original Donor Experience

• Methodologies

1. Competitive Analysis
2. User Interviews

Competitive Analysis

User Interviews

• Overview

Five people were interviewed. All five were young professionals in the 20-35 age range. They participated in a moderated usability study of the PANO website on their phones.

• Affinity Mapping

Research Results

Personas

Persona #1

Clarence Holmes

Age: 29

Education: Associate's Degree

Hometown: Philadelphia

Family: Single

Occupation: HVAC Technician

Bio

Clarence is busy with work but he believes in supporting local causes. He often donates to nonprofits when he sees an immediate need or is prompted by social media, but he is time-sensitive and expects the process to be fast and secure. He typically donates from his mobile phone during short breaks and is easily frustrated by slow loading times or too many required fields.

Goals

• Complete a donation quickly and efficiently, ideally in under a minute on his phone.
• Clearly understand where his money is going before entering payment details.
• Have multiple, secure payment options like Apple Pay or Google Pay to avoid manually entering his credit card information.

Frustrations

• Having to register or create an account just to make a one-time donation.
• Ambiguous or hidden fees or being unexpectedly prompted to cover processing fees.
• Form fields that are difficult to tap or navigate on a small mobile screen.

Persona #2

Mike Melissen

Age: 30

Education: Bachelor's Degree

Hometown: Glenside

Family: Married

Occupation: Dentist

Bio

Mike is financially stable and is a habitual, thoughtful donor. He often researches organizations before committing to a donation and may be interested in recurring donations or matching programs. He expects a professional, trustworthy, and informative experience. He is likely to donate from his desktop but values a clean, intuitive experience across all devices.

Goals

• Be able to easily set up a recurring donation and manage it later if needed.
• See clear transparency on how PANO uses its funds and the organization's overall impact.
• Feel assured that the donation platform is highly secure and his sensitive information is protected.

Frustrations

• A donation page that looks outdated or unprofessional, raising security concerns.
• Not being able to find tax receipt information or confirmation easily after the donation.
• A form that is not optimized for keyboard use or feels unnecessarily long.

DESIGN

User Journey

Donors decide emotionally before they act functionally. I want to lead with impact-first messaging before any inputs and keep it scannable for mobile. The primary CTA to Donate is high and obvious, not buried in navigation. Need quick reassurance before committing. Make recurring donations feel safe, optional, and reversible and fees should be totally transparent. Focusing on time to complete transaction, drop-off points, usage of quick-pay options.

User Flow

I want to avoid routing users through extra informational pages unless intentional. I want to make the choice between one-time and monthly donations clear and binary with simple language. Provide smart defaults for each step and don't overload the user with options. Go back must preserve all previous inputs and not reset. Don't want users to think about what the next step is or how to continue at any point so present smart defaults.

Paper Wireframes

For these paper wireframes, I explored multiple layout directions to quickly test how different levels of guidance, information density, and visual hierarchy could support a fast, confident donation flow.

❮ ❯

Digital Wireframes

I focused on breaking the experience into manageable stages with visible progress indicators, allowing donors to make one decision at a time without feeling overwhelmed. Key elements like preset amounts, flexible donation frequency, and multiple payment options are surfaced early, while personal details and optional actions are deferred until trust is established.

REFINE

Prototype

I connected each screen with interactive components and progress indicators to reinforce clarity and momentum. Preset amounts, recurring options, and fast payment methods were surfaced early to reduce friction, while secondary actions like comments or staying in touch were intentionally placed later so they wouldn't interrupt the primary goal of giving.

Throughout the process, I focused on making the prototype feel realistic and testable, paying close attention to spacing, hierarchy, and microcopy to communicate trust and security. I used consistent button styles, clear CTAs, and subtle reassurance cues to guide users forward, especially at moments where hesitation is most likely, such as payment entry. By iterating directly in the prototype, I was able to quickly assess flow timing, identify unnecessary steps, and ensure the experience felt fast, intuitive, and confident on mobile. I'm aligning closely with both user needs and the project goals.

Usability Test

The prototype I've created has been tested on 5 participants from ages 28 to 35 y/o.

Everyone successfully made it through to the end of the flow, but there were a lot of notes about text that could be cut or made more clear, or when certain options came up. A multi-page sequential layout was much preferable to a bunch of modals coming up on one screen.

Accessibility Considerations

Iterations

The selections needed borders around them to make it more obvious to people that these are selectable components.

→

Users feel more comfortable when there is a reminder of what they are paying during the entire flow. Always want to be able to go back and exit easily, while retaining the information that was entered before.

→

Test Project Prototype

GOING FORWARD

• Challenge

It was tough balancing the need for deep organizational transparency with the user's desire for speed. Early research indicated that donors wanted to know exactly how funds were used, yet adding this information threatened tand long-form fatigue I was trying to solve.

Managing this tension required careful information architecture. Like moving detailed documentation into optional "Learn More" accordions and strategically placing reassurance cues at high-friction moments, like the payment entry screen, without derailing the user's momentum.

• Lesson learned

This project reinforced that in a donation flow, emotional momentum is just as important as functional usability. By testing multiple iterations, I discovered that users were actually more comfortable with a multi-step sequential flow that provided constant feedback than a single-page form that felt overwhelming.

Even small usability tests revealed issues I hadn't anticipated, such as users losing awareness of total cost during multi-step flows or hesitating at payment screens due to a lack of trust signals. Addressing these findings early led to meaningful improvements with relatively small design changes.