Animal Companions Support Fund (ACSF) UX Case Study

Design Prompt / Brief:

“Design a donation flow for a humanitarian cause”

THE BACKGROUND -

Project

target audience

The Product

As part of the Google UX Design Professional Certificate, I designed a responsive website -- mobile, tablet and desktop screens -- for the fictitious ACSF -Animal Companions Support Fund.

The Product

target audience

The Product

The project focused on the “donation flow” of a humanitarian cause. The ACSF fits this brief as it provides financial and non-financial support to animal companions (i.e. humans). The mission is twofold: 1. promote animal welfare, and 2. ensure animals and their two-legged companions stay together (thereby reducing stress on animal shelters due to surrenders and preventing the mental and emotional fallout of having to surrender an animal companion). All of which have social and economic costs for society.

target audience

timeline & my role

Focus - "Donation Flow"

Animal Welfare Donors research:

Female 64%, Male 36%
Largest donors - 50-64 years (25%); Over 75 (29%)
Education - High School (45%); College or Higher (49%)
Income - $75-$149k (42%); $150-$249 (22%)
Household Size - 1 person (37%); 2 people (29%)
Marital Status - single (52%); married (48%)

timeline & my role

my responsibilities

timeline & my role

Dec 2022 - Jan 2023

UX researcher, UX designer, Information Architect, UX writer

my responsibilities

Wireframe development (paper and digital), Prototype development (low fidelity and high-fidelity), User research, Competitor research, Secondary research and analysis.

tool

my responsibilities

Adobe XD

the problem, SPECIFIC CHALLENGES and project goals

the problem

project goals

As a not-for-profit, the Animal Companions Support Fund (ACSF) relies 100% on donations - also competing with other not-for-profits for donation dollars. There are “known” barriers that prevent donors from giving. This project involved designing a responsive website to overcome these “known” barriers / obstacles to donating (i.e. “the problem”).

project goals

Develop a responsive website for the ACSF to overcome “known” and “applicable” barriers to donating online.

SECONDARY RESEARCH

BARRIERS TO DONATION

Secondary Research - Forbes Nonprofit Council “10 Major Barriers Keeping Donors From Giving And How To Overcome Them” (March 2019). Solutions to be incorporated into the UX design.

BARRIERS TO DONATION

5 Barriers to Donation that speak to this design:

Complicated User Experience
Economic Concerns
Lack of Clear ROI
Lack of Value
Not Enough Awareness

the research study

purpose of the research

To test the usability of the ACSF website (donation flow focus), including:

ease of use
simplicity of the user flow
specific challenges users might face

This data provides insights to inform redesign.

research goals

purpose of the research

Determine whether users can complete core tasks with ease – specifically donation flow.
Identify pain points on the website.
Determine current design problems that need addressing, feeding these solutions back into the design to improve usability.

research questions

Q1. What can we learn from the steps that users are taking while using the website as a whole?

Q2. What can we learn from the steps that users are taking during the donation flow?

Q3. Are there any areas in the user flow where users become stuck?

methodology

research questions

Research participants completed an unmoderated Usability Study and a System Usability Scale.

Five participants (2 females, 2 males, 1 nonbinary)
30 minutes
Participant selection - behavioural pattern of regularly donating to other animal-related causes (i.e. financial or non-financial donation) and within the target audience.

the users

Paul

Jennifer

Age - 45

Education - Masters

Occupation - Engineer

Problem Statement - Paul is a time-poor professional with two young children. He needs to easily find information online about causes and a streamlined donation flow. He requires information to inform his decision-making process -- i.e. his financial donation is going to the “right” cause and has a high ROI.

Jennifer

Age - 27

Education - Currently in college (studying Animal Welfare)

Occupation - Full-time student

Problem Statement - Jennifer is a full-time student studying animal welfare. She lacks awareness of causes and can't afford to make a financial donation. She, however, is looking for information to identify the "right-fit" cause to make a non-financial donation.

Shaping the site around the users

Information Architecture

The primary focus of the website’s information architecture (IA) was ease of use through a basic / simple design. The architecture was built around the “known” obstacles to donation, as identified in the secondary research.

Included in the IA design are:

Uncomplicated and Streamlined IA
A Non-financial Donation Option – “Other Ways to Give” branch on the IA tree
Awareness Raising and Clear Communication of ROI of donation dollars – through the “About Us”, “Our Impact” and the “News” branches

The two main users of the website - animal companions in need of help and donors - have their own dedicated branches.

paper & digital wireframes - desktop and mobile screens (responsive website) - pre-usability Study

low-fidelity prototypes - pre-usability study

iteration

To improve user experience and usability of the ACSF website, a usability study was conducted on the low-fidelity prototypes. Five participants were provided with use scenarios. Their feedback, thoughts, opinions and behaviour was used to improve usability.

above the fold

prominent positioning

The “Non-financial donation” button / option was placed above the fold instead of below, as users were unable to locate it.

prominent positioning

Although designed to standout in the Low-Fidelity wireframes through colour contrast and proximity principles, users required the “Need Help” and “Donate” buttons to be placed in a more prominent position on the menu (i.e. centrally located).

sequential steps

Although the steps sequence on the financial “Donation” pages was designed to help users, it actually confused them. Users perceived them as buttons / CTA instead of a tool to show progression / a sequence in the journey. Redesign involved moving them off to the right side and changing the shape of the component.

a way to go back

sequential steps

Users became "stuck" and needed a way to go straight back to the main “Donation” page from the donation sub-category pages.

redesign - post-usability study

MOCKUPS & HIGH-FIDELITY PROTOPTYPES

Mockups incorporated user understanding research (empathy), usability study findings, and the Barriers to Donation (from the secondary research).

Barriers to donation and design solutions

1. COMPLICATED USER EXPERIENCE - The design was basic and as streamlined as possible -- minimal text, uncluttered, and significant negative space.

2. ECONOMIC CONCERNS - The main donation flow was divided into financial donations and non-financial donations. It provided users with 8 ways to make a non-financial donation -- to inform and educate users on potential options.

3. LACK OF VALUE - The design provided ways to showcase the value of the cause. "Our Impact", "About Us", and the "News" pages are all available channels to inform users of value.

4. LACK OF CLEAR ROI - As above, the site has a number of channels to educate users on the ROI of donation dollars. In particular, the "Our Impact" page provides quick stats that immediately convey ROI.

5. NOT ENOUGH AWARENESS - As per Barrier 4, one of the design's goals is awareness raising - which is carried out via specific pages. Additionally, an SEO campaign and hyper targeted keywords would ensure high visibility.

Takeaways

Target users shared that the design was simple and uncomplicated, and the “donation flow” was easy to accomplish. The website’s layout and cues guided the user's navigation. This was only possible by incorporating secondary research insights and user research findings into the final design.

NEXT STEPS -

1

2

Conduct additional user research in the form of a Usability Study on the

High Fidelity Prototypes to refine the design further.

2

Present ideas to stakeholders, obtain

feedback, and conduct a redesign to incorporate their feedback.

3

2

3

As it is a responsive website, consider

designs for other common devices.

Case study deck

Animal Companions Support Fund (ACSF) Case Study

Download PDF

Images by Pixabay Community Contributors and Dall-E.