Take me Home!

Pawtner

A Responsive Website for an Animal Shelter that Helps Users Adopt their New Best Friend
Click Here to View Pawtner in Adobe XD

Project Overview

Overview

Pawtner is a responsive website for an animal shelter that wants to make it easy to match potential pet owners with their ideal companion. They aim to make the adoption process as simple and informative as possible for would be adoptee's. With colorful visuals and engaging user flows, Pawtner ensures users are engaged throughout the process of adopting their new furry family member.

I created this app as part of the Google UX Design Certificate. Instead of redesigning an existing animal shelter website, I imagined
Pawtner as a product that I could take from concept to completion.

Role

Role: UX / UI Designer, UX Researcher
Client: Google UX Design Certificate
Duration: Apr - Jun 2022
Tools: Adobe XD, Moqup

Responsibilities

  • UX research (user Interviews, usability studies, competitive audit)
  • Paper and digital wireframes
  • Low and high-fidelity prototypes
  • UI Design
  • Interaction design
  • Iterating on designs
  • Accounting for accessibility

Challenge

Searching for your perfect pet online can feel detached and rigid. The process feels like you are ordering goods online rather than the fun and sociable activity of finding a pet that fits into your life.

Objective

The goal of the project is to create a responsive website that will bring the shelter experience to the users' devices. With a simple and visually appealing user experience, users won't miss the opportunity to adopt the perfect pet because of stale, out-of-date adoption forms or pet information.

UX Design Process

Empathizing with the User

User Interviews

I wanted Pawtner to be a friendly and informative experience for users. The first thing I had to do was to empathize with them and gather their opinions by conducting interviews. A quick Google search told me 67% of U.S. households currently own a pet. This was a large and diverse demographic to work with so I tried to narrow it down a little further.

To find my target demographic I posted in several online forums asking for participants who recently adopted a pet or want to in the near future and who prefer to get their pets from an animal shelters rather than a breeder or pet store. Selected participants were over the age of 18 and US residents. I also was conscious in selecting my participants from a variety of ages, genders, and social economic backgrounds, but with preference on those users who responded they have looked online to search for pets, not just in person. From there I found five people to participate in an unmoderated user interview and asked them to answer the following questions:

  • How long have you been thinking about adopting a pet?
  • Is there a reason you adopt from shelters instead of pet stores or breeders?
  • How did you (would you) start your pet search?
  • How often do you look online to search for pets?
  • Is there anything that frustrates you about looking online for pets?
  • Is there anything you like about looking for pets online?
  • Is there anything else you would change about pet adoption websites?
  • If you have ever filled out a pet adoption form what was your experience like?

Identifying Pain Points

After completing interviews, I began analyzing the responses to identify common patterns so that I could find what causes users the most frustration.

The most common pain points mentioned:

Adoption sites are often outdated

One of the biggest grievances users had with shelter sites was their adoptable pets inventory was not up-to-date. They would go to look at a specific pet only to find out it had been adopted weeks ago.

Many sites feel too sterile and serious

Users complained about the look of shelter sites. They thought many of them felt cold and distant and would have preferred the experience to be more fun and exciting.

Users struggled to find adoption forms or other adoption information

Users also complained about the layout of shelter sites. They often struggled to locate an adoption application form online as well as information on how to prepare for the experience. Users wanted the shelter website to also be a place to find helpful resources.

A lot of the pets are missing information

Since users can't tell a pet's personality through a screen, they need as much information about the pet as possible. Users were especially interested in wanting to know the personality and behavior of pets.

Defining the User's Needs

User Personas

Now that I knew what my users pain points were, it was time to figure out how to solve them. To do so I had to try to get inside my user's head. I started by creating two user personas based off of the demographics and answers of interview participants to better understand and empathize with them.

User Journey Map

To further get in the mind of the user I created a user journey map. I chose to focus my user journey map on Kate and Wesley as I collected the most responses from users adopting dogs than any other type of pet.

Kate and Wesley's problem statement:
Kate and Wesley are a young couple who needs a trustworthy and reliable source to help them with their search to adopt a dog because they are first-time dog owners who need some guidance through the process.

Competitor Analysis

