Tracy Vu | Portfolio

Let's make something together ✧

Let’s keep crafting moments that connect, delight, and maybe involve matcha. 🍵🍃

A digital transformation to safeguard and uplift at-risk animals in San Diego

San Diego Animal Sanctuary

Role

Designer/Marketing Strategist

Timeline

June 2023 – June 2023
(10 Weeks)

Team

3 Designers

2 Marketing Strategists

Tools

Figma

Squarespace

Google Forms

THE PROBLEM

Adopting a pet should feel simple.

San Diego Animal Sanctuary is a volunteer-run nonprofit saving animals from euthanasia. But their original website lacked clarity, personality, and structure—making it difficult for users to find dogs and learn about fostering.

BACKGROUND

The Design Problem

THE SOLUTION

Designing a Clearer Path to Connection

We redesigned the site to be cleaner, easier to navigate, and more action-driven. Key changes included clearer CTAs, simplified page structure, filterable pet profiles, and a refreshed visual style that feels warm and inviting.

UNDERSTANDING THE PROBLEM

Uncovering why users struggled to connect with the site and take action

We conducted stakeholder interviews and 11 user tests. Users consistently struggled to navigate the site, locate adoptable pets, and understand key differences between adopting and fostering.

RESEARCH

Understanding the Problem

IDEATION

Turning insights into solutions

WHAT WE HEARD

Real feedback that revealed user pain points

Many shared that the site felt cluttered, unclear, or uninviting—making it difficult to take action, whether that was adopting a pet or making a donation. These quotes helped us pinpoint usability gaps and shaped the foundation of our design decisions moving forward.

SITE MAP

Restructuring the Site Map

We simplified the navigation to reduce friction and highlight the most important actions—like adopting, fostering, and donating.

EARLY SKETCHES

Designing from what mattered most.

After restructuring the sitemap, we sketched out each core page to visualize how users could more easily find adoptable pets, understand the foster process, and get involved.

LOW-FIDELITY WIREFRAMES

Structuring a clearer, more focused experience.

We translated our sketches into low-fidelity wireframes to test layout, flow, and visual hierarchy. Each page was designed to guide users toward key actions while keeping the experience simple and intuitive.

BRINGING IT ALL TOGETHER

Design Execution & Iteration

FIRST HI-FI ITERATION

Exploring tone, layout, and structure

This first pass focused on a greenish turquoise, gold, and cream palette to create a warm, inviting tone. We highlighted main user flows like navigating via the nav bar, using the sort/filter bar, and reading through adopt/foster FAQs to guide users smoothly through the experience.

VISUAL IDENTITY

Bringing warmth and clarity to the brand

To reflect the sanctuary’s mission and make the site feel more inviting, we refined a visual system using earthy turquoise, golden tones, and soft illustrations. The palette was chosen to evoke warmth and trust, while Plus Jakarta Sans provided a clean, modern typeface for accessibility.

REFINING OUR DESIGNS

Usability Testing

THE METHOD

Understanding the user starts with listening.

We conducted 11 semi-structured interviews using a mix of pre-test questions, scenario-based tasks, and post-test reflections. Participants found the site clean and easy to navigate, but also shared confusion around the wishlist and visual hierarchy. Their feedback helped guide our design decisions and highlight areas for improvement.

FINAL SCREENS

From Concept to Completion

FINAL SCREENS

Bringing the vision to life.

The following screens showcase how each tab was improved based on usability testing, a restructured information architecture, and a more intuitive user flow. The prototype was built in Figma, then recreated in Squarespace with custom CSS and JavaScript to closely match margins, padding, buttons, and fonts from the final design.