UX/UI Design Case Study: Paw Prints Rescue

Paw Prints Rescue is a non-profit animal rescue website designed to simplify the pet adoption process while building trust with potential adopters and donors. The prototype below includes three key pages:

1️⃣

Homepage

2️⃣

Listing page

3️⃣

Detailed dog profile page

Research & UX Strategy

Before starting the design, I conducted competitive research on leading dog charities in the UK; Dogs Trust, Woodgreen and DAWGS. Additionally, I studied best practices for nonprofit websites, which emphasised:

✏️

Engagement: I included event calendar and blog content sections because regularly updated content gives visitors the impression your organisation is active and relevant

✏️

Building trust: The section, 'Our Work & Mission', on the homepage is designed with financial transparency statements, annual reports, and success statistics to build confidence and assure donors their contributions make an impact.

✏️

Clear donation CTAs: To make the donation process intuitive and accessible, I designed a simple, frictionless donation flow, inspired by Woodgreen's approach, which allows users to choose between a one-time or monthly donation.

✏️

Build empathy: Showcasing success stories helps foster a deeper connection, so the 'Donate' CTA is paired with dynamic text that adjusts based on the donation amount, such as "£30 covers flea, tick, and deworming medication for 3 dogs like Rio." Rio’s story is featured next to this text, along with a brief description of his adoption journey, making the donation feel personal and impactful.

✏️

Accessibility: High contrast ratios between text and background colours were used to meet the WCAG 2.1 standard of 4.5:1. Buttons were designed with a minimum height of 44px to make them easy to click, particularly for users who might have motor impairments. Interactive elements include visual cues such as focus indicators and up/down chevrons on dropdowns, helping keyboard users identify the element they are interacting with. The overall layout follows a logical, hierarchical structure, with headings in sequentially descending order to guide users through the content, while ample white space ensures easy scanning and comprehension.

Design Approach & Brand Identity

I leveraged the “Paw Prints” name to reinforce brand identity by incorporating paw prints as subtle design elements. These serve as visual guides between sections while keeping the layout clean.

Paw prints are also used in interactive elements such as checkboxes in the adoption filters.

Custom card frames for adoption listing were repeated in infographics and dog images for a cohesive experience. While I introduced interactive elements such as filters, dropdowns, and on-click effects, I deliberately avoided heavy animations and overly ornate fonts to ensure full accessibility.

The overall aesthetic is warm, fun, and approachable, catering to families and making the adoption process engaging.

Next steps

The design of Paw Prints Rescue aims to balance functionality, trust-building, and playfulness, making it an accessible, engaging space for families looking to adopt. The design reflects a user-centred, research-driven approach while incorporating branding, accessibility, and modular design best practices. The next steps should focus on expanding the user experience:

💡

Expand the Website Layout: While the homepage, dog listing page, and dog details page are designed, additional pages should be considered, such as an 'About Us' page and a dedicated 'Adoption Application" page. This will create a comprehensive user journey from learning about the rescue to applying for adoption.

💡

Mobile Optimisation: Ensure that the design is fully responsive across all devices, especially mobile. Families often browse adoption sites on smartphones, so optimising the layout and interactions for mobile is critical.

💡

Content Strategy: Potentially work with content creators to develop engaging text and images for each dog’s profile. Storytelling can be integrated into dog profiles to increase emotional engagement and drive conversions.

Figma file for reference: