Dog Rescue Website Redesign
How my team and I redesigned the website for The Animal Pad a volunteer run dog rescue in San Diego. Our goal was to redesign their website to make it easier for people to foster, adopt, and donate.
Tools
Figma
Figma Slides
Fig Jam
Notion
My Role
UI/UX Designer
Project Manager
3 Person Team
Scope
This project involved redesigning The Animal Pad’s existing website to deliver a more modern and visually engaging user experience. The work focused on improving site navigation, enhancing content presentation, and optimizing usability across devices. The goal was to create a refreshed platform that better supports the rescue’s mission, community, and adoption workflows.
Timeline (3 Weeks)
Week 1: Interviews, surveys, and research synthesis
Week 2: Feature prioritization, low and mid fidelity prototypes, usability testing
Week 3: High fidelity prototype, final testing, documentation, and presentation
Deliverables
• User research findings
• Problem statements and hypotheses
• User flows and journey maps
• Clickable prototype
• Usability testing results
• Personas and scenarios
• High fidelity Wireframes
• Additional design artifacts
CHALLENGE
The Animal Pad’s website needed a modern redesign that made it easier for people to foster, adopt, and donate. Users were motivated to help, but the site’s outdated layout, unclear navigation, and scattered information created barriers that affected the rescue’s mission and user engagement.
THE SOLUTION
We redesigned The Animal Pad website with a clearer navigation structure, improved content presentation, and a modern, trustworthy visual design. By simplifying pathways for fostering, adopting, and donating, we created a streamlined experience that helps users take action quickly and confidently across all devices.
PROBLEM STATEMENT
Users who want to foster, adopt, or donate struggle to complete their goals because key information is difficult to find, navigation is confusing, and the overall experience does not build trust. These usability issues prevent motivated users from taking action and limit The Animal Pad’s ability to support more dogs.
Design Process
Our team used the double diamond design process to finish this project.
Research 🔎
Heuristic Evaluation of current site
2 Stakeholder Interviews
6 User interviews with light usability testing
Affinity Mapping
Competitive Analysis
Feature/Element Comparison
Design 🎨
Mid Fi Wireframes
Mood Board and Style Guide
Hi-Fi Wireframes
Clickable Prototype
Synthesize 🧩
Affinity Mapping
2 User Proto Personas
User Journey Map
Test ✔️
2 Rounds of Usability Testing
Stakeholder Presentation
Handoff including research report and design files
Ideate 💡
User Flow
Updated Site Map
Sketches
User Interviews and Stakeholder Interviews (two separate sections)
6 User interviews, people who had adopted or fostered the dog and from charities in general
It was remote over zoom or google meets
During the first week of the project
General questions about adopting and then they were asked to navigate the website and their overall impression
it was scripted and recorded and put into a fig jam file by the team
STAKEHOLDER
the ceo or the person running it and their like second in command
had questions prepped ahead of time
learned they had strong unique content, their instagram had high engagement but the website didn’t reflect their strengths
Competitive Analysis
We an Best Friends Animal Society and World Wildlife Fund (WWF) revealed that strong emotional storytelling, clear navigation, and multimedia content are key to user engagement.
Compared to these sites, The Animal Pad’s text heavy design and limited interactivity make it harder to connect with users.
Adopting more visual storytelling, intuitive navigation, and interactive elements could help increase adoptions and donations.
Navigation is confusing
Users couldn’t always tell where to find foster/adopt information.
Donation trust is low
No visible security badges, testimonials, or impact statements.
Content is overwhelming
Adoption/foster pages are text-heavy and intimidating.
Affinity Mapping-What did we hear from users?
Community offerings are hidden
Puppy parties, events, and volunteer opportunities aren’t promoted clearly.
Users want reassurance
Both adopters and donors want transparency about the process and the impact of their actions.
Proto-Personas
Alex - “The Thoughtful Rescuer”
Goals:
Find a dog that fits their lifestyle and home
Make an informed decision about fostering or adopting
Have a smooth, supported transition for both dog and household
Needs:
Clear, transparent details about each dog’s history and needs.
Simple tools to search and compare available dogs.
Guidance on requirements, timelines, and available support.
Frustrations:
Vague or incomplete dog profiles.
Complicated or unclear application process.
Uncertainty about post-adoption or foster support.
Motivation
Supporting an ethical, transparent rescue.
Finds joy and purpose in caring for animals.
Wants to give a dog a second chance at life.
Journey Map-What does the user need?
Persona: Alex
Goal: The goal of the user journey map was to visualize the end-to-end experience, highlight pain points, and uncover opportunities to improve the adoption, fostering, and donation flows.
Phases
Emotional Experience
Thinking
Improvement Opportunities
Sees Dog in Need
“They look sweet, but is this an adoption or foster situation? What’s their story?
😊
Adopt “Foster Needed” or “Adopt Me” badges to images
Include 1-2 key details in social media captions for quick clarity
Opens Listing for Details
“Where’s the info I need? I don’t want to commit without knowing the full picture”
😕
Require all listing to include recent, high quality images
Standardize listing format so temperament/medical info is always visible about the fold
Evaluates Fit
“I could help… but am I prepared for what this dog needs right now?”
😬
Add quick compatibility icons (kids, cats, dogs)
Include a “What this dog needs” section in plain language
Information Architecture- Streamlining the User Flow
The revised sitemap organizes The Animal Pad website into clear, user-friendly sections Adopt, Foster, Learn More, Shop, and Donate each with streamlined subpages for easier navigation.
New additions like Community Events, Puppy Parties, and a Photo Gallery enhance engagement, while simplified donation and adoption flows improve accessibility and encourage user action.
Mid Fi Wireframes-Early Design Concepts
Clickable Prototype
Prototype of the Main User Flow
Old Vs New Hero Section
Old Vs New Dog Profiles
Old vs new donation page
Old vs new navigation
Usability Testing
Task: Find a Dog to Foster
Before: 60% success, average time 2:10 mins
After: 100% success, average time 1:05 mins
+40% increase in completions, ~50% faster
Task: Make a Donation
Before: 40% success, average time 1:45 mins
After: 90% success, average time 0:50 secs
+50% increase in completions, ~52% faster
Task: Start Adoption Application
Before: 50% success, average time 3:20 mins
After: 100% success, average time 1:40 mins
+50% increase in completions, ~49% faster
Implementation/Metrics
Donation Conversion Rate-Measure % of visitors who complete a donation after landing on the Donate page.
Recurring Donations-Track sign ups for monthly giving as a key sustainability metric.
Application Completion-Monitor foster and adoption application completion rates vs. drop-offs.
Time on Task-Measure time to locate Adopt/Foster/Donate flows compared to baseline tests.
Event Sign Ups-Track number of RSVPs for community events like puppy parties and volunteer opportunities.
User Feedback Loop-Implement short post-action surveys (“Was anything confusing today?”) to continuously capture insights.
Handoff
This project proved the impact of thoughtful UX design on a nonprofit mission. By simplifying navigation, clarifying foster and adoption steps, and adding transparency to donations, we created an experience that makes it easier for users to take meaningful action helping more dogs find homes and more donors feel confident in their giving.
We handed off an annotated Figma file with a reusable component system and recommended WIX as a practical platform for launch, allowing The Animal Pad team to implement changes quickly without heavy technical support.
Key lessons learned included the importance of balancing emotional storytelling with usability, and how small details like progress indicators, impact tiers, and clear volunteer roles can significantly reduce user hesitation. Going forward, I would focus on high-fidelity branding, A/B testing donation flows, and expanding the Community Hub to build long-term engagement.
