Project One

Asset 1.png

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.

Humane Society NoVa.png

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.

Cute dog walking.
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."

cute kitten

"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

FCAS Style Guide.png
Falls Church Animal Rescue.jpg
FCAS.jpg

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

Adoption Questionaire.png

After

Page one of questionaire
Page two of questionaire.
Page three of questionaire.
Page four of questionaire.
Findings

50% of users were confused on next steps.

Before

Pup profile page

After

sadie after.png

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.