AFA Non-Profit Website Redesign

Design for social good: 5-Day Design Sprint

Overview:

This project was completed during my study at BrainStation UX BootCamp. In teams of 4, we were given the task to improve the donation experience for a Canadian non-profit website. The final product includes a complete set of donation screens.

Context
BrainStation Project

Team
4 UX Designers

Role
UX Design, Storyboard, User Research, User Testing, Prototyping

Duration
5 DAYS, JULY 2023

HMW Question:

“How might we help social impact organizations express their value, and inspire people to take action in order to drive positive change?”

Sprint Timeline:

1. About the Organization

The Ancient Forest Alliance (AFA) is a registered non-profit organization working to protect BC’s endangered old-growth forests and to ensure a sustainable, value-added, second-growth forest industry. Founded in February 2010, the organization has quickly grown into British Columbia’s main organization working toward province-wide legislation to end the logging of endangered old-growth forests.

2. Primary Research

  • Discover the motivation, pain points and behaviour of Canadian residents who are hesitant to donate to non-profit organizations.

  • 3 qualitative, exploratory user interviews were conducted to discuss the interviewees’ personal donating experience. The results were recorded in the affinity map below.

    Participant criteria: Canadians who have expressed interest in donating to environmental causes, but rarely donated.

  • I established direct contact with AFA’s administrative director to get a more well-rounded view of the organization’s donors. Since most of their supportors are local citizens, their current solutions to encourage donation include: sharing photos through social media & news media, and direct interaction at events and booths.

3. Synthesize Result

*we grouped our interview results into donors’ pain points, motivations and behaviours via affinity mapping.

1. What’s wrong currently?

AFA’s current donation website has several usability issues that compromise the overall donation experience.

2. What’s the main issue?

Potential donors are hesitant to donate to organizations that are not transparent about how their money will be used.

3. Who is the end user?

Cautious donors who are interested in donating via the AFA website for the first time (mainly Canadian residents).

How might we…

“demonstrate AFA’s transparent impact to instil trust in cautious donors, so that positive change can be driven?”

a. Assumptions

People are more inclined to donate based on word-of-mouth and family & friend recommendations.

For new or unknown charities, people are more skeptical. Thus they are less willing to trust.

Donors want to see the impact of their contribution via quantifiable results of positive changes.

Hypothesis: Potential donors are hesitant to donate to organizations that lack transparency regarding their utilization of funds and the actual impact of donations.

Testing: We will know we’re right when we see the average donation AFA collects per month increase by at least 5%.

b. User Story

1). Persona

Meet Jake, a 34-year-old marketing consultant with a passion for nature. He values transparency and wants to ensure that his hard-earned money will make a difference in the cause he chooses to support.

He’s a “cautious supporter” who prefers organizations that have good reputations and are transparent about their impacts.

2). Story board: Jake’s Ideal Donation Journey

We created an ideal scenario about the user journey we want to achieve. It starts with the user getting informed about AFA until the end of donating. We want people like Jake to feel reassured and safe when they are first introduced to the website. Then throughout the donation process, users can choose the campaigns they want to support and receive personalized notes from the organization. Our solution is about showcasing positive future impacts by visualizing quantifiable data.

4. Usability Analysis

Task: Redesign AFA’s donation website to better cater to cautious donors like Jake, and encourage them to donate. The current donation site only contains one full page of forms to be filled, the image below is a screenshot of the respective website.

Problem 1: Long and Cluttered Input Cards

With a clutterd page, users have to browse through each part of the form, leading to information overload. The form also has a lack of system status visibility: no progress indicator can lead to mistakes and frustration.

Problem 2: Form Overlooking Errors

The donation form does not check for invalid input until the user attempts to complete the transaction.

Also, the Donate Confirmation button only has a green active state at all times which is very misleading.

Problem 3: No Help with Errors

The form captures and highlights errors, but does not provide any reason or how to quickly fix the errors. The website does not measure to help users recognize, diagnose, and recover from error.

5. Solutions & Sketches

Task Flow Before

1

STEP 1: Campaign Selection

  • The first step asks users to choose a campaign and the respective amount to donate.

  • The screen is divided into a left-side input panel and a right-side information panel.

STEP 2: Contact Information

  • The second step asks for users’ contact information and whether to dedicate the donation as a gift.

  • The screen on the right presents a summary of the selected donation amount and the campaign.

STEP 3: Payment Information

  • The third step is similar to an online checkout page, it requires payment details and a billing address.

  • The right panel presents the final amount to pay.

STEP 4: Confirmation Message

  • The success screen will present a personalized Thank You message with data visualization, showing how the donation will be used and how much money has been collected for the respective campaign.

Task Flow After

2

We agree to break down the current task flow into multiple steps. Instead of one full page of tables to fill, there will be four steps to guide users in making an informed decision to support the organization’s causes.

6. Hi-fidelity Wireframes

a. Select Donation Amount

b. Input Contact Information

c. Payment Process

7. User Testing and Improvements

1

Vague Payment Labelling

  • Labelling of some inputs and controls was vague (such as “Bank” to indicate “Direct Deposit”). Instead, more icons can be used to communicate.

Misleading Button Text

  • All testers misunderstood the “cover transaction cost” button. Using UI patterns such as mouse-over tooltips can help users better understand the feature.

Direction for Next Steps

  • Testers asked for more proof and results (such as photos of activity for campaigns), or more direct ways to keep tabs (such as subscribing to regular reporting).

2

3

8. Final Prototype

Learnings & Next Steps

  • Refine Word Choice

    Revise wording with user-friendly language and use less jargon to decrease confusion.

  • Teamwork & Communication

    Communicating and trusting each other was vital for the success of the design process.

  • Improve Data Visualization

    Provide additional data visualization in places like the Donation Confirmation screen.