Role
Research
Information Architecture
UX Design
UI Design
Timeline
April 2024 - Sept. 2024
Tools
Figma
Optimal Workshop
INTRODUCTION
The Challenge
The Chico Animal Shelter plays a vital role in the community, providing essential services and information that promote the health, safety, and welfare of both people and animals.
However, their outdated website was failing to effectively serve users.
My primary goal was to redesign the site into a welcoming and engaging space where access to services and content is seamless and intuitive.
The Solution
The redesigned website now includes:
⭐️ An improved information architecture that makes it easier for users to navigate the site and quickly find the content they need.
⭐️ A fresh and consistent design that reflects the value the shelter brings to the community, establishing a brand presence and creating an inviting and engaging user experience.
⭐️ Purpose-driven content that is focused on user needs, offering relevant and actionable information.
Before - Homepage
After - Homepage
RESEARCH
The Struggles of Animal Shelters
Despite their importance, animal shelters face significant obstacles that impact the quality of care and services they provide. By understanding the challenges, I focused on how the redesign could also address the business needs of the shelter.
At Capacity
Overcrowding due to pet abandonment and irresponsible breeding, strains the shelter’s ability to provide quality care; making it harder to find adoptive homes.
💡 How can I promote responsible pet ownership and prevent shelter intake?
Staffing Shortage
💡 How can I expand volunteer engagement and promote community-driven support?
Budget Constraints
With funding largely dependent on private donations, shelters face cash flow issues that affect everything from staffing to basic supplies.
💡 How can the website raise awareness and communicate the shelter's needs to boost financial support?
To answer these questions, I first needed to understand the users—their needs, frustrations, and motivations.
Learning from the Users
Surveys and User Archetypes
Given the shelter's heavy reliance on its community of adopters, donors, and volunteers, it was crucial to dive into their perspectives. I began by conducting a series of online surveys aimed at these key user groups, gathering insights that would help shape a solution tailored to their specific challenges and needs.
Archetypes of the shelter’s main user groups that focus on paint points, needs, and behaviors. These were informed by findings from surveys and usability studies.
With a clear understanding of the users, the next step was to assess how well the existing site met their needs.
Uncovering Usability Issues
Baseline Usability Testing
To uncover the issues affecting the current website, I conducted remote usability testing with 5 users. This revealed 4 major problems that became the primary focus of the redesign. These problems surfaced consistently across all user types, hindering their ability to easily find the information they needed, taking meaningful action, and creating a disconnect between the shelter and its online presence.
Poor Navigation
“If I click on the menu button, I just want to close it because of all the menu options. It's just a huge cluster of information.”
Contributing factors:
• Navigation is hidden behind a hamburger icon, making it harder to access.
• A bloated menu with no logical structure or hierarchy that overwhelm users.
Content-heavy
“There is too much for my eyes to see and too little of what I actually want to see.”
Contributing factors:
• Repetitive and irrelevant content that makes it difficult for users to find what they actually need.
• An overwhelming number of links makes it difficult for users to determine which are relevant to their needs, causing them to miss important actions or feel unsure of how to proceed.
Disrupting External Links
“It took me to a page that I don’t even trust, that’s already a no.”
Contributing factors:
• Redirecting users to external pages for critical actions, like donating, creates a sense of distrust and reduces the feeling of security.
• Links that redirect to external sites without warning leave users feeling disoriented.
Lacks Aesthetic Appeal
“The homepage looks bland, it makes me not want to stay here any longer than I have to be.”
Contributing factors:
• Inconsistent design elements—such as varying colors, buttons, and fonts—create a disjointed experience, making the site feel unprofessional and incohesive.
• A lack of visual hierarchy overwhelms users, making it difficult to know where to focus their attention or find what they’re looking for.
DESIGN
Decluttering the Website
Content Inventory and Audit
Conducting a content inventory and audit was the first step in understanding how much content there was and assessing its quality and value against user needs and business objectives. This helped identify what content needed to be removed, updated, and added to align with the goals of the users and the business.
The content inventory and audit were recorded in a spreadsheet, capturing details like page title, topics, content type, and redundancy. Each page was evaluated using Atlassian’s scoring criteria, based on Nielsen’s Usability Heuristics. A likert scale was then used to assign a quality score and determine the page’s status.
Getting Users Unlost
Baseline Tree Testing
To understand what wasn’t working in the current navigation, I mapped it into a tree structure using the content inventory. I then tested the tree with 8 participants, guiding them through realistic tasks. This initial test also served as a benchmark, providing a clear point of comparison to measure improvements after testing the redesigned navigation.
The current navigation performed poorly in the tree test.
Overall Success
53%
This is the percentage of participants who selected the correct destination regardless of their path
Overall Directness
47%
This is the percentage of participants that navigated to the correct destination via the correct path
These issues primarily stemmed from the following factors, which conflicted with user mental models:
• Labels were vague and misleading.
• The absence of categories and subcategories in the menu made it difficult for users to find items.
To resolve this, I conducted a card sorting session to uncover how users intuitively group and label the content.
Card Sorting
I conducted an unmoderated card sort with 11 participants using 40 cards that represented the updated website content from the audit. The goal was to understand how users group and label content, which would inform a new navigation based on their mental models. Additionally, I sought to learn what topics users expect to find on the homepage of an animal shelter website, which was gathered through a post-study questionnaire.
The resulting similarity matrix highlighted which items were frequently paired together, revealing potential content groupings.
Key Insights:
• I expected most participants to group fostering and volunteering together, but I was surprised to find that nearly half associated fostering with adoption instead.
• Animal control was often linked to more unpleasant topics, such as rabies, bite reports, wildlife, and laws/ordinances.
• It’s important for users to find key topics like adoption, donations, events, and services offered on the homepage.
Tree Testing
The card sort inspired ideas for a new structure. I drafted 3 tree variations and tested the one I found most promising.
The new tree significantly outperformed the old navigation, with only minor adjustments needed.
Overall Success
90%
This is the percentage of participants who selected the correct destination regardless of their path
Overall Directness
62%
This is the percentage of participants that navigated to the correct destination via the correct path
A spreadsheet was used to draft the tree and outline tasks for the tree test. After testing, the findings were added and color-coded based on performance, along with proposed solutions for areas that needed revision.
Navigation, Reimagined
Sitemap
Once the changes from the tree test were applied, the new navigation was finalized.
The sitemap visually represents the website's content, its organization, and the relationships between different pages.
From Paper to Pixel
Sketches
I limited my scope to designing the key screens for the target audiences.
Early sketches concentrated on page content and layout.
TESTING & ITERATION
Validating the Design
Wireframes and Usability Testing
Wireframe designs were iterated based on a round of usability testing, conducted remotely with 5 users and using the same tasks from the baseline test. This helped improve design choices, visual hierarchy, and determine if the content met users’ expectations.
I synthesized the feedback from the first round of usability testing in a spreadsheet, outlining the issues, identifying which participants were affected, proposing solutions, and prioritizing them for the next iteration.
Key Insights:
• CTAs were being overlooked, highlighting the need for clearer and more identifiable actions.
• Content needed to be further streamlined to enhance conciseness and scannability.
• Participants often believed they had reached the bottom of the page, despite more content remaining, indicating a need for clearer visual separation between sections.
• Participants wanted a more personalized adoption experience that fosters a connection with the pet and better prepares them for adoption.
In this iteration, the content hierarchy shifted and content was streamlined to improve discoverability. New content was added to more effectively support user needs.
Establishing a Brand
Style Guide
The style guide was developed alongside the wireframe iteration. My goal was to create a welcoming, community-oriented feel that reflected the shelter's values. To establish a connection with the city, I drew inspiration from the city's existing website for the color scheme.
High Fidelity Designs
PROJECT REFLECTION
What's Next?
My next step would be to conduct a second round of user testing with the high-fidelity wireframes to validate the changes from the first round and assess how well the design performs with the implemented styling.
Learning Outcomes
My biggest insight from this project was understanding that there’s often more than one “right” solution. To decide on the best course of action, I had to factor in my objectives, timeline, and budget. Being adaptable and carefully considering the trade-offs of each option is key to making the most effective decision within those constraints.
You've reached the end…
How about another story?
