Senior Animals in Need Today Society (SAINTS) is an established non-profit rescue in Mission. SAINTS is a place for senior and special needs animals who have no place else to go. Animals there receive appropriate medical attention, live in a safe and open environment and get to enjoy their remaining years.
Project Background
SAINTS Rescue old website was confusing to navigate, lacked clear organization and no longer served their needs as well as it did originally. Apart from that, the user experience wasn’t optimized to learn about their animals and how to sponsor them.
This is how we helped SAINTS Rescue design and build their new website.
I can’t tell you how much I love the new site. I save so much time moving animals and sponsors around. It’s excellent!
Key Challenges
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.
Outdated design
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.
Lackluster mobile experience
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 content
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.
Unintuitive sponsoring flow
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.
Solution
A portal to learn about animals and encourage sponsorship
SAINTS has a section for their residing animals with images, names and a short description. This was great except it wasn’t clear on how a person could sponsor these animals. Their old sponsor workflow was very disjointed and not streamlined for enhancing donations. Our design goal was to make this sponsor flow easily and speed up the donation process. We created 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.
Organizing content so it is user friendly
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. Overall, it lacked a clear path for their visitors to find what they want, to be able to donate or to contact them. Using a 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.
Managing Hundreds of Animals
One of the key aspects of their website was to provide a directory of their animals with pictures and information that honours them. On their old WordPress site, animals were added to different galleries or sections of the website using various plugins. The data was all over the place and it was a tedious process.
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, an admin can manage an animal’s information through 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 pages.
As a result, animals can be managed through a familiar interface. 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.
Updating the website’s look
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. We worked with their team to understand what their brand was and created a website that reflected that.
To do this we created 3 different style boards showcasing 3 different approaches for them to pick.
Example of a style board proposed
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.
Key results
We are beyond excited about SAINTS initial numbers (30+ days). Still, months to collect more data but we're excited about how the new website will support and help this great cause.
- 3.24% organic donation conversion (1900% increase vs industry benchmark 0.17%)
- 140% average donation increase
- 14.88% donation page conversion
- 3.6% mobile donation conversion. This is great as mobile accounted for 60.1% of traffic vs 31.8% desktop traffic.
From the beginning, I felt that SAINTS concerns were clearly understood and was impressed with the creative but practical solutions proposed
The Project
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.
Outdated design
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.
Technical issues
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.
The Solution
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.
Update logo
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 :)
