Chicago Pet Rescue Website Redesign

The Chicago Pet Rescue website serves as a key resource for people looking to adopt, foster, or support animals in need. Founded in 2010, the organization provides essential information on the adoption process, pet care, and lost-and-found services.
However, the existing website made it difficult for users to navigate, find available pets, and complete the adoption process efficiently.

Project Goal:

The goal of this redesign was to improve the overall user experience by making the website more intuitive, engaging, and aligned with the organization’s mission.
I focused on simplifying key user flows while creating a design that feels welcoming, clear, and easy to navigate for potential adopters, donors, and volunteers.

Key Objectives:

Simplify the Adoption Process
Streamline the application flow to reduce friction and make it easier for users to complete.

Create a More Engaging Visual Experience
Design a warm and approachable interface that reflects the compassion and mission of the organization.

Increase User Engagement
Encourage exploration through clearer content structure, featured pets, and success stories.

Project Details

Type: Non-Profit Redesign
Timeline: 3 weeks (July 2024)
Disciplines: UX Design, Information Architecture, Interaction Design, Prototyping, Usability Testing
Tools: Figma, Google Forms, UXtweak, Trello

THE DESIGN PROCESS

1. User Research

Research Plan

• Competitor Analysis: Conducted a SWOT analysis of three competitors (including local organizations) to identify strengths, weaknesses, and opportunities.
• Heuristic Evaluation & Annotations: Analyzed the current Chicago Pet Rescue (CPR) website to identify usability issues and areas for improvement.
• User Testing: Conducted moderated usability tests with six participants via Zoom. Users interacted with the existing CPR website to uncover pain points and behavioral patterns.
  

Problem Statement :

Chicago residents interested in adopting an animal through the Chicago Pet Rescue (CPR) website need improved navigation, enhanced search functionality, and more engaging visuals to create a more intuitive and efficient adoption experience.

2. Definition & Synthesis

Brand Identity

The current branding feels playful but lacks professionalism. The cartoon-style logo communicates friendliness but may not build trust, while the red heart and cardiogram can be misinterpreted as medical imagery.
→ Proposed a modernized logo that preserves warmth while improving clarity and credibility.

Current Logo and Proposed New Logo

Hero Section

The existing hero is text-heavy and does not clearly communicate CPR’s mission or primary actions.
→ Redesigned with streamlined messaging and clear calls-to-action focused on four key user goals: Adopt, Foster, Volunteer, Donate.

Available Animals & Pet Profile

The current layout is cluttered and difficult to scan, making it hard for users to quickly find relevant information despite strong imagery.
→ Introduced a structured grid system, clearer hierarchy, and photo-forward design to improve browsing and decision-making.


Adoption Application

The application form is buried too far down the page and feels overwhelming due to excessive fields.
→ Simplified the form using progressive disclosure and added a progress tracker to guide users through the process more comfortably.

3.  Ideation

4. Prototyping (low-hi)

Wireframes Sketches

• Created initial low-fidelity wireframes to explore layout and user flow
• Developed mid-fidelity desktop prototypes to test structure, hierarchy, and usability
• Iterated designs based on user feedback and testing insights

Mid-Fidelity Prototype Desktop

5. User Testing And Outcomes

Once the low-fidelity prototypes were completed, we moved into evaluation by testing both desktop and mobile experiences with users.

User Testing 


Platforms: Desktop & Mobile
Participants: 3 users (6 total test sessions)
Tasks: 3 core tasks + 3 follow-up questions

A/B Testing
Participants: 15 users
Format: 5 A/B comparison questions

Key Findings
All participants successfully completed the assigned tasks
Overall feedback was positive, with users finding the redesigned experience more intuitive and visually engaging

Areas for Improvement
Call-to-Action Clarity:
Hero section buttons did not clearly communicate adoption
→ Updated copy to explicitly include the word “Adopt” for clarity and intent

Feature Opportunity:
Users expressed interest in sharing animal profiles
→ Identified opportunity to add a “Share with friends & family” feature

Final Deliverables
High-fidelity prototypes for both desktop and mobile, incorporating usability feedback and refined UI patterns

Hi-Fidelity Prototype Desktop and Mobile Version

6. Conclusion & Future Opportunities

Key Improvements

User Insights → Design Solutions

Mission Clarity:
Users struggled to understand CPR’s purpose
→ Refocused the homepage hero on adoption with clear, action-driven messaging

Navigation:
Users found it difficult to browse and search for pets
→ Introduced a simplified sitemap, multiple navigation paths, and search/filter functionality

Content Structure:
Dense, unstructured text made scanning difficult
→ Reduced copy, improved hierarchy, and emphasized visual content

Visual Consistency:
Inconsistent image sizes disrupted layout clarity
→ Standardized image dimensions for a cleaner, more cohesive interface

New Features

• Action-driven hero section highlighting: Adopt, Donate, Foster, Volunteer
• Improved navigation with multiple entry points to key pages
• Search and filtering options for browsing available animals
• Grid-based layout with stronger visual hierarchy
• Consistent imagery for a more polished and scannable experience
  

Final Thoughts

The redesigned experience creates a clearer, more intuitive path for users to explore available animals and complete the adoption process. By prioritizing usability, visual hierarchy, and user goals, the new design better supports both users and the mission of Chicago Pet Rescue.

Future Opportunities

With additional time, the next steps would include:

• Collaborating more closely with stakeholders to validate design decisions
• Designing and implementing a Pet Match Quiz to personalize the adoption journey
• Expanding and testing additional pages to ensure consistency across the full site experience