HALO Animal Rescue

A class project at the University of Arizona to come up with a case study that uses responsive web design (RWD) to redesign a non-profit site.

My Role

UX Researcher & Designer

(Product Strategy, User Research, Interaction and Visual Design, Prototyping & Testing)

Tools Used

Figma, Miro, InVision

The Problem

Animal adopters want to quickly access, gain useful insight about, and feel emotionally connected with the dogs at the HALO Animal Rescue so that they can confidently move forward with the adoption process by supporting animal-rescues and finding a companion that fits within their lifestyle

The Solution

Redesign the HALO Home & Dog pages to enhance the visibility of pets currently up for adoption. Make it easier for potential adopters to see which dogs match their criteria to speed up the adoption process.

Ethnographic Research

The ethnographic research we conducted was critical to the design thinking process. Our two person team interviewed the stakeholder, conducted a survey, and performed in-person interviews, the data collected provided us the information we needed to redesign the site.

Stakeholder interview

The primary purpose of HALO is not to simply justifying its existence as a non-profit but rather to adopt out animals. This was the differentiating factor from some of the competition we observed.

Surrender to adoption needs to be quick!

Mobile site needs work

Adoption is #1 focus

Visual access to pets

More visuals please

Poor interaction

Survey

EDIT - surveyed 91 people and wanted to know:

Why people were adopting a shelter pet versus going to a breeder or pet store.
Factors people consider when adopting a pet.
Overall expereince in looking for a shelter pet in the past.
Likes and dislikes of pet adoption process.

In-Person Interviews

We wanted to understand how people were interacting with the HALO animal rescue site to include their motivations and their pain/gain points.

The purpose of the in-person interviews was to understand:
The top 3 criteria people use when trying to match with a dog.
Interactions/usability on the halorescue.org home and dog pages.
Secondary motivations for why Individuals might visit the site in the first place.

Research Revealed...

After surveying 91 participants, conducting 6 user interviews, and a stakeholder interview we used affinity mapping to help organize the feedback. This revealed common themes in the collected data. Several major trends were identified to implement in the design process.

Screen Shot 2022-09-26 at 10.23.03 AM.png

Screen Shot 2022-09-26 at 10.23.23 AM.png

Screen Shot 2022-09-26 at 10.24.31 AM.png

Screen Shot 2022-09-26 at 10.24.02 AM.png

Project Sketches

We tasked ourselves with designing sketches based on the user’s motivation for visiting the site. Based on our extensive discussion we combined different parts of our drawings as a representation of what the user was looking for. From there, we ended up putting together a lo-fi prototype using Figma.

Screen Shot 2022-09-26 at 10.38.11 AM.png

Screen Shot 2022-09-26 at 10.38.37 AM.png

Screen Shot 2022-09-26 at 10.38.59 AM.png

Lo-fi Prototypes & Testing

We designed the site with the user persona in mind. We included prominent and engaging photos, detailed description of the pets, ability to quickly scan information, pet videos, provided a sense of the dog's personality, quick matchability with a pet, "about me" from the dog's perspective.

After initial testing of the site users reported they wanted:

Primary nav bar to search for adoptable dogs.
The pages to look really friendly.
Clarity on "featured pets".
Clarity on "temperament".
Immediate detailed bio.
Filter for specific details
Shelter location and distance to current location.
They liked the video followed by pictures.

Screen Shot 2022-09-26 at 12.48.58 PM.png

Screen Shot 2022-09-26 at 12.49.14 PM.png

Screen Shot 2022-09-26 at 12.49.50 PM.png

Screen Shot 2022-09-26 at 12.49.33 PM.png

Screen Shot 2022-09-26 at 12.50.07 PM.png

Style Guide

EDIT TOO WORDY - Desert themed. Earthy tones and feels. Informed color choices of muted colors. There were pops like you’d see in the desert.
Strong call to action font used sparingly.
Other fonts, easy to read sans-serif body copy light familiar easy to read.
Secondary display chose serif friendly approachable – conveys compassion. Users are compassionate and they want to feel welcome. Dogs names, about us, etc. were in the serif headline.
Photography – users wanted to connect right away with the dogs. Action based photography.

Design Evolution & A/B Testing

What did A/B testing reveal?

Desktop & Mobile Designs

Check out my demo on the newly designed site using Figma!

Directions & Ideas for Future Development

1. Add more video elements for frequently asked questions.

2. Video tutorials on shelter building and tortoise care.

3. Create calendar of events for fundraisers, workshops, etc. to facilitate desert tortoise education amongst the local community.

4. The adoption process to exist over multiple pages to include an interactive experience. For example, incorporate a progress bar indicated what step you're at in the adoption process.

5. When first starting the adoption process display an animated tortoise who says “wait a minute, have you created my habitat yet?” A response to this question is presented with a menu selection for "yes" or "no" leading the user through a more informative step-by-step path on creating an appropriate habitat.