Westside Animal Shelter

Streamlining the adoption process

Westside Animal Shelter is a mock animal shelter that utilizes its online presence to promote adoption. Typical users are of various adult age ranges who are looking to adopt a dog or cat.

THE PROBLEM

Users want to easily customize a search for a pet and submit an adoption application online

PROJECT DURATION

Started and completed in March 2022

MY ROLE

THE GOAL

Sole UX researcher and designer from conception to delivery

Create a responsive website that provides a straightforward online adoption process for prospective owners

RESPONSIBILITIES

User research, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, design iteration

Getting to know the user

I discovered that most users prefer to check for available pets online before deciding to visit a shelter in person. Many animal shelter websites also do not offer email/text alerts or more than a couple, if any, pet search filters. Without alerts, users have to frequent shelter websites to discover newly available pets, which can result in users abandoning the process altogether.

Pain points
  • Application. Many animal shelter websites don’t provide an easy option to apply to adopt online or submit an application to keep on file.
     

  • Customization. Search filters and pet descriptions are often limited with minimal pictures.
     

  • Features.  Shelter websites commonly lack features such as pet alert emails to entice potential adopters and aid in their search for an animal companion. 

Persona

Iris is an outgoing person and an animal lover, who needs to personalize her pet search because she wants to adopt a socially and physically energetic companion.

S2 Persona.jpg
User journey mapped for the Iris persona

The Iris persona's goal is to review pet profiles in depth and apply to adopt.

User journey S2

Early designs

Sitemap

Lack of a straightforward online adoption process was a primary pain point for users. I created a sitemap to include online applications not only for adoption, but also fostering and volunteering. 

 

My goal was to call attention to the website’s main features and organize information for an intuitive user experience.

Sharpen 2 sitemap.jpg
Paper wireframes

I sketched paper wireframes of my primary user flow’s screens, focusing on a smooth navigation flow and addressing user pain points.

 

The various homepage sketches highlight the website’s main features

S2 paper frame A.png
S2 paper frame B.png
S2 paper frame C.png
S2 paper frame D.png

Asterisks mark the features of each sketch that were added to the initial digital wireframes

S2 refined paper wireframe.png

Refined paper wireframe

Paper wireframe screen size variations

The website layout was also adjusted to fit a mobile screen for a responsive design. This allows potential adopters to comfortably access the website on various devices.

S2 paper desktop framed.png
S2 paper mobile framed.png

Digital wireframes

In the digital wireframes, the navigation bar features important website functions.

Buttons for quick access to main features

S2 lowfi home framed.png

Previews of the website's important pages

Digital wireframe screen size variations

The mobile version features main page previews in a carousel for easy access that also saves space

S2 lowfi home framed.png
S2 lowfi mobile home framed.png

Carousel added

Low fidelity prototype

Screens of the main user flow of browsing available pets and submitting an adoption application were connected.

 

Based on peer feedback, changes to the homepage layout and button sizes were made.

Sharpen 2 lofi prototype.png

Usability study

The low fidelity prototype above was tested in an unmoderated usability study.

Main findings:

  • Status tracker. Users had trouble finding the Track Application page.
     

  • Pet description. Users wanted to confirm that pet profiles would have information on a pet's history and personality. Lorem Ipsum text was used as a placeholder in the low fidelity prototype.
     

  • Adoption Menu. Users preferred a hovering cursor to expose dropdown menus in the navigation bar over a a mouse click.

Refining designs

Mockups

Before usability study 1

I moved the link to the Track Application page based on insights from the usability study. Under the hamburger menu icon, Track Application is now in a location that makes more sense.

S2 lowfi desktop home menu framed.png

After usability study 1

S2 hifi home hamburger menu framed.png

Before usability study 1

(need mouse click)

S2 lowfi desktop home menu framed.png

Additional study insights influenced a more intuitive change to the navigation bar's animation. The dropdown menu is exposed when the cursor hovers over a button rather than having to click to view the menu.

After usability study 1

(when cursor hovers Adopt)

S2 hifi home updated menu frame.png

Mockups: Original desktop screen size

Screenshots of the desktop version's main pages.

S2 hifi screens

Mockups: Screen size variations

As target users utilize various devices, a mobile screen size was also designed to ensure a seamless experience.

Desktop

S2 hifi desktop home

Mobile

S2 hifi mobile home

High fidelity prototype

My high fidelity prototype included changes made from usability study insights.

S2 hifi prototype simpler.png
Accessibility considerations
  1. Visual hierarchy
    Text was organized with different sizes and weights to indicate importance.

  2. Color contrast
    Colors with high contrast were used for improved visibility and to accent website features.

  3. Landmarks
    Landmarks were included to assist in navigating through the website.

Going forward

Impact
  • Target users had minimal issues navigating between screens

  • Research tasks were completed without difficulty

  • The majority of users maintained a positive attitude throughout the study

What I learned

Small details can make a big difference on whether a user has a challenging experience or not. Study insights are vital in gaining valuable feedback on which small details need improvement. 

Next steps

1. Further refining

Further improve on visual design and conduct study to address any vagueness in design and function

2. Feedback from peers

Gain feedback from peers with a focus on visual elements