STREET TAILS WEBSITE

UX RESEARCH, FIGMA, RESPONSIVENESS

OVERVIEW

Street Tails Animal Rescue, located in Philadelphia, takes a different approach to adoption: rescue dogs that have been waiting in other shelters for extended periods rather than capturing strays. Their focus is on emotional companionship, matching people with pets who need a second chance.

I volunteered with their dog walking program and experienced firsthand how genuinely the staff cares for each animal. That warmth influenced my redesign: a site that reflects their personality while making browsing and adopting pets straightforward and enjoyable.

GENERAL USERS

The shelter’s primary audience includes potential adopters, especially those looking for unique rescue experiences. Many visitors are local and come from nearby areas like Northern Liberties, where higher living costs often align with higher income levels. This demographic also includes potential donors, volunteers for dog-walking programs, pet owners, and foster providers.

THE PROBLEM

The current Street Tails site has a clean, homely color palette and centered layout that aids readability. However, the homepage relies heavily on a duplicated navigation bar, and critical information (Ex. pet backstories) lives on a separate site entirely. Without those personal details, there's no emotional hook for potential adopters. The navigation also overwhelms users with subcategories, and upcoming events are buried in an unexpected location, undermining their visibility.

WIREFRAMES

Users access the site across desktop, tablet, and mobile. My approach was to establish core elements that stay consistent across devices while adjusting proportions as needed, particularly on mobile where spacing requirements shift significantly.
The warm, approachable feel had to carry through every breakpoint. Rounded edges on background containers throughout the design create a softer visual language that keeps users at ease regardless of screen size.

TYPOGRAPHY

Through the original website, certain pages would alter their fonts when compared to the original home page. A sudden shift in typography can disrupt the flow of the user experience, making it harder for visitors to navigate and engage with the content.
It is important to remain consistent for quicker readability and a simplistic font. To maintain the softer appearance, a softer font would also needed to be incorporated. Josefin Sans was chosen because it meets all of these requirements, offering both clarity and a gentle aesthetic.

THEME CHOICES

Incorporating simple graphics into the design would enhance the website's appeal and encourage users to stay engaged. To achieve this, I created and implemented dog-related interactives to add a playful, dynamic tough.

These elements add a sense of fun and lightheartedness, making the browsing experience enjoyable and encouraging users to spend more time exploring the site.

MICRO-INTERACTION INPUT

The micro-interactions blend organic and modern animation styles, keeping users aware they're interacting with technology while maintaining the site's warmth. This balance supports the emotional nature of adoption decisions and encourages deeper exploration.
Consistent interaction patterns across devices reduce cognitive load and build familiarity.

When animations and visual feedback behave predictably, users develop muscle memory and can anticipate outcomes without relearning the interface. These small moments of delight make the experience feel personal rather than transactional, reinforcing both usability and brand identity.

COLOR PALETTE

The original color palette successfully conveyed warmth and emotional connection, but many sections blended together without clear visual distinction. To improve the experience, I introduced higher contrast.

Furthering a change, I assigned color meaning throughout the site: red-based tones represent adoptable dogs, while blue-based tones are associated with informational content. Where more contrast was needed, these colors shift subtly to maintain differentiation.

CROSS-DEVICE LAYOUT

The final layouts maintain consistent color, imagery, text, and micro-interactions across all devices while respecting each platform's unique characteristics.

Desktop takes advantage of the larger screen for a more interactive experience.
Mobile repositions the taskbar to the bottom and incorporates scrollable animations for an app-like feel, with simplified elements and larger text to prevent cognitive overload.
Tablet strikes a balance between both, using a desktop-style taskbar while relying on tap and scroll interactions like mobile since tablets lack hover states.

Keeping core elements consistent across platforms helps users navigate efficiently while preserving the warm, emotionally engaging theme throughout.

HEURISTICS

During heuristic evaluation, participants agreed that switching from the original brown and tan background to white improved readability and information processing. This change still allowed for animations, illustrations, and content while maintaining the warm atmosphere central to the site's purpose. Viewers noted that the graphical elements made the redesign feel less rigid than the original.

CONCLUSION

Evaluation charts confirmed the final design successfully balanced visual appeal with emotional engagement, creating an effective platform for pet adoption. When colleagues compared my redesign to the original site, the majority agreed with the improvements outlined throughout this case study. The videos here demonstrate the site's functionality in action.

STREET TAILS WEBSITE

OVERVIEW

GENERAL USERS

THE PROBLEM

WIREFRAMES

TYPOGRAPHY

THEME CHOICES

MICRO-INTERACTION INPUT

COLOR PALETTE

CROSS-DEVICE LAYOUT

HEURISTICS

CONCLUSION

Eat My Food PHP Recipe Site

Street Tails Website

To Do Interaction Design

Petfinder Micro-interactions

LAURA GRAUER

Location

Contact