Chicago Animal Care & Control

Website Redesign

2024

Last year, 2,359 animals were adopted from Chicago Animal Care and Control; 6,554 were transferred to partner organizations, and 3,306 were euthanized either by request of their owner or due to “health, behavior, and/or capacity for care, such as resources to treat or space”1. We believe that the website’s current confusing design and format has contributed to these numbers and have discouraged engagement from potential adopters.

Our goal is to redesign the CACC website such that users are provided with necessary information and able to complete important tasks with ease. We also aim to maintain CACC’s mission and values with this website redesign.

Project Details

Project Type

Website Redesign

Tools

Figma, Visual Studio Code, GitHub, Google Drive

Contributors

Lana Sardar, Waringa Hunja, Kacey Arnold

Research, Prototyping, UX/UI Design, User Testing, Front End Development, Responsive Web Design

Duration

3 Weeks

My Role

The Original Website

Heuristic Evaluation

View our full heuristic evaluation document.

After conducting a heuristic evaluation of the original website, we concluded that the CACC’s brand and mission were not clear, the information architecture was not intuitive and a standard form of navigation across the website’s pages was not provided.

The Final Prototype


Part 1: User Research

Stakeholder Outreach

Although our group attempted to contact 3 individuals from the CACC team, we did not receive a response.

View our stakeholder interview script.

User Research Plan

Click here to visit my full User Research Plan document.

Research Questions

  • What drives people to adopt animals on specific websites?

  • What level of awareness do our participants have about CACC and its services?

  • What part of the adoption process is most frustrating for individuals?

  • What information do people find most helpful and necessary when looking to adopt an animal?

Interview Plan + Script

Our interviews will be conducted by following the same interview plan and script with 2 participants per group member (6 interviews total). Each interview will be conducted verbally and will be recorded.

Affinity Diagram Process

Key Findings:

  • Shelters often do not provide enough information about an animal’s background

  • Creating a personality for the animal, especially when browsing online, can be very impactful in regards to the selection process

View our Affinity Diagram FigJam.

Usability Testing - Original CACC Website

Goal:

We wanted to conduct usability testing for the original website to identify existing pain points related to navigation and the information architecture.

Tasks:

  1. Locate the adoptable cat Genesis and identify how to proceed with adopting him. —> Success Rate: 58%

  2. Locate where you can register your missing pet. —> Success Rate: 33%

User Behaviors/Feedback:

  • Majority of participants struggled briefly to locate how to proceed with adopting Genesis

  • All participants required guidance for locating missing pet registration form

Takeaways:

  • Users require a more robust method of navigating the site’s pages

  • The site is lacking an intuitive information architecture — the CACC’s services are unclear or not presented to users.


Part 2: Definition & Ideation

User Personas

Leah Holmes

The feedback from our user interviews allowed us to uncover our first user persona, Leah Holmes, who is actively looking to adopt. Leah’s goal is to have a convenient method of searching for adoptable animals that fit her criteria online. Her greatest frustration comes from the uncertainty that the animal may not be a proper match for her personality and lifestyle.

Ardy James

The feedback from our usability testing with the CACC’s original site lead us to uncover our second user persona, Ardy James. Ardy uses the CACC website to seek any resources or services that may help him in finding his missing pet. Ardy requires a thorough understanding of the resources and services the CACC provides, this way he is certain he’s doing everything he can to help find his pet. Ardy’s frustration comes from any obstacles or confusion that may come about when navigating the site as he’s already in a frantic state.

User Insight

We created two problem statements, each relating to one of our user personas. Our problem statements originated from the two user insights we uncovered below.

User Insight 1: A user who is actively looking to adopt.

Nurturing animal lover actively looking to adopt needs a detailed description and visual representation of the available animals because compatible personality and behavior match are key indicators of a successful adoption. 

User Insight 2: A user who is missing their pet.

Concerned pet owner searching for their lost animal requires a clear understanding of how to navigate the CACC’s site and clarification of the services provided because the current state of the site's information architecture is unpredictable and difficult to follow.

Problem Statement

Problem Statement 1: A user who is actively looking to adopt.

Animal lover actively looking to adopt needs an intuitive method of searching for adoptable animals because a credible behavioral/personality match between the animal and adopter eases the uncertainty that can otherwise come with adoption. How can we improve the CACC’s website to ensure that adopters can efficiently browse and search for potential pets resulting in a successful adoption and forever home for the animal?

