Unconditional Shelter

Matching people to pets and pets to people

Image alt tag


Problem Statement: People who want to add a pet to their household need a website that provides honest information about the animals and provides assistance in the adoption process. Most people who adopt an animal later find that the animal is ill or that the animal’s personality/needs don’t match the rhythm of the household.

Project: A responsive website that facilitates pet adoption online

Role: All phases of the UX/UI Design process

Used: Adobe Xd, Figma, Miro, Google Suite, Numbers

Timeline: Oct - Dec 2021

Unconditional Shelter

This is the key that explains the Compatibility profile


Hypothesis: People interested in adopting an animal need a website that matches people to pets and pets to people, and which provides support and information even after the adoption is complete.

Business Opportunity: A website that facilitates the adoption process online would result in more animals being adopted. This is a metric that could be measured if the website were developed and launched.


Research of the problem space and users

Quantitative: I surveyed 14 people who had adopted a pet or two in the last couple of years.

Qualitative: I interviewed 5 people, age 30-56, who have adopted a pet in the last year or two.

Competitive Analysis: I examined 5 direct and 1 indirect competitor to understand how various organizations handle the process of adoption online. The information was distilled into a Competitive Analysis Report.


From this research I was able to create

Empathy Maps
User Journey Maps

which gave me a direction.

Unconditional Shelter


Learning about the concept of 'cards' sparked a wave of exploratory sketches on how I could best use them to create a useful, beautiful, responsive website.

Unconditional Shelter

High-Fidelity Wireframes

After creating the entire set of wireframes, I conducted the first round of usability testing.

It was a remote, moderated usability test, in which I tried to keep things focused on basic functionality: that buttons were in the right place, and that people understood where to find things. Many of the people I interviewed wanted to focus on the copy.

Unconditional Shelter

The Affinity Diagram of feedback from the first Usability Study


Key Learnings

People wanted a way to contact the shelter directly, circumventing the process I’m trying to facilitate

Some folks just wanted to quickly glance at the pictures and then find the address to go check out the animals in person.

The copy was a cause for concern for some people

Some people felt that not enough info was being provided while others said there is too much to read. It was a Key Learning for me to include only absolutely necessary copy at the wireframe stage.

Some pages were designed too large

Viewers were unaware of the content below the fold.

Unconditional Shelter

Building the design out, I made sure that the animals (previously below the fold) could be seen at first glance.

After making adjustments to the design based on the feedback,
I conducted a second round of User Testing

Unconditional Shelter

This is an example of the profile that is generated from the Compatibility Quiz

Users utilize this profile to ensure a good match between people and pets.


Thoughts & Overall Learnings:

  • Knowing when not take someone's advice is sometimes tricky

  • It's never too late to change the font, but it's probably better if you don't have to

  • I was a bit frustrated by the fact that I was not able to get the Table Key and the Compatibility profile to remain on the screen (be sticky) while the background page is free to scroll and change. I don't know if that is because I am still learning Adobe Xd, or because that kind of functionality just isn't possible in the prototyping stage, but the ability to keep one's profile up on the screen while they browse animals is core to the design of this website. Even though the project is complete, it's important for me to figure this out, so I will pursue the information on how to do this.

  • It took me a minute to understand the correct proportions for things for the desktop. My tendency was to go too big with everything.

Click to see the interactive prototype in Adobe Xd

Final Version of the designs


Deliverable: Designed and prototyped screens illustrating the concept of a responsive website for an animal shelter

The challenges and how they were met

Design a website that is full of information without it being overwhelming

A simple design with five areas of engagement. The main navigation is sticky on the headers throughout the site.

Provide a way to ensure that animals and people are well-matched

The fun, quick, easy-to-take Compatibility Quiz provides the person a profile they can use to find a pet. The custom search engine asks the same questions as the quiz.

Facilitate the adoption process online

The Adoption Application is filled out and submitted online. How it Works information is clear so there are no surprises.

Provide clear instructions for the adoption process

At the bottom of every Unique Pet's Page there is a section called How it Works that delineates the process in clear language.