This is the key that explains the Compatibility profile
Unconditional Shelter
Matching people to pets and pets to people
Introduction
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
Background
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.
Empathize
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.
Analyze
From this research I was able to create
Empathy Maps
Personas
User Journey Maps
which gave me a direction.
Ideation
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.
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.
The Affinity Diagram of feedback from the first Usability Study
Testing
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.
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
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.
Iteration
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
Summary
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.