Redesigning to increase donation inflow for NGO

PROJECT TYPE:

Academic project with non-profit organization

ROLE:

UX designer | UX strategist | UI designer

TEAM

Ana Iganstecsu, Ishan Dutta, Erin Kovach, Gurusha Raskar, and Han Tran.

DURATION:

10 weeks

Select the sections you want to jump to:

ABOUT THE PROJECT

Project Overview

Finley Forever is a nonprofit organization established to support young oncology patients and families undergoing stem cell transplants in the Chicago area.

Over the course of 3 months, my team and I analyzed and redesigned the Finley Forever website to enhance the user experience and increase engagement. After comparing the learning curve and limitations of various web-building platforms, we retained the website’s original domain and created a new website on Wix. We paid close attention to the mobile experience as well.

Finley Bracken

Supporting Finley

Finley and family

Finley Bracken

1/4

ACHIEVEMENTS

Project impact

Higher discoverability of content

Through content restructure and intuitive navigation.

Clear paths to donation

Highlighted various options to give back to the foundation.

The foundation was created in the memory of Finley, a 2-year-old who lost her battle with cancer in 2020. Finley's family started this foundation to pay forward similar compassion and benevolence that their family received. They provide support to pediatric cancer patients and their families in various forms:

They collect and forward donations to help families with pediatric cancer cases pay their bills.

They curate and donate Stem Cell Courage Kits to children getting a stem cell transplant to help smoothen the experience.

They host annual fundraising events like Finley Fest and Lights & Ladders Brigade.

ANALYSIS

Opportunity Areas

After understanding the problems, we transformed the pain points into 'how might we' statements help us prioritize our actionable items.

Barebones appearance and inconsistent structure

How might we bring about consistency in branding and structuring the website to increase engagement?

Confusion about the services offered

How might we enhance the user experience of the donation process to increase donation inflows?

WHAT WE DID

Design Outcome

In 10 weeks, through our research, and analysis, we re-designed and launched the Finley Forever website. This new site has an upgraded user experience that supports the organization's mission and was curated based on the audience's needs so that everything is easily accessible to its audience.

Go to Finley Forever

UNDERSTANDING WEBSITE ISSUES

Reorganizing the Website

After finding the need for change, we conducted a series of tests to reorganize the website. The result of these tests was a reorganized information architecture of the website.

1. Content Inventory:

To understand the content on the existing website and find the gaps, we conducted a content inventory.

Quick insight of findings:

Lack of organization

Some sections and content pieces were repetitive and lacked organization.

No persuasive writing

The writing wasn't encouraging enough for site visitors to take an action. The copy required an update to bring in elements of persuasive writing and encourage users to take action.

Missing CTA

Pages such as the Tax Exempt Donation and Application page, were missing prominent calls-to-action buttons.

Low context

In some sections, there was no supporting text that gave context to users before they clicked on a CTA. The page names in the menu were also vague for new users, such as the Application, Events, and About page.

2. Card sort:

We then transferred the content pages to a card sorting platform to gain insights into user mental models for organizing website content. This exercise served as the first step towards combining, renaming, and restructuring the website content to meet user expectations.

20

Participants

6

25

Cards

UNDERSTANDING THE AUDIENCE

Persona

Community Member

The website must interest, educate, and entice visitors to donate, attend an event, or get involved.

Potential Sponsor

Businesses must learn about sponsorship opportunities and have an easy way to contact the team.

Potential Applicant

Potential applicants need to review eligibility guidelines to determine how to request support.

Potential Volunteer

The organization must show users the difference that they can make and be easy to learn and apply to volunteer.

Medical Professional

Medical professionals must easily understand how to refer their patients for assistance.

Each persona has unique interests and needs different information from the website.

RESTRUCTURING

Redesigned Site Map

The new site map makes it easy to access all important content through top global and local navigation. This structural change helped us declutter the page and highlight the most important sections.

EARLY ACHIEVEMENTS

Wireframing and Branding

Wireframes

To validate our ideas, we utilized wireframes as a prototyping tool to visualize the layout and functionality of our platform before moving our designs to the web-building tool.

Logo

This logo tells the heartfelt story of the foundation's history and cause. The gold ribbon symbolizes advocacy for pediatric cancer and serves as a reminder of the day Finley took her last breath. In the corner, the inclusion of 4 handprints pays tribute to Finley's memory, representing her and her three sisters.

Design direction & brand voice

Montserrat and Avenir are the two most used typographical families. The combination of the typography and colors conveys an energetic, meaningful, and caring ambiance, reflecting the essence of our brand.

USERS THOUGHTS

Usability Testing

After making the prototypes on Figma, we conducted a Chalkmark test on Optimal Sort to test if participants perceived the content the way we wanted them to. We built a study with 9 of the important actions that a user might take when interacting with the website.

37

Mean age

7

Participants

77.7%

Avg success rate

Participants were confused as to what Courage Kits were, and went to the donation button to contribute instead of the webpage.

Participants felt that there was no clear action they could take to apply or check their eligibility quickly.

To address this, we renamed the program from Courage Kits to Stem Cell Courage Kits and created

an improved Donation Landing page to showcase these additional options for donating and alleviating user confusion.

To address these issues, we clarified that only medical professionals can refer individuals, so the page is solely for eligibility verification.

SOLUTION

Key Highlights

Homepage

Homepage and navigational elements highlighting information about the organization

Improved navigation

#490A7B

#F2BE12

#BFBFBF

Primary color palette

Improvements in the global and internal navigation on all pages meant that users can now easily access all services offered by the organization

Clean & minimal design

A lot of white space is used to maintain a clean and consistent design on all pages.

A donation page hub that houses all the foundation’s donation methods on one page.

The use of persuasive writing also motivates a user to explore options.

Donation page

Donation page with multiple options to contribute

Get involved page

This page provides details on how interested users can get involved with the foundation by making a monetary donation, attending an event, signing up for volunteering, sponsoring an event or donating to the Stem Cell Courage Kit

Introduced an anchor link section at the top and a floating “back to top” button for easy navigation
Added call-to-action buttons to every section

ADDITIONAL

Other Considerations

Search Engine Optimization

Accurate URL descriptions

To help users identify what page they are on, we ensured the URL of each page was accurately describing the page

Mobile optimization

For users to get similar experiences on both, desktop and mobile, we ensured the website was adaptive and optimized for mobiles.

Meta Tags

We added title tags and meta descriptions for each page. These tags accurately describe the content on each page and help with the SEO search crawl

Accessibility

Alt text

Alternate text was added for all pictures on the website, to help describe what is happening in the picture. Alt text helps both visually impaired users and SEO.

Color contrast ratio

The color contrast ratio for all descriptive text and interactive elements on all pages is above 4.5:1

Heading structures

We ensured to assign the correct heading levels to all headings to make the website accessible.

REFLECTING

Key Takeaways

My involvement in the Finley Forever Foundation project was profoundly fulfilling. Participating in co-creation sessions with my teammates, learning to work within timelines, and navigating limitations were all the activities I enjoyed during this process. It was a rewarding experience that broadened my horizons and allowed me to learn while working with a client on a real project with passion and enthusiasm.

01.

Balancing expectations

Defining the project scope presented its challenges, but we successfully set realistic goals and exceeded them.

02.

Adapting to change

We had to understand the current platform limitations and consider the website’s evolving needs while pivoting to create a seamless experience.

03.

Testing is key

Early testing validated our design decisions, uncovered usability issues, and ultimately improved the usability of the website.