Spiritus Christi Prison Outreach:

Redesigning a nonprofit website to increase donations.

 
iMac Pro Front View Mockup.png
 
 

Project Overview:

The objective: Spiritus Christi Prison Outreach is a nonprofit organization that empowers members of the Rochester, New York community to successfully re-enter after release from incarceration. I was familiar with SPCO and its mission, and reached out to see if would be willing to let me do this project on part of their website. Not only were they open to the idea, they will be moving forward with these designs in a complete redesign of the current site.

Our main goals for this project were to:

  • Increase quantity and amount of donations.

  • Improve trustworthiness of the site as a whole.

I was the sole UX/UI designer and the project took 80 hours.

Research

Research Goal: We want to know how to increase donations through the website.

Stakeholder Meeting #1 took place on June 30, 2021. We discussed their hopes for the project and decided that the highest priority goal was to increase donations through the website. A summary of our conversation, in which we highlighted some additional desires for this project:

The current SCPO site does not describe the mission clearly, fails to recognize the amazing work they do, and does not receive many online donations.

  • Client would like to increase online donations.

  • Client would like grant makers and donors to have a spotlight.

  • Would like to add a financial page and find an appropriate location for this page.

  • Interested in switching from Wordpress to Wix.

  • They have a good score on charitynavigator.org. Want to emphasize this information somewhere on the site.

 

Competitive Research

I focused on local competitors within the city, and the client was eager to provide me with a list with which to begin (Salvation Army of Rochester, YWCA of Rochester, and Person Centered Housing Options). Some notable strengths were the homepages that emphasize the mission and company statistics and have a clear donation CTA. I was able to note technical glitches, cluttered navigation, and complicated donation flows, all of which I avoided in my draft designs.

 

User Survey & Interviews

Before I conducted more in-depth user interviews, I created a survey with simple donation-centric questions to get a good feel for the how and why. Because I sent this link out to family and friends (who then passed it along), I was also able to scout for interview participants that fit into my ideal age range of 40 and above. I used the data from this survey to craft my interview script.

Interview participant criteria: individuals who have donated to a non-profit in the past and are interested in criminal justice system reform/ending homelessness. Ideally over age 40.

Over Zoom, I interviewed four individuals who were great matches with my criteria. I was able to deduce some helpful findings from my questions, which focused on the online donation process as well as their reasons for donating specifically to social justice organizations and nonprofits.

I conducted user interviews via Zoom and recorded the sessions.

I conducted user interviews via Zoom and recorded the sessions.

Creating an affinity map with my participants’ answers helped me notice patterns and repetitive answers. It also allowed me to distinguish a variation in responses from users of different age ranges.

All four users mentioned:

  • Wanting to know a CEO’s salary & the company’s overhead.

  • Wanting tax information and a receipt for tax write-offs.

  • Donating because of the financial means to do so.

  • Wanting stories, videos, and/or pictures on the website to help ensure the organization’s trustworthiness.

Three of the four users mentioned:

  • The word “privilege” when talking about donating.

  • Considering signing up for recurring donations.

  • Liking when a donation amount is linked to a tangible result.

Define

Persona Development & Empathy Mapping

My fictional persona, Donna, was based off of both my user interviews as well as my conversations with the client about their donors. I used Donna to create an empathy map and, later, a user flow, in which I highlight the steps she would take to complete a donation to Spiritus Christi Prison Outreach.

 
 

Click images to view in more detail.

User Flow

Broken down into actions and decisions, the user flow follows Donna’s journey in deciding whether to donate to Spiritus Christi Prison Outreach. Part of Donna’s needs are to ensure the validity of the financial structure and make sure they have a good list of supporters.

Sitemap

In one of our check-in meetings, I looked at a sitemap draft I created with the client and we finalized the layout. It was helpful to start the process from the beginning, seeing as the current site is not laid out in a logical manner and the new site will have numerous new pages.

Design

Digital Wireframes

I used the sketches from client meetings to put together a set of digital wireframes. I had proposed the idea of using Donorbox, an affordable donation software for nonprofits that has great UI and will bring some ease to the donation process. Because the client was excited by Donorbox and wants to use it on the new site, I included it in both my wireframes and responsive UI.

 

Branding & UI Kit

SCPO already had finalized logos and brand font but not a color scheme, so I created a basic branding guide for them. They wanted to use some of the colors in their logo and also add some complementary ones.

 

Responsive UI

I enjoyed the process of bringing the wireframes to life with the new brand colors and written company copy. Not only did the UI help to create a cohesive design, but adding descriptions such as donation amounts ($50 provides 7 hot meals) will help the client reach their goal of increasing donations.

Because they were shown in my research to be important, I also made sure to include relevant statistics, diagrams of the re-entry process, and a place for financial information.

Test

Prototype & Usability Testing

Test Objective: To evaluate the site’s effectiveness for a user to navigate the site, learn about financials and supporters, and donate.

Test Goals:

  • Evaluate the process of locating “Our Supporters” page

  • Evaluate the process of locating “Annual Reports & Financials” page

  • Evaluate the donation process

My final prototype on Figma.

Test Methodology
Conducted this research through Maze, which links to my Figma prototype.

Findings:
Overall, 14/15 users completed all three tasks successfully. I used their feedback to prioritize first revisions and make a list for future iterations.


Priority Revision & Conclusion

Several participants mentioned that they would need to know more about covering the processing fee, which was part of mission #3. I added an icon with a hover paragraph, which breaks down the processing fee and platform fee.

All-in-all, the client was pleased with the designs and will be able to use the research to better design content for their donors on future iterations. I think as they continue to grow and add fundraising events to the website, they will need to reassess the layout of the donation page.

Previous
Previous

Venmo: adding a scheduled payment feature.