When gathering research for my competitive analysis I knew there would be plenty of animal shelters that would be direct competitors for Pawtner. Many of the websites I viewed seemed to use the same template or they used Petfinder as a search engine. I was careful to focus on competitors that were diverse enough to offer plenty of valuable insights. The biggest takeaways I learned through this process were:
  • A lot of the websites were not designed well. Many had poor navigation, generic styling, and unorganized page content.
  • The websites that had a lot of information for each pet were more friendly, knowledgeable, and organized.
  • Having the adoption process and forms online were valuable but often hard to find.
  • Many sites use Petfinder as a search engine because it is well designed, offers a lot of information about each pet, and provides very helpful and detailed search filters.
  • Animal shelter sites typically had the following tabs: Adopt, About, Ways to Donate/Volunteer, Services they provide, and Contact.

Exploring Solutions

Ideation Process

With my imagined user and competitive analysis in mind, I began the ideation process. The methods I chose to use were: how might we's, crazy eights, and both big-picture and close-up storyboards.

My
focus was on which elements provided the most value to users. Since I knew users would use Pawtner not only to look for and adopt pets but they would also likely use it as an educational resource.

User Flow

Now that I had researched competitors and ideated possible solutions I knew it was important to keep a well organized user flow. I wanted users to have access to plenty of information and resources, but I had to narrow it down to which elements were vital for a successful website, with content that did not overwhelm the user.

Starting the Design

Paper Wireframes

I sketched out paper wireframes for each screen in the app. Based on my previous findings, I added all the essential features and also addressed the user pain points. I played around with hierarchy and proximity of the elements until I was satisfied with the organization and the layout for each screen.

For each screen I sketched out five different variations. I used stars to mark the essential elements that would be included in the digital wireframes. I wanted users who did not have access to a desktop computer to be able to access Pawtner so creating paper wireframes for mobile screens helped visualize how the website would look on a smaller screen.

Digital Wireframes

When transitioning from paper to digital wireframes, I kept the layout fairly similar, with only mild changes made to the design.

I wanted the "Home" page to include all the content the user would likely use the most frequently. I wanted the homepage to showcase both adoptable animals and shelter credibility.

With the adoption portion of the website being the main draw for users I decided to focus on building those pages.

I wanted the "Adopt" landing page be an organized starting point where users could easily explore pets and gather adoption resources.

Like the "Home" page, I wanted the "Adopt" page and the rest of the website to include a lot of visual elements, with the highlight being pictures of adoptable pets.

Adding Interactions

Low-Fidelity Prototype

To create the low-fidelity prototype, I connected all the screens involved in the adoption user flow. This consisted of: viewing all adoptable pets, narrowing the search to only view adoptable dogs, choosing an adoptable dog, and filling out the two part adoption form. Including many points of navigation was important for an adept user flow and organization of resources. Separating the adoption form into two shorter pages instead of one long one helps users digest the from's content and should help the task completion rate.

Testing and Testing Again

Usability Test

I conducted two rounds of usability studies. Findings from the first study helped guide the design from wireframes to mockups. The second study used high fidelity prototype and revealed what aspects of the mockups needed refining.

To complete my usability tests, I gathered five participants  from my target demographic to participate in a 10 - 15 minute moderated usability test. I chose to do a moderated test as I thought it would be helpful to observe each participant's body language and tone of voice while using the app. I used this information to create an affinity map to help turn observations into insights and discover what the user's pain points were.

Pain Points Discovered in First Round:

The pet's profile page has too many similar sections

The dissolve animation between page transitions feels unnatural

Having a section for Services on the Home and Adopt page is redundant

Some elements, like adoption process seemed small in comparison

Pain Points Discovered in Second Round:

Expected search filter to work on Adoptable Dogs page

Wanted "Book Visit" button to function on pet's profile page

Struggled to tell if their question was submitted on pet's profile page

Wanted access to the adoption form without having to choose a pet

Refining the Design

From Wireframes to Mockups

After receiving feedback from users about the low-fidelity prototype it was time to address the pain points, and to do my favorite part of the process, adding visual elements.

Users expressed that they felt like some sections like the "Adoption Process", and "Adoption Fees" seemed small in comparison to other elements on the page. To combat this I added more visual elements like illustrations and photographs to help fill up some of the negative space.

