Pawdoption
Portfolio Project | UX Design | UX Research | 2023
About the Project
The Product:
Design a pet adoption flow for an animal shelter. Portfolio project for Google's UX Design Certificate Program.
Project Duration:
July 2023 - August 2023
Project Overview
The Problem:
Individuals looking to adopt a new pet might already have another pet or young children at their house, and they want to make sure the animal at the shelter would do well in their family dynamic.
The Goal:
To create a pet adoption flow for an animal shelter that provides users with the necessary information they need before adopting a pet, such as the pets behaviors, needs, and personality, to ensure they are compatible with their household.
My Role:
UX/UI Designer & Researcher
Responsibilities:
User Research | Wireframing | Prototyping | Creating User Stories | Creating Personas | Conducting Interviews | Iterating on Designs
User Research
Research Questions
For the research questions that would be asked in the usability study, I wanted to determine:
Usability Study
I performed moderated usability studies to conduct my research, which usually involved recording Time on Task, Drop-off rates, and having users fill out a System Usability Scale (SUS) report once they had completed the study. I then conducted competitive research to analyze the competition and see how their sites were structured, as well as looking at their reviews to see what issues users had with the interface or access.
Persona
Problem Statement
Jessica is a new mother that loves her fur babies. She needs an animal adoption website that shows the animals characteristics and behaviors because she wants to make sure the pet will be compatible with her family before adopting them
User Journey Map
Click Path
The user starts by searching for an adoption shelter in their area, then browsing for pets before finding one they like the most and clicking on their profile picture. The goal is for the user to learn everything about the pet online before they commit to going to the shelter to purchase them, reducing the pain point of driving all the way to the shelter just for the pet to not meet their expectations.
Analysis
After conducting my user research and creating my personas, I conducted a competitive analysis by analyzing the competition to identify the strengths and weaknesses of each of their sites. I also read user reviews to look for anything that mentioned negative interactions with the interface or experience.
The issues I found in the competitors’ products that provide opportunities for my design to solve were:
- Missing accessibility features (Search, filter, etc.).
- “Adopt” is not the main CTA button for any of these animal adoption websites.
I found that I could capitalize on these weaknesses in the market by:
- Adding more accessibility features so users can use the product more efficiently.
- Making the “Adopt” button/CTA more prominent as that will most likely be the main purpose for users visiting the site.
After completing the competitive analysis, I began the creation of my product starting with paper wireframes.
Wireframes & Sitemap
The paper wireframes on the left represent my different design ideas for the homepage of the app, and the image on the right is from a Crazy 8 activity where I was testing different designs for the Adopt page.
This is a sitemap for the Pawdoption app if I were to continue building it out into a full-fledged product. I analyzed many other competitors in the market that offer the same product and used their websites to build my own sitemap for Pawdoption.
Prototypes & Iterations
Low-Fidelity Prototype
After conducting the usability study on my low-fi prototype, I found 4 major pain points that needed to be addressed.
- Users were unable to filter the pet grid.
- Users didn’t like having dogs, cats, puppies, and kittens all on separate tabs as they felt there were too many options.
- Users felt the product description page (PDP) was lacking details.
- Users were unable to see the final price of their purchase before checking out.
After synthesizing these results, I found that users wanted:
- To see Dogs & Puppies grouped and Cats & Kittens grouped.
- The ability to filter pets.
- Change their address/location at any time.
- To pay for a pet online to avoid long wait times at the shelter.
Using this information, I began iterating on my designs and creating a revised low-fi prototype to test with the same group. Once finished, I began working on refining my designs and creating hi-fi prototypes.
High-Fidelity Prototype
For this portfolio project, I was tasked with creating my wireframes and prototypes for both mobile and desktop screens inside of Adobe XD. I used a Graceful Degredation approach to this project as I was tasked with building a desktop version first and then a mobile version. This was my second time using Adobe XD for a project and while I prefer Figma over Xd, I was thankful for the experience in using Adobe XD as I feel I can switch between both products pretty easily.
Mockups
My prototype was fairly similar to my wireframe, but I wanted a way to hide the filter chips, so I added a filter button in the prototype to reduce clutter. I also removed the “Adopt” button from each card and just made the cards clickable, which makes the cards look more aesthetically pleasing. I removed the hero image and added text to provide more information about the adoption process.
I created the Desktop version of the product first and then translated it to a mobile device (top-down designing) to ensure I had a responsive design across all device sizes. As you can see in the mobile device, I moved from a 4-column layout to a 2-column layout to provide a better user experience for users on mobile devices.
Final Design
Takeaways
This was my second UX Design project and the first one that I had to break away from Figma to use Adobe XD. I learned that while XD does have some nice features, I found it difficult to do other tasks that were much easier to complete in Figma. However, I’m glad that I got the experience with XD and I think it will help me in my future career opportunities.
Click this link to view the high-fidelity prototype for Pawdoption.