Senior Animals in Need Today Society (SAINTS) is an established non-profit rescue, in Mission, British Columbia, that provides care and sanctuary for senior and special needs animals who are considered ‘edge cases’ and who would not do well in a traditional animal shelter setting.
SAINTS is a place for senior and special needs animals who have no place else to go. Animals in there receive appropriate medical attention, live in a safe and open environment and get to enjoy their remaining years. Unlike other shelters who focus on adoptions, most of SAINTS’ animals come to stay and be looked after. They provide foster care where animals live together with no separation and very few cages. They can roam around freely like their home. The staff refer to it more as a sanctuary rather than a shelter.
We first heard about SAINTS Rescue and its web project through a call for RFPs. After reading their detailed RFP, we analyzed their website, saw opportunities for making big improvements and thought we could help them meet their needs. We submitted a proposal outlining our approach and how we could help them.
From their RFP we learned that the main goal of the project was to update the website to reflect SAINTS Rescue’s brand and share their message and story.
The new website’s purpose was:
- To highlight the work SAINTS Rescue does and the importance of their Mission, Vision and future goals.
- To drive donations through one-time, recurring, and animal sponsorship.
- To provide a directory of their current and past animals with pictures and information that honours them and their time with them.
- To inform and educate, engage their fan/donor base and position their charity as a leader in rescue.
When first reading the proposal, we understood the main problems were site organization and outdated design. But as we talked with SAINTS more and asked more questions we learned a lot more about existing issues with their current website and workarounds to keep it running. Volunteers were spending extra time just to do basic updates leading to frustration and keeping them from other more important tasks.
Through our initial discovery meeting and ongoing discussions, we were able to diagnose the following issues with the current website.
Confusing navigation and lack of clear organization
Navigation of the site had become clunky and was not intuitive. Different people had added sections over time so there were a lot of pages. Even employees and volunteers in their own organization had a hard time navigating the site. Overall, it lacked a clear path for their visitors to follow to find what they want, to be able to donate or to contact them.
Their current website was 6 years old and no longer served their needs as well as it did originally. The design didn’t reflect their more established brand any longer.
An outdated design can really hurt an organization. Donors might be more reluctant to donate because of usability issues, trust issues due to a less professional/older looking site and because it doesn’t showcase their mission well enough. It can also be hard for someone to decide what organization and cause to donate to so ones that make it easier for users to digest their site the more likely they are to donate. The content is important, but all things being equal a person will be more inclined to donate to a nicer looking website.
Mobile experience was not great
According to M + R Benchmarks, the majority of non-profit website traffic came from users on mobile and tablet devices. Mobile accounted for 50% of all traffic, tablets for 9%, and desktop users made up 41% of traffic. Yet — SAINTS mobile experience was not great. The design on mobile wasn’t responsive enough making some of the components look squished. Like other non-profits, SAINTS Rescue website wasn’t optimized for mobile leaving a large portion of their audience underserved.
Hard to manage animals
One of the key aspects of their website is to provide a directory of their animals with pictures and information that honours them and their time with them, as well as in-memory when they pass.
When we started working with SAINTS we learned they had a dedicated volunteer who did all of the animal updates to their animal galleries. Their current method didn’t allow them to make edits on mobile which was the volunteer’s preferred way of accessing the site since she didn’t have a computer at home. Furthermore, animals resided across multiple galleries and had lots of duplicate entries making the entire process tedious. The Wordpress plugin they were using didn’t allow them to enter a lot more information about each animal either.
Donation + sponsoring flow not intuitive
As discussed above, SAINTS has a section for their residing animals with images and names and a short description. This was great except for displaying their animals, but there was no really easy way or call to action for a person to donate to help these animals.
The whole sponsoring flow felt very disjointed. A user had to navigate away from the animal and its story to land on the sponsor page. Then the user needed to find the animal again in a dropdown list and start the donation process.
Even though their team was more than capable of updating Wordpress plugins, there were many outdated plugins that were no longer supported. In total, they had over 40+ plugins installed. They had also run into numerous SSL issues, and various other quirks and bugs that randomly made themselves known without leaving them much of a clue to find out how or why they’ve come about.
The site had a lot of old pages still being indexed with outdated and missing content. Data was spread across multiple plugins and many redundant pages were created at random. They also had different SEO issues.
Learn and brainstorm
Our project plan began with a discovery session. The idea of the session was to take a step back, bring the entire web team together and other key stakeholders together and review and agree in the direction of the project. The goal was to have a clear focus on the goals of the projects.
We defined the starting point and discussed what the end the project might look like (long term goal).
Items we reviewed and discussed include:
- Why are we doing this project? Where do we want to be in 6 months, 1 year or 5 years?
- Get a general consensus on what your organization does
- Discuss what the website would look like in 2 years if there were no problems?
- Discuss possible risks, list assumptions and rephrase as design questions to help us come up with better solutions.
- Who are the users of the site? Who would you like the people to be that are using the site?
We also created a visitor map to explore the different ways your organization interacts with the different target users. We will also analyze where the most problems occur in the flow.
Our first step was to better understand what their donor’s path looked like. We learned about their success using Facebook and email campaigns. So our goal was to figure out how to leverage these to increase website traffic and conversions. Also, how could we grow their email list.
During this meeting, we learned about previous website projects and what went well and what didn’t. We learned about what their vision for their site was and key things they wanted to showcase like highlighting some of their founder’s blog articles.
Their audiences as we discovered were composed of three major groups:
- Donors — They receive different types of donations — one time, recurring, animal sponsorship, or corporate sponsorship. Their donor base is largely female, age ranging from 30 to 70+.
- Supporters — Supporters are ‘other’ than donors. eg — people who adopt/foster, people come to our website to learn about our organization and/or look at pictures and read about their animals, and to enjoy their blog posts. These are people who love animals and learning about SAINTS. They help us to spread the word about our charity and our work through referrals to our website and social media channels.
- Non-profit professionals and government agency representatives — As a non-profit organization, they comply with government regulations. They felt it was important to provide relevant non-profit documentation as well as information about our Board of Directors, in a transparent way that is easily accessible via their website.
Fix information architecture and navigation
One of the problems with the current website was that it was hard to navigate and not intuitive. Overall, it lacked a clear path for visitors to accomplish whatever goal they were trying to accomplish.
Our plan was to tackle this first. Using the previously developed user map as a reference, we looked at the different pages available and designed a simpler flow. With this in hand, we used card sorting to quickly and easily design the website’s architecture and navigation paths. We used card sorting to find out how people think the content should be organized and got the user insights to make informed decisions.
Find a style through mood boards
Another issue with the current Saints website was that it didn’t reflect the SAINTS Rescue brand any longer. We worked with their team to understand what their brand was and created a website that reflected that.
To do this — we asked them to review 3 competitors/similar websites. Then we ask them to review any other 3 websites that they liked. Through this exercise, they could communicate with us the style they had in mind, what they like/dislike, tone, features etc.
Based on all this information, we created 3 different style boards showcasing 3 different approaches for them to pick.
The SAINTS team was very fond of their logo but it didn’t quite work within the envisioned website. The old logo didn’t look good unless it was really big because the name of the organization under the logo was very small and hard to read. As a result, we tweaked the logo ever so slightly so that it was legible on a website.
Wireframes and mockups
In parallel with the mood boards, we started organizing content into wireframes. This way they could see exactly how content might be laid out and start thinking about what content could live there. Having the site organized like this made it much easier for them to wrap their head around rewriting their content.
Following their approval of the wireframes, we started moving their wireframes to high fidelity mockups so they could see what the end result would look like.
Manage animals better
On the WordPress site, animals were added to different galleries or sections of the website using various plugins. Depending on whether the animal was residing, had been adopted or had passed away they had to copy animals across different lists and disable them in other places. The data was all over the place!
Since the beginning of the project, we knew we wanted to give SAINTS one centralized place to manage all their animals. Regardless of their status — residing, adopted, passed away — an admin could manage an animal’s information from an easy to use dashboard.
To do this, we used Craft CMS because it allowed us to use its built-in features to create custom data pages all within the native CMS. As a result, animals can be managed through an interface that resembles the one’s admin users to manage page or blog content. This familiarity was important to us as it makes the learning curve smaller. Now, SAINTS Rescue has a directory where they can add each of their animals, along with select photos and videos and descriptions that they can easily update.
Improve donation and sponsor workflow
Their old donation workflow was very disjointed and not streamlined for enhancing donations. For example, even though you could sponsor an animal, there was no connection between the animal page and the sponsor page.
Our plan was to organize a workflow that facilitated and sped up the donation process. Our solution was to create animal profile pages where each animal could be properly honoured. Within these pages, visitors could learn about the animal’s story, view its images, related articles, share on social and of course sponsor the animal.
Custom donation form and stripe integration
In the old site, SAINTS Rescue received donations by sending users to Paypal and CanadaHelps forms outside their site. There weren’t many problems CanadaHelps as they handled receipts for them and recurring donations. The only downside was that the fee charged was close to 4%. Paypal, on the other hand, was a less optimal experience since it wasn’t branded. For admins, PayPal does not issue tax receipts so every year the staff needs to go through all donations and send tax receipts.
Enter Stripe. We had worked with Stripe in the past and have always liked how developer-friendly it was. By leveraging Stripe, we were able to securely take donations without having to worry about security issues. Stripe also did most of the heavy lifting for sending receipts and making recurring donations. Using the Stripe API we integrated it to the site so donors can manage their ongoing donations and download their tax receipts. On the admin side, staff can view a list of donations as they are received without having to log into their Stripe dashboard.
Because we were already using the Stripe API we leveraged this work to show donors automatically on the website. In the past, SAINTS had to enter donor information in order to make it appear on the website. Now — they only need to enable the donors with a click of a button so they are displayed on their website.
The icing on the cake was being able to get the Stripe non-profit discount of 2.3%. Depending on how many donations you collect every year saving 1.7% can be huge savings — especially since setting this up is not a huge amount of development work.
Migrating content away from WordPress
One of SAINTS hesitations for moving away from their current content management system (Wordpress) was losing some of their content. Their blog articles are an essential part of SAINTS’ voice as they are written by their founder, and they wanted to make sure they’re always available for people to read. And it’s a fair hesitation. After all, they’ve spent years creating this content, building a brand and SEO ‘link juice’ and losing it all would have been a shame.
When we started working with SAINTS Rescue we understood moving the important data was key to having a successful redesign. So one of the first things we did was ensure this process went smoothly. Using two different plugins — one in Wordpress and another in Craft CMS, we were able to migrate all their animals, comments and blog posts. We even kept the same URL structure so there wouldn’t be any missing pages and risk being penalized by Google.
It wasn’t a super straightforward task as data was spread across different plugins but with some data manipulation on our side, we were able to do it :)