Another pain point users had regarding the Adopt page was they felt the "Support Services" was redundant as it was shown on the Home page. I replaced this section with a playful and informative graphic "Benefits of Owning a Pet".

The pain point that caused the most confusion for users was the sections on a pet's profile page. Users found "Traits", "Personality", "Likes" and "Dislikes", and "About" too similar. This became easier to correct as I started adding in real text. To improve content clarity I combined "Personality" with "Likes" and "Dislikes". I also added a "Question" portal that would send an email to Pawtner for staff members to respond to any other questions that may not have been already answered on the page.

Enhancing the Design

My second round of usability testing testing made me rethink about how the users interacted with Pawtner. While participants main frustrations related to how functional the components were, I still had one other major flaw I had to fix.

The only way for a user to have a copy of an adoption form was to find a specific pet they wanted to adopt. They did not have access to a generic form. To correct this I added links to a general adoption form on the Adopt page. This will help users who plan to visit the shelter come prepared.

One of the features participants wanted to see functional was the "Adoptable Dogs" search filter. I originally intended this as a design element because with my knowledge of coding I knew this function could be done easily by engineers, but after 3/5 users tried to use this feature I knew I had to make it operational. This is also helpful in knowing if the search parameters are suitable. Other improvements made to the search feature were changing the color for increased readability and adding a "Reset all Filters" button for ease of use.

A new element added to this page were icons that displayed if a pet was new to the shelter, had been at the shelter a long time, or a pet that received a lot of views. This feature aims to help people who are looking for a specific type of pet or for pets that may have been at the shelter for a long time.

The other two features that participants wanted to see operational were being able to book a visit and to submit a question on the pet's profile page. While my main focus was making sure the adoption form was polished and fully completed I was encouraged to see that users were engaged and trying to use other features in Pawtner.

Screen Size Variations

I wanted users to be able to be able to view Pawtner from their mobile and tablet devices so I ensured the experience and branding was consistent on smaller screen sizes.

Bringing Pawtner to Life

Final Product

Accessibility Considerations

I designed the site so all text input
fields have focus visible indicators like hover effects and vertical lines to help those with attention or memory limitations.

Pawnter's color scheme is designed so users with low-contrast sensitivity and other vision impairments may use the app with WCAG standards of 7.1.

All input fields have visible borders so users with mobility impairments and those with cognitive disabilities can easily locate the click target.

All touch targets are large enough for ease of use and for users with cognitive disabilities and passes the WCAG criteria of 25.5.

Takeaways

Impact

Target users enjoyed Pawtner's bright visuals, playful imagery, and the showcasing of pets personalities. Users were able to navigate through the site and find information with  ease. They were also excited about other features of the app that have yet to be built.

What I Learned

The Pawtner website has many unique features. Originally I thought they could be represented as just design elements that could be programmed to function later. However during my second usability test participants were disappointed when these features did not work. This was an important lesson in not relying on engineers and coding to make elements functional. It is important to test features that require the user to take multiple steps, such as the "Adoptable Dogs" search filter in order to understand if the feature is useful or needs to be improved.

Designing for an animal shelter, even if it was a fictitious one, also taught me to be sensitive when it comes to designing for a variety of clients. Since the majority of animal shelters are non-profit, I wanted Pawtner to be respectful and not project any wrong or harmful information.

Quote from User Feedback

“I like that this website has so much personality! All the bright colors and pet pictures made filling out the form and reading so much better. And Pawtner, that name is too cute!”

Next Steps

Conduct a usability test to check if the new features need further refining.

Keep building out other functions which users requested.

Get feedback from an animal shelter to ensure Pawtner is respectful, truthful, and useful.

Continue making Pawnter as accessible as possible, such as making sure alt text is up-to-date.

Style Guide

Check Out My Other Project!

Bad Moon Rewards
A Customer Loyalty App for Your New Favorite Bar

Let's Connect

I’m always open to fruitful collaboration, so if you are in search for an enthusiastic UX designer, I'd love to hear from you!

Email: suzybiernat@gmail.com
LinkedIn: www.linkedin.com/in/suzy-biernat