Williamson County Animal Shelter Case Study

Redesign a Website and Make it Responsive

Client

Williamson County Animal Shelter

Timeline

1 Month

Role

Product Designer

Project Summary

In 2020 I adopted a cat from my local animal shelter. I had difficulty navigating their site, particularly when it came to applying for adoption. It was clear the website needed help with usability and functionality. And, a stylistic refresh couldn’t hurt.

Tools Used

Project Breakdown

Research Woes

I recognize there are people out there that foster and volunteer besides adopting. I wanted to see how people like this interact with a shelter’s website. I also sought input from the people who actually work at the shelter, as well as the people that run their current website. I sought to find out how I could best address their needs and wants.

Challenges, BIG Challenges to Success

The biggest challenge was that I had difficulty reaching volunteers, workers, and other customers for interviews and surveys. After weeks of voicemails, messages, and emails to over twelve workers/volunteers, and several posts on the shelter’s Facebook page with not a single response, I went with interviewing and surveying people that had recently adopted a pet, or had experience using their local animal shelter’s website in any capacity.

I took into account that as a voluntary service, a shelter doesn’t have direct competitors with financial incentives. Rather, it has competitors that can adopt or foster out more animals. Also, there are indirect competitors in friends/family, pet stores, and breeders.

Interviews

I conducted three interviews. I aimed for a low number of interviews because I wanted to use the interviews to hone my questions to use as a survey.

Research Findings

I received a total of ten survey responses. Asked a series of eight questions about content and purpose, it was clear that there are three main stages to adopting an animal online. First, the shelter has to have the reputation to get users to its website. Second, the strong, professional visuals hook the user into browsing. Finally, the smooth user experience gets the user to perform an action. This action can vary, but includes options such as volunteering, donating, foster, and adopting. These three stages are fundamental to any ecommerce page.

I created a journey map to better understand the steps a user takes to adopt an animal. From this, I learned there are some roadblocks along the way that can drive a user towards using a different site and shelter.

The key takeaway I discovered through research was that users are interested in seeing lots of information about the animals, and not much information about anything else. Users want to browse animals and adopt the one that they want without being impeded by anything else. Competitive analysis showed that most other shelter websites have far too much content, regardless of how well it’s structured or organized.

Designing a better adoption experience

I wanted to refresh the entire site visually, cut down the content, make actions more accessible, and eliminate unused content. I began sketching ideas that would maintain a sense of simplicity. I started with a mobile-first design. I also wanted to redesign their logo. I aimed for something playful, cute, and sleek, highlighting the branding of the shelter as well as the simplicity of the new design. I felt that their logo was visually busy and outdated. I landed on an idea that exemplifies both the purpose of the shelter and the branding style that I envisioned for their redesign. The new logo is sleek, but maintains an air of playfulness and cuteness.

UI Elements

I wanted to make the website look clean and uncluttered. Clutter was a common complaint among survey respondents and those interviewed. It was also something noted during the competitive analysis part of secondary research.

Prototyping

I prototyped the low-fi wireframes so users would focus on the tasks rather than being influenced by colors, pictures, or other interface design elements. My first usability test included 25 participants and failed in a variety of ways. This feedback was helpful to me and I implemented the iterations before conducting a second usability test. Some iterations made following the first usability test:

Placed a title above the Main page buttons to indicate they lead to the adoption page
On the donation screen, reconfigured the locations section beneath the money section, add an “Other” section to the locations, and made it where the Donate button doesn’t appear until all information has been input
Replaced Dogs, Cats, Other Animals with an Adopt button on the menu, while retaining the size of the menu, giving more padding space for each option

I conducted a second usability test after making the initial iterations. This time, I applied UI to the wireframes to gather feedback and insights on UI decisions as well. There were 20 participants, and the final usability score was 94. This score, along with quotes from participants and viewing the heat map, revealed the next level of iterations needed to improve the usability and design of the mobile website.

Some iterations made following the second usability test:

Scaled filtered adoption results based on viewport
Balanced the content on several pages
Included affordances on several pages

Conclusion

Ultimately, the goal of an animal shelter is to get as many animals adopted as possible. A website can help reach this goal by making various processes simple for users. Clear navigation and relevant information guides users into making their best choice. The redesign of the Williamson County Animal Shelter’s achieves all this.

In the future, or if I could redo this project, I would have really liked to sit down with the shelter volunteers and workers. I would have had a better understanding of their daily pain points and how a website could address the solutions to those pain points. Unfortunately due to COVID-19, being there in person was not an option.