SF SPCA Adoption Site

A UX redesign of San Francisco SPCA’s adoption website, reimagined for a scalable future.

Role

UX/UI Designer

Date

July - Aug 2025

Scope

User Research, Visual Design

Tools

Figma, FigJam, Google Meets

Improved filter search helps you find the animals you're looking for.

Clear CTAs convert users from the online portal to meeting the pet in person.

New website design increases adoption rates and improves clarity.

01 Problem Statement

Context

The SF SPCA is a nonprofit animal shelter in San Francisco and has just expanded to three locations. This creates a need for a scalable website that better bridges the online browsing experience with in-person visits.

Passion Project

Having adopted my own cat from this very shelter, I wanted to redesign the experience with firsthand insight into what adopters need.

02 Competitor Analysis

To better understand the landscape of adoption websites, I analyzed three existing websites: SF SPCA, Petfinder, and Adopt a Pet.

03 User Interviews

I conducted five user interviews with locals who have recently adopted or are prospective adopters. These conversations revealed what really mattered to them:

Primary Purpose

  • In addition, I found that for users, meeting the animals in person mattered the most by far.

  • Therefore, the online portal and its redesign's primary purpose is to convert online visitors to in person visitors.

03 Ideation

User interviews and pain points revealed key adoption needs, leading to restructured information architecture for search filters, pet cards, and pet pages.

Search Filters

When a user visits the adoption site, they usually have an idea of what they're looking for. Why not create a filter system that enables them to?

Pet Cards

The old pet cards were far too minimal. Having the most important information about an animal helps a user decide which to click into.

Pet Pages

The old pet pages weren't perfect. More information and better CTA can make a user feel more confident and convinced to schedule a meet up.

04 Redesign

With the research and design structure in place, I could move forward with my redesign, focusing on the following components of the website.

Landing Page

Visual clean ups, improved scannability, and emphasis on locations (since they've expanded).

Pet Search & Cards

Improved pet search & cards allows users to easily and more specifically look for the animal they have in mind.

Pet Page

Added schedule visit flow to have a more direct CTA rather than passive information. More information drives empathy.

In the end, a user might navigate the website in this Primary User Flow:

05 Outcome

This redesign aims to convert online visitors into adopters to support SF SPCA’s mission to ensure every animal finds a loving home.

Default States & Info Access

  • Highlighting higher-priority animals directs attention to those who need it most.

  • By presenting empathy-driven information in a more visible way, users are more likely to adopt the animal.

New Scheduling CTA

  • By presenting empathy-driven information, users are more likely to adopt the animal.

  • Highlighting higher-priority animals directs attention to those who need it most.

Advanced Filtering

  • Allowing users greater flexibility to search for exactly the animal they want helps them directly find