Town of Babylon Animal Shelter

Redesigning a non-profit organization's website to help users find the most suitable pets for their lifestyle, whether on desktop or mobile.

ROLE

  • Solo UI/UX Designer

TOOLS

  • Figma

  • Maze

  • Adobe Photoshop

METHODOLOGY

  • Qualitative Research

  • Heuristic Evaluation

  • Persona

  • Empathy Map

  • Brand Identity

  • Site Map

  • Wireframing

  • Prototyping

  • Usability Testing

TIMELINE

  • 80 hours

  • March - April, 2023

  • Prospect Project

— OVERVIEW

Background

The Town of Babylon Animal Shelter is a non-profit organization in the Suffolk County town of Babylon. The shelters care for all breeds of canines, felines, rabbits, guinea pigs, and hamsters. In addition, the shelter offers an affordable adoption fee for residents and non-residents.

Project Goals

Facilitating people by providing them a better way to see adoptable and fostered pets virtually, including when applying for adoption and fostering, and reducing the rate of stray pets.

— STATEMENT

Society Needs a Facilitator for Everybody Regardless

New York has passed a law banning the sale of dogs, cats, and rabbits at pet stores. This will help put an end to puppy mills and encourage shelter adoption. The law goes into effect in 2024.

— Governor Kathy Hochul

How might we help users adopting pets in the shelter?

Design Thinking Process

Utilizing Design Thinking in UI/UX case study offers a user-centered approach to solving design challenges and achieving objective goals.

Research

— RESEARCH FINDING

Participants Felts Extremely Challenging to Find Information Online About Adopting/ Fostering Pets

Participants found a lot of scammers during the process.

During the interview, all users found adopting/ fostering pets online extremely challenging, especially since it is hard to differentiate between a scammer and not a scammer.

Participants found the communication process frustrating because it's manually and paper-based.

During the interview, 75% of users found adopting/ fostering pets too time consuming because the process is paper-based and manually.

Participants found the picture on a few websites are outdated

During the interview, 75% of users found information about the pets color, age, size, and personality match is very limited.

— EXPERIENCE MAPPING

Both Users and Stakeholders Have Mutual Pain Points and Goals

The persona helps summarize pain points, needs, and goals. I focused primarily on two personas because they emphasized two key functions: young adults looking for pets that fit the busy lifestyle and middle-aged women looking for a cost-friendly companion.

— HEURISTIC EVALUATION

Readability and Visibility are Not Passing the Accessibility

The Summary

The Shelter's website could use improvements to be more functional and user-friendly. Users cannot directly submit applications, and the submission process is inconsistent. The Shelter uses both Facebook and Petfinder to post pets, which could overwhelm staff. Important information is not prominently displayed, and the hours of operation may make scheduling difficult. A separate website for the Shelter would benefit both users and the Shelter.

— EMPHATHY MAP

Users Emotions and Experiences are Roller Coaster

I created an empathy map to understand my customers' needs and emotions. It helps me customize my services and create stronger connections.

— SITE MAP

Simplifying Website Navigation for Users

I simplified the navigation and avoided jargon, so users easily navigate, and I improved the visual experience for users.

— LOW WIREFRAMES

Visualizing the Process of Adopting Pets According to Needs

After creating the basic information architecture, I used Figma to ideate Low Fidelity designs, ensuring accuracy in spacing and information. I organized content specific to each proto-persona. As the primary landing page, the homepage presented a challenge because shelter pets could be mixed or unknown breeds and different types of pets; I created the purpose of pets: "apartment, family, and pet that low-cost monthly budget".

Utilizing the pop-up, the screen from Pet's profile directs the user to the type of visit.

Mobile Version Reflecting Original Version with Minimizing Features

Designing mobile features following the website's hierarchy and minimizing features to improve users' eye tracking.

Creating a landing page that includes engaging visuals and follows a narrative structure.

— RESEARCH FINDING

Home and Paw = House + Pets

Website Version

Mobile Version

— HIGH FIDELITY WIREFRAME

Introducing User-Friendly Application Submission Feature

Prior to proceeding, all applications and communication were manually means the user contacted the shelter. Indeed, with limited time and technical consideration, implementing the submission and appointment features would help users and the shelter's employees communicate. This approach allows for the efficient development of the wireframe within a short timeframe

View Prototype

— USABILITY TEST

Find out what Works and What Doesn't

Test Parameters

I created a simple prototype with high-fidelity wireframe screens in Figma, focusing on the following important user flows: Pet search, Visit appointment scheduling, and Adoption application. Six test participants participated in live usability testing facilitated by Maze

Findings

All participants were able to complete the task, but some minor feedback suggested that certain text needed clarification and improvement.

— REFLECTION

Lessons Learned

1. Options and variants are key factors.

New Yorkers quickly gave up on the existing pets, finding that if they see inability pets they like available and the picture including UI elements is the key factor, they decide to see the pets "at first sight" for further details.

2. Access and simlicity is crutial in UX.

Despite the fact that many users were not adopting pets in the first place, after receiving information regarding adoption and fostering, they were convinced to do it or at least look at the website for available pets. Easy-to-use filters and information functions were important elements of the process.

3. Clarity of process and language mattered.

Users repeatedly expressed concern about knowing where they were in the appointment and application process, as well as clarifying the paper work needed for the application agreement. Simple language and intuitive phrasing were critical to getting residents to their appointments quickly.

Takeaway

Receiving feedback during presentations from fellow designers and users can greatly reduce time consumption and distribute a bigger impact. Additionally, making minor, incremental design improvements can often lead to significant outcomes.

Next Step

1. Lazy Registration for Visiting the Shelter

I want to conduct testing on visiting shelters with a lazy sign-in concept with more users to promote the traffic of visiting the shelter.

2. Simplifying the registration process

Due to time constraints, I had to limit my registration summary. I want to simplify it by one or two steps.