Project overview
The product:
The Hudson County Animal Shelter website offers resources in making finding and adopting a pet easier for potential adopters. It also provides information on services related to pet ownership and animal welfare. A typical user is a busy young professional who prefers to research online before visiting the shelter. The website’s goal is to help potential adopters find the right pet (and vice versa) and make the adoption process more efficient so that more pets can find good homes.
Project duration:
June 2022 - July 2022
The problem:
Animal shelter websites often have insufficient outdated information on available animals or direct the user to a pet search website. The potential adopter is often uninformed and unprepared for adoption process which can cause delays and result in less animals being adopted.
The goal:
Design a website for the Hudson County Animal Shelter which makes finding available animals and going forward with adoption easier for the user.
My role:
I was the lead UX designer and UX researcher for this project
Responsibilities:
User research, paper and digital wireframing, Lo-fi and hi-fi prototyping, iterating on designs and responsive design.
UNDERSTANDING THE USER
User research: summary
I conducted research and created personas and user journey maps to understand the needs and perspectives of the users that I am designing this website for. Research identified our target users as busy professionals and young families who would prefer to search for pets online before contacting or visiting rescues and facilities.
Many shelters and rescues feature just a selection of animals to get people to come into their facilities. Initial assumptions were that people like to just look at cute pet pictures and not actually try to find a pet online. However, research showed that people use shelter and rescue websites to actually find a good match and are often disappointed if the posted animal is not available or the information was unreasonably outdated. The adoption process can also be frustrating for the user.
User research: pain points
Search
Shelter websites often have insufficient or outdated information on available animals. They often direct the user to a pet search site.
Adoption Process
Potential adopters are often uninformed about the application, fees, and the process.
Navigation
Animal Shelter websites have search options, resources, donation requests, events, services, etc. Navigation can be busy and confusing.
Persona: Sam
Problem statement:
Sam is a busy professional who needs to find adoptable dogs online because he wants to consider as many dogs as possible before adopting.
User journey map
Mapping Sam’s user journey showed frustrations and improvement opportunities.
STARTING THE DESIGN
Sitemap
The sitemap was created with the multipurpose of the website in mind.
My goal was to create logical and intuitive website navigation that fulfills the various functions of an animal shelter. Information architecture decisions prioritized ease of use.
Paper wireframes
My design aimed to prioritize ease of use and through iterations, identified elements that would give the digital wireframes a good starting point.
Paper wireframe
screen size variation(s)
Users of the animal shelter website would benefit from accessing the site from different sized devices.
To make sure that the site would be responsive, additional screen size designs were created.
Digital wireframes
The user experience and priorities were considered first. To address user pain points, a search feature and visual elements were prominently placed on the page for easy access.
Digital wireframe
screen size variation(s)
Variations of the homepage were designed for different devices. For the iPhone version on the right, images scroll from left to right for three rows of images (Dogs, Cats, Others) rather than having a 12 images long column.
Low-fidelity prototype
In this low-fidelity prototype, all the screens for finding a pet, submitting applications, and making a donation are connected.
Click to View Hudson County Animal Shelter low-fidelity prototype
Usability study: parameters
Study type:
Unmoderated usability study
Location:
United States, remote
Participants:
6 participants
Length:
25-35 minutes
Usability study: findings
Here are the usability study findings:
Search
Scrolling
Shortcut
The search function was confusing to some users because clicking ‘Find a Pet’ was not intuitive for those who assumed that it was just the name of the function.
Because some of the screens scroll down quite a bit, user were looking for a better way to get to a specific part of the screen.
If the content refers to an external source or other parts of the website, the user wanted a shortcut.
REFINING THE DESIGN
Mockups
Based on the insights from the usability study, the ‘Find the Pet’ button was not clear to the users as the call to action button. It was just seen as a function name. I added a search button to make the next step more intuitive.
Mockups: Screen size variations
Based on my earlier wireframes, I included screen size variations for the website.
High-fidelity prototype
This hi-fi prototype includes design changes based on insights from the usability study. Additional changes and screens were added.
Click to view HC Shelter hi-fi prototype
Accessibility considerations
Landmarks were used to help navigate the site. This would especially help those who use assistive technologies
I used imagery for all the animals to help all users in their search
Different sized texts were used to establish visual hierarchy.
GOING FORWARD
Takeaways
Impact:
Potential adopters, the target users of this website, found the navigation to be intuitive and like the details of animals especially the images.
What I learned:
I learned that even though the design of the website is geared towards the user, the ones who will benefit the most are the animals in shelters.
Next steps
1.
1. Evaluate all aspects of design and functionality and identify and areas for improvement
2. Conduct additional usability tests on the website
3. FInd ways to better coordinate with the shelter for better updates