Project Overview
Animal Shelter Website
The Animal shelter website is a website that lets you browse and start the adoption process of many animals. It includes unique features such as animal profiles and multiple images. The website targets audiences who want to start the adoption process online rather than visiting in person.
My Role: UX Designer
The Goal: Design a website that allows people to easily browse and adopt an animal with plenty of information and visuals to view.
Duration: July 2022 - August 2022
User Research - Pain Points
I conducted interviews and made empathy maps to understand the users I’m designing for and their needs. A Primary user group that I identified was adults with physical disabilities who were not able to go in-person to look/adopt an animal at the shelter but wanted a similar experience when online.
This user group highlighted different factors that contributed to limited adoptions at animal shelters. Problems such as wanting multiple images that are clear as well as videos and wanting basic information about the animal available to see without entering into its profile page were all challenges the user group faced which put them off from adopting online.
1
Accessibility
Adults with a physical disability are not as easily able to visit a shelter, they want a quick and easy website to use.
2
Images
They want multiple images of animals and for them to be clear as well as have some videos too.
3
Information
They want the animal’s basic information available to read when scrolling through the website instead of having to enter each animal’s individual page.
Digital Wireframes
As part of the initial design phase, I deigned screens based on feedback and findings from user research.
I included a navigation bar with clear headings and a drop down menu as well as large pictures that make the website attractive and more engaging to use.
Using the user research, I created a screen which shows a scrollable page with mini profiles of animals with some basic information about them.
Refining the Design - Mock-ups
Based on the insights from my usability study I made changes to improve the navigation back to the home page. Before the usability study, the paw logo did not have any indications it sent you back to the home page. After the study I added a hover state where the logo is highlighted and the word “Home” appears below.
Before Usability Study
After Usability Study
Another change I made was to the adoption application process. Before the usability the adoption form process did not indicate where the user was on the journey of completing the process. After the study I added icons to clearly display to the user where they were and what would come next in the process.
Before Usability Study
After Usability Study
My Final Design
High-fidelity prototype
Takeaways
Impact
The Animal Shelter website enables users to feel that their needs have really been thought about and listened to. The website helps users interact with the website in a personal and more meaningful way.
What I Have learnt
I have learnt that your first design definitely won’t be your last design and how valuable user research and usability studies are to refining your design and improving it.