Contra Costa Humane Society
Contra Costa Humane Society is a private,
nonprofit 501(c)3 organization that depends on private and corporate donations as well as grants. They are not related to any other humane society, rescue group, county shelter, or government agency.
​
Our objective was to discover friction points, research users' attitudes toward the site, and make improvements.
​
Roles: User Researcher, Content Designer
Problem
The shelter does not receive government funding but instead depends heavily on volunteers to run both the shelter and office. However,
they face challenges with volunteers:
-
Underprepared staff
-
Small staff sizes
-
Insufficient volunteer training
-
High turnover rates
Goal
The shelter needs animal adoptions to prosper and the volunteer retention rate to improve.
​
The website should improve the adoption process while also requiring little maintenance, resulting in an easy application process for applicants and less work for volunteers.
Opportunities
The website is a marketing tool to attract potential volunteers, donators, and adopters. Its content
should be up to date but written in a style that sounds timeless, so volunteers don't need to update the website consistently.
Tools & Methods
Design: Figma, Miro, Sketching, Wireframes, Prototyping
Research: Semi-structured interviews, Usability testing, Heuristic analysis
How Did We Get Here?
Define
Understand the shelter's needs and services and review the website's current situation
My team and I contacted the shelter to speak to their staff and learn more about the Contra Costa Humane Society. However, one of our limitations included restricted access; no one answered or returned our calls. To mitigate this issue, my team and I decided to study the website and gain insight that way.
We learned the following:
-
The have a variety of volunteer options and programs, showcasing their dependency on volunteers
-
In 2020, their adoptions were their primary source of income
-
They have community-based resources such as local veterinarians
-
They have community-based resources such as local veterinarians
-
They offer educational resources
We Defined Their Values to Frame Our Approach
01.
Volunteers
There are many ways to volunteer, whether it's fostering, office work, cleaning, or supporting donation drives. Their dependence on volunteers to help the shelter run is shown through the many outlets offered through the site.
02.
Adoption
Adoption is the main purpose behind a shelter, so I knew this was a high-priority value. However, I knew that they cared about their animals because they offered playful biographies of each animal, doing their best to show the personalities through language.
​
03.
Donations
They provide many options for people to donate, including cars, food, Amazon wishlists, and money. The different options showcase their need for support.
Using Values to Guide Focus Areas
Participants
We needed to determine what areas of the website needed improvement in tandem with the values we identified. Our goal was to also determine which areas of the website may cause user friction to inform our research questions, tasks, and goals.
My team and I decided to conduct a heuristic analysis. We found that white space, invalid and repetitive links, and
repetition inhibits the experience.
Research
Users had difficulties understanding the navigation bar and were confused by the descriptions
Now that we identified key values and issues, we wanted to learn how users understood the content.
Did these values translate to the experience? Are they attracting potential adopters?
It's important to remember that the shelter depends heavily on adoption. This means that any confusing or distracting language
can discourage the user, thus affecting the income the shelter receives.
My team and I decided to conduct usability testing and semistructured interviews because we wanted observe where users
clicked based on descriptions and hear how they felt about their experience.
We created tasks based on the values we identified during our define stage. They include the following:
-
Find a pet you would like to adopt and follow the adoption process
-
Find the nearest veterinary and hospital
-
Locate how to volunteer for local shelters
Findings and Observations
During one of my sessions, my participant stopped thinking aloud and
paused when she came to a certain point in the application process.
She turned to me and asked,
"Which animals am I interested in? Like... cats and dogs and stuff? Or the name of my selection?"
Example from application
Overall, my team and I discovered the following:
-
Participants could not find the contact bar
-
Participants mentioned the lack of personality on the website
-
Participants agreed that the site contained helpful information, but one specifically said they would not use the website to adopt and felt that it was more of a resource hub than just an adoption site
-
Too many options in the navigation bar caused participants to be unsure of where they should click
5/6
Participants said they would not adopt from the shelter
Content Design
Defining brand voice, clarifying information hierarchy, and updating the homepage
Identifying Brand Voice
Before
Before rewriting the content, I wanted to identify what voice the shelter used to interact with the user. By studying different areas of the site, I decided that the shelter aimed to be playful and helpful.
Examples of the touch points I reviewed:
Witty and attempts to be playful but puts blame on
users for landing on error page
Personifies animals and speaks to users as them
Unclear request in an application process
After
I decided that playfulness and helpfulness were core to the identity based on the values my team and I discovered early on in the process, but I added informative to the list. Additionally, I felt it was important to identify the style so that touch points changed based on what information the user was interacting with.
Style included personable, respectful, and humble. Below are a few examples:
Text is playful but apologetic and makes an effort to guide visitors to pages that might address issues
"Who" implies that visitors should specify which animal
by name and maintains theme of personification, while
"Adopt" engages visitor through action
Reorganizing the Navigation Bar
A key touchpoint that confused users was the navigation bar. There was repetitive information and many ways to get to one page.
Before
-
All capitalized options cause lack of hierarchy
-
Long titles mislead visitors into thinking there are multiple
options -
Inconsistent and redundant labeling
-
Vague titles
After
-
Consolidated options based on relevancy while ensuring all previous options were available Pet Care Resources
-
Relabeled options
-
Established visual hierarchy
-
Removed options that were repetitive
Updating the Homepage
Typos and duplicate content permeate the website, so I made edits to address these issues.
Before
-
Typo
-
No additional context to explain how visitors can connect or support
-
Title does not accurately identify the content
-
Title is repeated and the first word is not capitalized
After
-
Fixed punctuation error
-
Used specific language
-
Updated title to reflect content
-
Consolidated section and removed unnecessary preposition
Retrospective
More Research and Design Artifacts
While we discovered most of our participants said they wouldn't adopt from the shelter, one thing we needed to understand better is why they wouldn't.
​
To address this question, we could have done surveys to get quantitative data about peoples' attitude toward adopting from the shelter.
​
Additionally, I would have sought participants who had previously adopted from shelters. While my team and I made sure to interview people with pets, most of the participants did NOT adopt from a shelter. Thus, there may be pre-existing biases that affected their outlook on shelter adoption.
​
Creating and refining user personas would have helped us refine our design objectives.