The Product: The Animal Shelter of North Texas is an animal shelter for residents to adopt or foster any of the animals that we have staying with us. The typical user is between 20-60 years old, and most users are young adults or parents.

Project Duration: September 2022 - January 2023 (5 months)

The Problem: Available animal shelters have cluttered and outdated designs, often with an unclear scheduling system, creating a confusing user journey.

The Goal: Design a website for the Animal Shelter of North Texas to be user friendly by providing clear navigation and offering a fast scheduling process to meet your new potential pet.

My Role: UX + UI Designer and Researcher designing a responsive website and mobile app for the Animal Shelter of North Texas from conception to delivery. 

Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

Understanding the User

User Research / Personas / Problem Statements / User Journey Maps

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users treat the animal adoption process as an exciting time in life to make their home a little bigger and happier.

However, many animal shelter websites are overwhelming and confusing to navigate, which frustrates many target users. This problems transforms what should normally be an exciting experience into one that is long, confusing and challenging.

User Research: Summary

1. Navigation: Animal shelter website designs are often cluttered, which results in confusing navigation.

User Research: Pain Points

2. Scheduling: Animal shelter websites often do not have a clearly marked schedule. Users will get frustrated if they are not able to clearly see what days and times are available. A calendar must be clearly marked.

3. Experience: Animal shelter websites often don’t provide an engaging browsing experience. A simple but informative layout that is aesthetically pleasing will help users feel excited to explore.

Persona: Jessica

 Jessica is a young mother who needs to find a new dog to join her family because they can accommodate one in their new home in Texas.

Problem Statement

I created a user journey map of Jessica’s experience using the site to help identify possible pain points and improvement opportunities.

Jessica’s User Journey Map

Starting the Design

Sitemap / Paper Wireframes / Digital Wireframes / Low-Fidelity Prototype / Usability Studies

Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.

My goal here was to use strategic information architecture decisions that would improve overall website navigation.

The structure I chose was designed to make things simple and easy.

Sitemap

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and scheduling flow in mind.

Here, you can see a couple of variations of the home screen in addition to some scheduling pages.

Paper Wireframes

Paper Wireframe Screen Size Variation

Because the Animal Shelter of North Texas’ customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure that the site would be fully responsive.

Digital Wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Prioritizing images and using visual hierarchy were two key parts of my strategy.

To create a low-fidelity prototype, I connected all of the screens in the primary user flow of picking an animal and completing the adoption application and appointment scheduling process.

At this point, I had received feedback on my designs from users about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.

Study type: Unmoderated usability study

Location: United States, remote

Participants: 5 participants

Length: 20-30 minutes

Usability Study: Parameters

1. Process: Users expressed that they would have liked to have known where in the process they were with scheduling a meeting to possibly adopt an animal.

Usability Studies: Findings

2. Look: Users thought that the colors of the different pictures clashed, so we attempted to correct for that in our design of the visual layout in a redesign.

Based on the insights from the usability study, I made changes to improve the site’s look and transparency as to where the user is in the adoption process. One of the changes I made was adding a graphic at the top of the screen so that users know where they are in their journey.

Before usability study

(Low-Fidelity Prototype)

After usability study

(High-Fidelity Prototype)

Refined version

I included considerations for an additional screen size in my mockups based on my earlier wireframes. Because users browse adoption websites on a variety of devices, I felt like it was important to optimize the browsing experience for a mobile phone as well, so users have the smoothest experience possible.

Below, you can see examples from my first mockup to my latest refinement of the design of the ASNT site.

Mockups: Screen size variations and refinement

My hi-fi prototype followed the same user flow as the lo-fi prototype, I just added a lot of pages to give the site more detail. Designs after the first round of usability studies were also incorporated.

High-Fidelity Prototype

Accessibility Considerations

1. I used headings with different sized text for clear visual hierarchy

2. I used landmarks to help users navigate the site, including users who rely on assistive technologies.

3. I designed the site with alt text available on each page for smooth screen reader access

Takeaways

Our target users shared that the design of both the online website and mobile version of the Animal Shelter of North Texas was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy. They had a seamless and simple experience when navigating through the pages of the site and were able to easily place appointments for animals that they are eager to meet.

Impact

I learned that even a small design change can make a huge impact on the user experience, such as a progress bar, an icon or the way that a hover feature guides a user through the intended flow.

The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions, instead of theoretical bells and whistles that aren’t going to make people engage with the site more.

What I Learned

Next Steps

1. Conduct follow-up usability testing on new website and mobile flows.

2. Identify any additional areas of need and ideate on new features.