AZ Humane Society

PROJECT OVERVIEW

The Arizona Humane Society, established in 1976, underwent a remarkable 84% decrease in euthanasia through life-saving programs. Despite a surge in adoption and foster demand during the pandemic, their website struggled to keep up. With growing programs and departments, the site became overwhelming and visually blended in with competitors.

I was part of a team tasked with redesigning their WordPress website to showcase a rebrand, enhance user experience, and promote life-saving services, all in preparation for the opening of their new medical center in fall 2021.

Project completed as a full-time employee at Ideas Collide. To comply with the non-disclosure agreement, confidential information has been omitted from this case study. Portfolio display permission can be revoked at any time if the agency or client deems necessary.

YEAR
2020-2021

ROLE
Design Lead

METHOD
UI, UX, Modular Web Design, Accessibility, Information Architecture, Prototyping, QA

TOOLS
Adobe XD, Illustrator, Photoshop, Miro, Trello, ADA tools

DELIVERABLE
Website Redesign

Teaching an Old Dog New Tricks

DISCOVERY

User Research

After volunteering at AHS a year prior and leveraging insights from a 2018 pet adoption survey, I collaborated with the art director to conduct interviews with six coworkers deeply involved in AHS activities—volunteering, fostering, and adopting pets. Our aim was to gain firsthand insights into their experiences with the website and online processes.

Coworker Insights

  • Disliked the need to check the website daily for their ideal pet

  • Found the website challenging to navigate, especially for post-adoption care and services

  • Noted insufficient or missing photos on pet detail pages, hindering the understanding of an animal's personality

  • Universally enjoyed the in-person AHS experience and felt a strong alignment with the organization's mission

This collaborative research provided valuable perspectives to enhance the user experience, making the redesigned website a more seamless and enjoyable platform for both potential adopters and loyal customers.

Website Audit Findings

Delving deeper into the challenges faced by my colleagues and other users, I collaborated with the creative director and art director to conduct a comprehensive web audit of the current AHS website. This involved meticulously sifting through the intricacies of the site, identifying and documenting every issue we encountered. Additionally, we cataloged each page to lay the foundation for the upcoming creation of a new sitemap. The insights gathered not only echoed user concerns but also uncovered additional issues, as highlighted in the accompanying image below.

CHALLENGE

Defining the Needs

Drawing insights from the web audit along with valuable input from coworkers and clients, it became evident that AHS’s website posed significant obstacles in various user flows. Issues such as missing and duplicate information, numerous text links, hidden pages inaccessible via site navigation, and unclear donation methods with multiple forms created confusion for users. Many users either tolerated the subpar online experience or opted for the more direct route of calling or visiting an AHS location in person to achieve their goals.

User Needs

  • Donate to the organization on one-time and recurring basis

  • Adopt a pet

  • Find advice and answers regarding their pet

  • Receive care from Veterinary Clinics

  • Surrender a pet

Business Needs

  • Showcase animals, donation opportunities, diverse programs

  • Communicate Ethical “No Kill” Philosophy, system of care, and organization story

  • Responsive, reliable, and ADA compliant website redesign

  • Simplify tools for content management for staff and team

My Role

In my role as Design Lead, I took the initiative to educate client teams on the significance of modular design and accessibility from the project's inception. I meticulously crafted every aspect of the website, working collaboratively with a creative director, art director, and content developer to enhance site taxonomy. I presented designs to key stakeholders, partnered with a web developer and art director to realign key features with user and business needs, and conducted thorough quality assurance checks on both the front end and back end of the modular website.

PROCESS

Information Architecture

The next huge undertaking was the information architecture and sitemap. The main goal was to focus on intent, simplicity, and making the new site feel lighter. I also strived to limit the number of pages a user had to click through to find relevant info.

The project faced a major challenge with the client's changing branding. Despite the client working with another agency on a brand refresh, I had to adapt multiple times in auditing new brand elements. Collaborating with the external agency, I provided recommendations for web-safe fonts, ADA-compliant color pairings, and photography best practices for customized site images. The goal remained to maintain consistency and follow best practices throughout the evolving process.

Discovery

  • Brand Colors + Font Audit

  • Sitemap

  • Determining ADA Compliance goals

Design

  • 3 Homepage Designs

  • Design System

  • Design for 5 remaining sprints and create corresponding module libraries for dev handoff

Iterate, Refine, Launch

  • Refine pages based on dev and client feedback

  • QA developed modules on front + backend

  • Create remaining pages in CMS

  • Train client teams on backend

DESIGN

Homepage

Content Features

  • Bright, bold, warm, and optimistic mood echoing brand and conveyed through design elements

  • Emotional connection between pet and owner was emphasized through photos and messaging

  • Highlighted diversity in pet owners and pets

UI Features

  • “Donate Now” button in sticky header nav, providing easy donation access to users and supporting AHS’s top revenue generator

  • Animations and micro-interactions utilized to create more separation between competitors

UX Features

  • Pet Carousel offers a mini adoption or foster experience depending on pet volume

  • Header and footer nav now house less than 1/3 of page links with clearly defined categories

  • Website achieves a WCAG 2.1 AA level of ADA compliance

Design System

After gaining approval for the homepage design, I transitioned into building a robust design system that served as the foundation for a seamless user experience. This encompassed everything from button states and fonts to detailed animations, responsive behaviors, and error states for forms. Collaborating closely with the developer, I ensured the design system's adaptability by conducting regular reviews during major updates. Additionally, I crafted custom rounded icons and UI elements, aligning them with the logo's attributes for a visually cohesive interface. My approach not only prioritized individual design elements but also focused on the strategic integration of these components to deliver a polished and harmonious UI/UX.

SOLUTION

Adoptions

In optimizing the user experience for the second revenue driver, adoptions, I integrated insights from a 2018 pet adoption survey and coworker interviews. Recognizing the critical role of online interactions in pet adoption, I revamped the Adoption page to align with user preferences revealed in the surveys.

Expanded Pet Cards

Enhancements like larger pet imagery, comprehensive pet profiles, and a Favorites feature, inspired by e-commerce platforms, contribute to a user-friendly interface.

Dynamic Pet Filters

The dynamic filters, such as breed, cater to specific adopter priorities for dogs, cats, and rabbits, ensuring a seamless and personalized search experience.

Wishlist Account

I collaborated with the development and design teams to introduce a Pet Wishlist Feature, allowing users to receive notifications tailored to their preferences, fostering long-term engagement without overwhelming them. The inclusion of a streamlined Wishlist Account page further underscores our commitment to providing a frictionless adoption journey for users.

IMPACT

Achievements

After the redesigned website launched, users donated more gifts, adopted more pets, and experienced faster page load speeds.

+19.5%

By 2022, individual donation gifts increased by designing a simplified e-commerce experience

+12%

Increase in lives saved through adoption with a refreshed adoption search and pet wishlist features.

+188%

Site responsiveness increased from 34 to 98 page load speeds.