Problem Statement 2: A user who is missing their pet.

Concerned pet owner searching for their lost animal requires a clear understanding of how to navigate the CACC’s site and clarification of the services provided because the current state of the site's information architecture is unpredictable and difficult to follow. How might we improve the CACC’s website so frantic pet owners searching for their lost animal can swiftly navigate the website without causing any further frustration ensuring all helpful resources provided by the CACC are prominent and clear? 

I Like, I Wish, What if…

Feature Prioritization Matrix

We decided to focus on three features, included in the matrix below, that would theoretically resolve the concerns we defined in our problem statements.

Original CACC Sitemap

As you can see from the screenshot below, the original CACC website does not provide an intuitive or functional navigation/menu. The website currently provides linked text to serve as a method of navigation that is only accessible from the homepage.

Screenshot of the CACC’s homepage.

Our Revised Sitemap

User Flow


Part 3: Prototypes & User Tests

Mid-Fidelity Prototype

User Flow Demonstration: Actively Looking to Adopt

Mid-fidelity desktop prototype demonstration for user flow 1.

User Flow Demonstration: Looking for missing pet

Mid-fidelity desktop prototype demonstration for user flow 2.

Usability Testing: Mid-Fidelity Prototype

Goal:

We want to confirm that the adjustments we made to the information architecture of CACC's website is intuitive to users both looking to adopt and whose animal is missing.

(Initial) Tasks:

  1. Identify the adoptable dog, Noodle’s ID number.

  2. User the website to register your animal as missing.

After each team member conducted 2 user tests with the tasks defined above, we reconvened and concluded that our initial tasks did not lead us to uncover any surprising insights. We found that most participants had little to no feedback or pain points, not because of the quality of our prototype but because of the simplicity of the tasks. Therefore, we decided to revise our user tasks and conduct a further round of usability testing for the mid-fidelity prototype. We arrived at the list of user tasks below.

Revised Tasks:

  1. You are actively looking to adopt a large dog breed at the beginning of its life. Identify a dog that fits that criteria.

  2. Your pet is missing. Identify and describe 2 services/resources within the CACC website that may assist you in finding your animal.

Our objective with this set of revised user tasks was to place our participants in the shoes of our two user personas, Leah and Ardy. This way any insights we uncovered would guide us in refining the new features we implemented in the redesign.

Key Takeaways from Testing

Iterations Made Based on Findings

Animal Card Component

The changes we made to the animal card component mostly related to the presentation of information and styling to emphasized information that might be most important to someone actively looking to adopt. In addition to the pet-related information that was already provided on the CACC website (name, age, breed), we also decided to include 2 adjectives at the bottom of the card to better personify the animal. Theoretically, these 2 adjectives would be decided upon by the staff members at the shelter after spending time with the animal, and would be chosen from a fixed list of 10 adjectives the shelter has defined and uses to describe each adoptable animal.

Animal Detail Page

As we revised the animal detail page with our usability testing feedback in mind, we focused on the information architecture of the page’s body content. More specifically, we evaluated what animal-related information would be most important or impactful for a user interested in adoption. Although the animal’s ID number may be necessary for the user at some point, it does not contribute to personifying the animal and therefore, should not be presented first. In our high-fidelity prototype, we decided to introduce the animal by reiterating the 2 adjectives included on their card. Theoretically, these adjectives would link to an internal page that includes the shelter’s definition or the criteria animal’s have to fit to receive these adjectives.

Additionally, we knew we needed to provide a Call-to-Action on the animal detail page in order to provide the user with next steps. As you can see at the bottom of the hi-fidelity animal detail page, we included a “How to Adopt” button that directs the user to the corresponding internal page that provides information on how to proceed with the adoption.

Final Clickable Prototype

You can find our coded homepage here, and our GitHub repository here.

User Flow: Actively Looking to Adopt

High-fidelity desktop prototype demonstration for user flow 1.

High-fidelity mobile prototype demonstration for user flow 1.

User Flow: Looking for Missing Pet

High-fidelity desktop prototype demonstration for user flow 2.

High-fidelity mobile prototype demonstration for user flow 2.

Next
Next

Cup of Sugar