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:
Locate the adoptable cat Genesis and identify how to proceed with adopting him. —> Success Rate: 58%
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.
Our Revised Sitemap
User Flow
Part 3: Prototypes & User Tests
Mid-Fidelity Prototype
User Flow Demonstration: Actively Looking to Adopt
User Flow Demonstration: Looking for missing pet
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:
Identify the adoptable dog, Noodle’s ID number.
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:
You are actively looking to adopt a large dog breed at the beginning of its life. Identify a dog that fits that criteria.
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.