Project One
Problem
Many animal shelters add all of their information to the homepage making it very busy and hard to find the most important information.
Additionally, most adopters already have in mind the gender, age, and size of the animal they all looking for but spend excess time browsing through page after page of animals that don't fix their criteria.
Example: The Humane Society of Northern Virginia has a busy homepage with a menu bar that doesn't have clear verbiage. The lack of hierarchy makes it difficult to quickly see what is most important.
Solution
To create a webpage for a local animal shelter that only showcases the most important information on the homepage. One that has a clean design and an organized navigation.
In addition, create a feature that potential adopters can easily use to narrow down the list of available animals based on their wants.
Design team
Solo project, conducting user research, branding and UX/UI design.
Mission
Create website that allows potential adopters to easily find available animals.
Time
This was a two week engagement.
User Research
I talked to 12 of my friends, family and shelter volunteers who have previously adopted an animal from a shelter. Two main themes emerged from my research.
1. Finding the information they were looking for on the website was frustrating.
2. Users had to browse through animals that did not fit their criteria.
Frustrated with lack of organization on website.
Users already knew the type of animal they were looking for.
"Yes the shelter we adopted from has a very chaotic homepage which made it hard to search for dogs or find a dog we already had our eyes on."
"Poor communication let an ideal dog slip away."
"Every page told us to contact a different person if we wanted to adopt. Very confusing."
"Yea we knew we wanted a young and small dog but we didn't have a preference on gender."
"Finding the perfect dog just took a long time."
"I wanted a large, male dog."
"We were searching for a small female dog because we thought it would be a good fit for our other dog tasha."
Creating a Style Guide
I choose these colors because I wanted this website to have a bold color palette that was calming and not over stimulating.
Because of the bold colors of the website, I wanted the typeface to be simple, easy to read and accessible. I choose Helvetica Neue.
High Fidelity Prototype Testing
Participants
6 users who have previously gone through the adoption process at different animal shelters. Interviews were conducted over zoom using screen sharing and XD prototype.
Findings
100% of users commented on wanting to be more specific with their requirements when answering the four questions.
33% of users did not complete task because they did not have a requirement for one or more of the questions.
Before
After
Findings
50% of users were confused on next steps.
Before
After
Revision:
Added a CTA to eliminate possible missed communication.
Happy Path Prototype Video
What Would I Change?
This was our second project in the Google certificate program. I have learned a lot since completing this design. Here are some of the updates and improvements I would make if I was currently working on this project.
replace carousel on the home screen with one picture.
Auto forwarding carousel's are difficult for people with low mobility to click on. They also cause "banner blindness" resulting in a decline of user interaction by 40%.
The importance of a contrast checker.
I currently use Adobe XD and Figma for wireframing and have installed the Stark plugin on both platforms to check that each screen is legible according to WCAG guidelines.
Style guide
If I was currently working on this project I would have taken more time to build out the style guide, specifically the UI components. At this point in the certificate program we had not learned about hover states, steppers or input fields. I would like to design these in the style guide to offer a more cohesive look.
Buttons
Now that I have completed a few projects and conducted user testings, I've seen the difference creating a hover layer over a button can make. It is easier for users to see what is clickable and what their next steps could be.