Website Redesign

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.

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.

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.