Role: UX / UI Designer, UX Researcher
Client: Google UX Design Certificate
Duration: Apr - Jun 2022
Tools: Adobe XD, Moqup
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.
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.
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:
Adoption sites are often outdated
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.
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.
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.
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.
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.
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.
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
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
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.
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.
With my design changes complete it was time to add the interactions. My hi-fi prototype addressed users' frustrations about transitions being unnatural or taking too long. It also provided more functionality and engaging interactions.
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.
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.
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.
“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!”
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.
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