Animal Rescue Tracy UX Redesign
Throughout this case study, I’ll walk through my UX design process—from identifying pain points through heuristic evaluation and user perspective, to wireframing, prototyping, and visual design decisions. The focus is on creating a smoother, more intuitive experience for users who want to adopt, donate, or get involved, while also ensuring the website reflects the organization's compassion and trustworthiness.
This project serves not only as a redesign exercise, but it doubles as a demonstration of how thoughtful design can uplift a cause. By the end of this case study, you'll see how improved user experience and accessible design can make a real difference in how an organization connects with the people who support its mission.
Introduction
This case study explores the website of Animal Rescue of Tracy, a local non-profit dedicated to rescuing and rehoming animals in need. While their mission is both heartfelt and impactful, unfortunately, their current digital presence lacks the clarity, accessibility, and visual consistency needed to connect with potential adopters, donors, and volunteers effectively.
As someone who is passionate about user experience and design, I saw an opportunity to reimagine their website to better reflect their mission and serve their community.
Initial Research
To better understand the existing challenges with the Animal Rescue of Tracy website, I approached the research phase from both a user-centered and heuristic perspective. I explored the site as a first-time visitor looking to adopt, donate, and volunteer—three of the most common goals for this type of nonprofit audience. Through this lens, I identified key friction points in navigation, content clarity, and overall usability.
In addition to my own experience, I conducted informal user testing with a small group of peers to gather fresh impressions. Most users noted that the site felt outdated, cluttered, and at times overwhelming. Several struggled to locate important information like adoption applications, available animals, and contact details. These findings confirmed that the user journey lacked intuitive flow and clear visual hierarchy, both crucial for engagement and trust-building.
I also performed a brief competitive analysis by reviewing the websites of other animal rescue organizations. Sites that performed well typically featured clean layouts, emotionally resonant imagery, and simplified navigation. This helped inform the design direction and usability benchmarks I wanted to aim for in the redesign of Animal Rescue of Tracy’s platform.
Pictured above: an outdated landing page navigation, and a troublesome grid application with no concise direction
Pain Points
To better understand the existing challenges with the Animal Rescue of Tracy website, I approached the research phase from both a user-centered and heuristic perspective. I explored the site as a first-time visitor looking to adopt, donate, and volunteer—three of the most common goals for this type of nonprofit audience. Through this lens, I identified key friction points in navigation, content clarity, and overall usability.
In addition to my own experience, I conducted informal user testing with a small group of peers to gather fresh impressions. Most users noted that the site felt outdated, cluttered, and at times overwhelming. Several struggled to locate important information like adoption applications, available animals, and contact details. These findings confirmed that the user journey lacked intuitive flow and clear visual hierarchy, both crucial for engagement and trust-building.
I also performed a brief competitive analysis by reviewing the websites of other animal rescue organizations. Sites that performed well typically featured clean layouts, emotionally resonant imagery, and simplified navigation. This helped inform the design direction and usability benchmarks I wanted to aim for in the redesign of Animal Rescue of Tracy’s platform.
A stretched interface leads to information-packed pages that poorly communicate the intended message, as well as strange distortions to the text.
Project Goals
With clear pain points identified, I set out specific goals to guide this redesign. The primary objective was to design a digital experience that more accurately reflects the compassion and mission of Animal Rescue of Tracy, while also addressing usability gaps that could hinder potential adopters, donors, and volunteers.
First, I aimed to learn more and research the cause and competition thoroughly to understand best practices within the animal rescue space. This included examining how other successful rescue organizations design for trust, ease of use, and emotional connection.
Second, I wanted to gain insight into the original creator’s goals for the website, ensuring that my redesign honored the heart of their mission and the unique needs of the organization’s community.
Ultimately, my primary goal was to create an enhanced, user-centric version of the site—one that clearly highlights adoption opportunities, streamlines the donation process, and encourages visitors to get involved. By bringing thoughtful structure, clear navigation, and updated visuals, I aimed to help Animal Rescue of Tracy better serve both their animals and the people who care about them.
Research the cause and competition
Gain insight into the original creator’s goals
Create an improved, user-focused version of the site
1st Phase - Ideation
Given that the website lacked a logo and therefore a personal identity, my first order of operation was to create a sentimental and modern logo that would be used as the main icon for the organization.
As I researched design elements to be used for the logo, I stumbled upon things such as bones, balls of yarn, treats, hearts, and pets as main components of the logo. These icons can be used to easily distinguish the website's purpose, while also suggesting a friendly and welcoming atmosphere to the website’s overall ambiance.
After exploring and finalizing the logo, I began to lay out some layouts for the website’s general design. The concept is a modern and clean website that communicates information about pet adoptions at the animal rescue, as well as points users in several helpful directions, including volunteering and event info.
By utilizing tools in Figma, I created a landing page for the website, titled “ART - Landing Page.” Keeping the boards named allows me to recall certain pages without analyzing their layouts, and will be useful during mid-to-high fidelity mockups that require intricate wireframing and sorting.
Above: screenshot of Animal Rescue Tracy low-fidelity prototype in Figma.
Below: logo for Animal Rescue Tracy
2nd Phase - Building
I began by selecting the strongest layout ideas from my ideation phase and refining them into clear wireframes for the website’s key pages — including the homepage, adoptable pets page, and contact page. From there, I developed high-fidelity mockups that incorporated the new logo, chosen color palette, and typography to align with the Animal Rescue of Tracy’s welcoming and trustworthy brand identity.
Once the high-fidelity screens were complete, I linked them together in an interactive prototype. This clickable version of the website allowed users to navigate core flows, such as browsing adoptable animals, submitting an adoption application, and contacting the rescue.
To ensure the design was intuitive and user-friendly, I conducted usability tests with a small group of participants. Furthermore, I asked each user to complete common tasks — like finding a specific type of pet, contacting the rescue, or exploring the donation process. I paid close attention to any confusion or friction points they encountered.
Feedback from these sessions highlighted several areas for improvement, such as simplifying navigation labels and improving the visibility of important calls to action. Based on these insights, I iterated on the design, adjusting layouts and interactions to better support user needs.
