Overview
Proj Name: Dallas Pets Alive! Adoptable Pet Listings Page
Date: 08/24/18 - 01/15/19
Platform Mobile and Web Browser
Key Performance Metric: Average Time on Task, Website user retention, visits to webpage
Metholodology: User Interviews, Wireframe Testing
Role: Colin Curley UX Researcher/Designer
Dallas Pets Alive!
The Problem
Dallas Pets Alive needed to re-design listing pages to better showcase a larger number of pets. This would connect potential adopters to the application pipeline in a shorter user flow and ultimately result in more adopted pets.
The User
Early in the process, I knew I would need to speak with users to gain a better understanding of the points of friction they encountered when visiting the site. Based on survey data provided by the research team, I developed two separate personas to assist in finding candidates to perform testing sessions with the evaluate the current page and wireframes.
The survey revealed users had prioritized information on the pet's compatibility with other pets and children. The next qualities users wished to be able to view was pet's medical history and energy levels.
Testing
Using personas I developed with the assistance of the UX research provided by DPA, I was able to recruit users to test the current site. All of the users I interviewed prior to testing mentioned that in the past they had used adoption sites to find the next pet they were interested in, but only wanted to fill out adoption forms once they had the opportunity to meet the pet in person.
Upon entering the site, many users were able to successfully navigate to the animal listing and profile page but expressed that finding details about the animals was strenuous because of the dialogue-heavy profile pages. Users also had to make 2 clicks to return to the listing page and had to scroll very far down the page to see the full list of available pets. With these findings in mind, I returned to the wireframes of the site and began designing based on my following observations:
• The listing grid would have to accommodate 100+ pet profiles
• Great deal of negative space in the margin of the listing
• No filter capabilities to sort listings
• Profile pages were very dialogue-heavy and did not clearly communicate pets' characteristics
Design
I took the data I was able to gather and used it to generate a wireframe of both the listing and the profile pages. The wireframe featured a clear call to action for the adoption app request and a grid that was able to display 150+ pet profiles in a consolidated format. I also created a search filter that would allow users to better sort pet profiles that fit their preferences.
To make it easier to scroll between desired profiles I included a right and left arrow on the side margins of the page, allowing users to scroll between profiles. This allowed users to easily view more filtered search results of pet profiles.
When I tested this version, it allowed for users to better organize pets in accordance with the user’s needs. It also increased the visibility of the details for each pet. The additional columns allowed for easier viewing of more animals with less scrolling. If they found an animal that they wanted to adopt, they would be able to directly schedule a meeting and/or request an application form.
Results
Since the implication of my design changes, the site saw an increase in user retention by approximately 200%. By prioritizing user feedback and integrating their feedback into my design decisions, I was able to create a more user-centric database for the community to find their next fur-ever friend.
Given the opportunity to continue my work on the site, I would like to focus on the usability of the events page of the site. During my user testing sessions, the users consistently mentioned they all wanted to meet an animal in person prior to applying and had primarily used websites to arrange pet meetings prior to applying for adoption.
