Paws
Pet Adoption Website
OVERVIEW
Paws is a non-profit association, it partners with animal shelters all over the country to raise awareness and foster discoverability of pets waiting for a home. Its goal is to encourage a culture of adoption vs. purchase and animal breeding. Every year 6.5 million cats and dogs enter animal shelters and only 3.2 million get adopted, the remaining have to be euthanized due to shelters’ inability to sustain them.
CLIENT: Paws Non-Profit Animal Shelter
TIMELINE: 110 hours
CHALLENGE
Paws is in need of a Responsive website with key features such as Animal Search, Animal Information, and ability to set up a visitation. It’s also desperately in need of branding and logo services.
TOOLS USED: Sketch, Figma, Invision, Paper & Pencil.
ROLE: UX/UI Designer
EMPATHIZE
Learning from the Competition
First things first, I had to know what I was going to be looking for to start asking the right questions. Since this is a Responsive website project, my main goals are the following:
Goal
Learn what motivates people to adopt vs. buy pets
Define who’s the target audience
Understand user’s expectations when visiting Paws’ website
Understand users' motivation to use Paws’ website
Methodologies
Market research to learn what other animal shelter websites are doing, what they aren’t doing but users expect to find.
1:1 Interviews
Usability testing on the final low fidelity prototype
These methodologies lead me to get the answers I was looking for. I conducted Market Research by looking into 3 websites: Boone County, SPCA Cincinnati and Kenton County Animal Shelter. Two of them are government websites, and the animal shelter is just one of their many sub-categories, they are not solely focused on Animal shelters which is why it was a bit of a hassle to access information. Overall the strengths of the websites relied on having complete information about adoption fees, some information about the animal’s personality, which is where I found an area of opportunity to improve.
I listed below the main areas of opportunity I discovered while performing Market Research.
Areas of Opportunity
1. Offer users a straight forward pet adoption process
2. Ability to fill out and submit forms online
3. Offer users a full detailed description about the pet
4. Inform people about pets and what supplies they’ll need
Gathering Valuable Insights from User’s Perspectives
Interview Insights
After doing Market Research I needed insights from people who had a recent experience adopting pets, people who had pets, or even people who were interested in getting a pet in the near future. I Interviewed 5 participants between ages 30 to 64 years.
“Make sure to meet the pet in person, and take your kids to see how they interact, look out for any red flags.”
Website Needs
Participants mentioned that it’s all about the feeling you get when you meet the pet in person. That’s why I figured it might be a good idea to include a video of the pet, that might make them see has they interact, and what kind of personality it has. Due to allergies people suffer, space limitations and many other reasons, users need a specific pet breed, that’s why it’s important to offer an option to browse by filters.
Motivation to Adopt
By adopting and avoiding to purchase a pet, people get a sense of
satisfaction, and of course love to share with friends about the pet they rescued.
Being part of a community or even a movement dare I say.
Motivation to use Paws’ Website
Find animals they’re interested in, go through a screening process based on user’s pet needs using filters, with the advantage of doing it in a faster manner.
DEFINE
Potential Paws Users
People who have adopted a pet recently, people interested in adopting in the near future, people with pets.
User Needs
After having done Competitive Research and 1:1 Interviews I was able to define what the users’ needs and motivations were.
When visiting Paws’ website, people’s expectations are to find easy access to the main tasks
Adopt
Information about animals
Forms
Volunteer & Foster
Surrender a Pet
After Defining what should be at plain sight on the Navigation Bar, the page fold is what’s the main focus, what users will decide if the website will be able to meet their needs. Paws’ main goal is to encourage a culture of adoption, that’s why I focused on it before the page fold.
Who are Paws’ Users?
After having done Market research and Interviews, I was able to identify Paw’s Persona: Amy Smith. According to research I did, what many people had in common is that their pet lives indoors with them, and it’s considered a member of the family, most of them recommended to go meet the pet in person a couple of times before deciding to adopt. Amy fits in because she sees her pets as a member of her family, she took her time when she decided to get a pet,
and she needed to see it in person before making the decision to adopt a pet, because it was all about the “spark” she felt.
Creating Structure
After creating a User Persona: Amy Smith, I did a couple of tries for the Sitemap, trying to map out how the website would work. And of course always thinking about “What does Amy need when browsing for a pet to adopt?”.
IDEATE
Sketches
After learning user’s needs by doing market research and 1:1 interviews, I gathered important insights and applied what I learned in the sketches.
Low Fidelity Wireflow
After having a fun sketching brainstorm session, I came up with different layouts for the Homepage, then selected the layout that best met user’s needs which focuses on pet adoption. Since Paws’ main focus is creating a culture of adoption, I designed a section before the page fold, focused on adopting 3 different animal categories. After the fold, the next section is focused on educating users, they can click “Learn More” and find information about pets.
I really enjoyed creating a Wireflow for my screens, it helped me explain to my mentor in a direct and clear way how my prototype would work, which were the main tasks I’d assign to participants, and what the main paths were to complete the tasks.
The 3 Main tasks the Wireflow follows are:
Imagine that you want to adopt an animal, you’re not sure about what kind, you log in to Paws website and see a cat that catches your eye. 1.
You realize you know very little about cats and decide to Learn about them.
You also want to figure out what Stuff you’d need if you got a cat.
Browse for a cat to adopt and contact the adoption shelter to arrange a meeting.
Low Fidelity Responsive Wireframes
After having defined what the Desktop-Homepage should look, I went ahead and designed the tablet and mobile viewports, and included annotations on each design to be as specific as possible so anyone who’s involved in the project can understand.
DESIGN
Branding
Final Logo and Favicon
The logo shows a puppy and a cat with their tails interlacing forming a heart. And the Favicon on the right side is a simplified version of the logo, that shows only the tails. I thought this was a good option for smaller viewports, the fidelity won’t be lost,
Logo Design Process
The Logo Design process was long, I kept iterating, made so many different versions of the logos, until I reached an acceptable one. I thought about what adjectives best described Paws and went with friendly, charitable, safe and hope.
I had started off with a logo that used only the word Paws, but then got excited
about the other possibilities and kept exploring towards the animal tails. I first did a couple of cats interlacing tails and then thought about what message that would send “Is it a cat-exclusive shelter?” the answer’s no, so I kept the same idea just started exploring with other animals.
Creating Guidelines
I worked on Paws’ Logo and UI Kit simultaneously, because I wanted to get a better idea of the colors I’d be using for the logo and how that would look against the website’s UI. I created a UI Kit to follow the Branding Guidelines and to have consistency all across Paws’ website. It was pretty simple to do in theory,
but I faced a challenge later, when applying the UI Kit to my High Fidelity wireframes. The challenge was to make the colors work together, and create an aesthetically pleasing design.
High Fidelity Responsive Wireframes
during the whole project. The final design has more consistency, not too many colors, I used coral and a very light gray as the main colors.
I probably designed seven different versions of the homepage screens, below you can see the final result. Like I mentioned earlier, creating the UI Kit was easy, but implementing it into the High Fidelity Wireframes was the biggest challenge I faced
Initial Design
I started with a darker background, and outlining each item. After further exploring and iterating, I arrived to the conclusion that what was creating such a heavy look was the light gray background, and by making it a lighter shade, it was easier to move forward. I also got rid of the outlines, they didn’t seem necessary and made the design look saturated.
I also made other modifications, such as making the Main Menu taller to give the words more “breathing space”. I also decided to modify the second block “Ready to take a pet home” by using the image as a background, which I think turned out well. That way it made the design look like it flows, instead of moving from one box to the next.
TEST
Prototype
After having defined what paths users would be taking with the tasks I assigned, I made a Low Fidelity Prototype using Sketch and Invision.
Total Participants: 5 - 3 Men and 2 Women
Age Range: 29-64 years
Completion Rate: 5/5
Assigned Tasks:
Learn About Cats
Learn what Stuff you’ll need for a cat
You’re looking to adopt a cat, browse for one that catches your attention, and contact the adoption shelter to schedule to meet.
You can also Learn about Paws
Test Summary
The test was successful, meaning that the tasks I assigned were fulfilled by every participant with minor trouble.
Some areas of improvement in the Prototype are:
Ability to select each filter individually when browsing for a pet to adopt.
Ability to use the Adopt Category in the Navigation Bar