Animal Shelter Website Case Study

Overview

The animal shelter website aims to create an intuitive, native adoption process for new and experienced pet owners alike, with filters, adoption advice, and options for visiting with or filing an adoption form for a pet. The target audience is current and potential owners of furry or feathered pets who want to learn about, browse, and apply to adopt pets all in one place.


Understanding the User

User Research Summary

I wanted to understand what users need out of the pet adoption process online, and how different users might approach adoption.

I found that users (especially first-time pet owners) can be overwhelmed by choice, as shelters can have many pets available, and they find it difficult to feel an emotional connection with a pet simply online.

User Pain Points

  • Choice - the number of available pets can overwhelm users
  • Uncertainty - users don't know what to expect during adoption, as processes vary
  • Connection - users want an emotional connection with a potential pet
  • Accessibility - users need an accessible experience

    • Persona and User Journey Map

    I made a persona named Jill to represent users who are potential first-time pet owners. Users who are new to pet ownership will need the most information and guidance, so the website experience needs to support their particular needs.



    Starting the Design

    Competitive Audit

    I completed a competitive audit to see how similar organizations handle their websites, and which qualities will benefit or hinder users. I found that a native adoption process (not a separate website/service), accessibility features, and consistent branding will create the best experience for users.

    Rapid Sketching

    I sketched potential ideas with the Crazy Eights exercise to generate design ideas. I knew users would want to see photos of pets right away, so I focused on designs with pet images front and center.



    User Flow Diagram

    I made a user flow diagram to understand how users like Jill will navigate and browse for pets.



    Paper Wireframes

    The paper wireframes I made for the home page incorporated links, search, featured/new pets, and adoption stories - information that should help users find what they need but also create an emotional connection.







    Digital Wireframes

    The designs began to come to life with digital wireframes made in Figma.



    I emphasized photos and ease of locating information on the home page.



    The list of pets for adoption will feature photos, a brief summary of each pet, and filters.



    The pet page provides more details on the pet, a space for photos and videos, and suggested related content.

    Low-Fidelity Prototype

    I added connections to create the flow that users will use in the website.



    View Prototype

    Testing

    Usability Study 1

    I conducted a usability study to test out if my design was fulfilling user needs and expectations for adoption. I felt the design was a good start but was going to need some changes.

    Round 1 Findings
  • Users wanted more information on the Pet Details page
  • The placement of the Adopt Me button was not intuitive for users
  • The adoption process didn't have enough information for users
  • Users wanted guidance available for first-time pet owners

    • I used the affinity diagram below to group feedback from usability study participants and find the overall themes.

    Refining the Design

    Mockups

    It was clear from the usability study that the design needed changes to fulfill user needs. One of the overall changes I made was updating the menu navigation, as the organization of the links was unclear for users.



    Users wanted more information on pet pages, so I added more details and a health summary. I moved the Adopt Me button further down.



    Users wanted adoptees to be presented with more information before completing the form, so I added a page prior to form submission.



    I also added a page specifically for first-time pet owners. Users expressed that there needed to be a resource specifically for this purpose.

    Prototype Changes Post Study



    High-Fidelity Prototype

    I followed the usability study updates with updates to the visual design of the website.

    Usability Study 2

    After changes from the first usability study, I ran a second usability study. I made a lot of changes and based on that I expected more were still needed.

    Round 2 Findings
  • The amount of information on the Adoption Interest page overwhelmed users
  • Users wanted more pet filtering options
  • Scheduling a visit with a pet was unclear to users
  • Users wanted more details from the adoption process

    • I like the simplicity of affinity diagrams and stuck with this strategy for identifying themes in the participant feedback.

    Refining the Design

    Mockups



    Users found there was too much information on the adoption interest page, so I narrowed it down to essentials.



    Users liked the existing filter options but wanted more, so I added more possibilities.



    Scheduling a visit with a pet was unclear for users. I gave the form steps to make it easier to navigate and understand.



    Users wanted more information at the end of the adoption form. I added more details here so potential adoptees know what the next steps will be.

    High-Fidelity Prototype

    I updated the high-fidelity prototype with any missing connections, such as applying the new filters.



    View Prototype

    Accessibility Considerations

    One accessibility consideration I made is to use different font styles and sizes to distinguish different elements of the site, so users can easily distinguish headings and links. I made sure to create a color palette that was tested for contrast accessibility, so it will be easier to use for individuals who have colorblindness or visual impairments. I also included landmarks on the website, so users who are visually scanning or using a screenreader can navigate the site easily.

    Going Forward

    Takeaways


    Next Steps

  • Review the app for areas where any accessibility considerations may be missing, and make those areas more accessible.
  • Conduct a third usability study to check if there are any areas in the site that still aren't meeting users' needs.
  • Complete the phone and tablet sized iterations of the website, to complete the design and bring all elements of the responsive website to life.


    • Thank you for reviewing my case study!

    If you would like to get in contact with me, please use the information listed in the footer below.

    Back to UX