Case Study:
Petpals: Pet Adoption Center App
This UX case study presents an app prototype designed in Adobe XD, aimed at helping animal lovers adopt a new furry friend. The prototype showcases the user flow that guides potential adopters to the right page where they can find their ideal pet. The design is also responsive, allowing users to access the app from different devices and screens.
​
I made sure to only use pictures with free copyrights from the internet for this app. I believe in respecting intellectual property rights and ensuring that the app does not infringe on anyone's creative work.
Project Overview
The Product:
This UX case study showcases an app prototype created in Adobe XD, which features a user flow for helping adopters find and connect with homeless pets. The app is also designed to be responsive across multiple devices.
Duration:
About 1.5 weeks.
The Problem:
The pet adoption center is struggling to attract potential adopters for their homeless animals
The Goal :
To enhance the appeal of the website and attract more visitors to adopt homeless animals, we focused on making it responsive and visually appealing. The website showcases the adorable animals in their true cuteness and also provides valuable information on pet care.
My Role :
Responsibilities :
General UX Designer, UX Researcher
-
Design the easy to navigate interface for users to stay on the website.
-
To provide a good flow to users so the adoption process goes easier.
Understanding The User
User Research Summary:
I conducted a user research study on a pet adoption website to gain insights on how users engage with the website and their expectations from it. I involved friends and family from different age groups to answer questions related to the research.
The findings from the study indicated that users were looking for an intuitive and user-friendly website that was easy to navigate. Additionally, they expressed a desire to see clear and high-quality pictures of the pets, along with detailed information about their age, breed, personality, and health.
Pain Points:
1.
Users found the original website to be cluttered and difficult to navigate.
2.
Users require more comprehensive information on the pets they wish to adopt, rather than having all the information in one forum page that is difficult to navigate and target specific details.
3.
The website currently only provides a contact number, which is not always answered promptly. Therefore, users have expressed the need for a comprehensive and easily accessible contact page with multiple ways to contact relevant personnel.
Persona:
Problem Statement:
Jenny is a dog lover who needs to find a website has more info on the adopting pets
because she wants to adopt one to her new home.
User Story:
Start Designing
Side Map:
The Logo:
I designed this logo using Canva, a great website that provides a wide range of design elements.
My concept for this logo was to showcase the idea of dogs and cats living together under one roof. I searched for the perfect tag to represent this idea and chose two adorable animal icons. Finally, I added the names of the website to complete the logo.
Paper Wireframes:
Digital Wireframes:
Desktop version
Mobile Version
We aim to capture the attention of true animal lovers by showcasing high-quality pictures of our pets, and use this to motivate them to browse through our animal collection and consider adoption.
To improve readability and save space, the information displayed on the dog card in the mobile version will be arranged vertically instead of horizontally.
Low-Fidelity Prototypes:
Usibility Study:
Study Type:
Unmoderated Usibility Study
Location:
Sweden
Participants:
3
Length:
20 minutes
Findings:
1.
The page of pet detail information could be floating on the pet adopt listing page.
2.
The pictures of the pet should be able to be enlarged.
3.
Could have one big button to call the action on the hero picture.
Refining The Design
From Wireframe to Mockups:
Before Usibility Study
After Usibility Study
I integrated the pet information detail page into the pet adopt list page to create a more seamless and efficient user experience. This eliminates the need for users to navigate to a separate page, resulting in a smoother and more straightforward user flow.
Before Usibility Study
After Usibility Study
I added a button to the hero picture on the homepage to provide users with an additional way to access the pet list.
Desktop Mockups:
Mobile Mockups:
High-Fidelity Prototype:
Accessibility Considerations:
1.
I incorporated a flying-out animation to make the user flows smoother and the browsing experience easier.
2.
I use different heading for clear hierarchy.
3.
I maintained consistency throughout the website by using the same navigation and footer on every page, with the logo located in the top left corner. This ensures a seamless user experience and easy navigation.
Going Forward
Take Aways:
Impact:
Feedback from my friends and family, who participated in my case study, was overwhelmingly positive. My friend Ivy mentioned that the high-quality pictures of the pets on the website made her want to learn more about them and possibly adopt them.
What I learned:
I thoroughly enjoyed using Adobe XD to create my pet adoption website prototype. It allowed me to translate my ideas into tangible designs and effectively organize my thought process. Through the various panels and stages of development, I gained valuable insight into the design thinking process and was able to apply theory to practical implementation.
Next Steps:
1.
Conduct another round of usability studies to address more user pain points.
2.
Have the other separate pages completed.
3.
Conduct more user research, to see what’s more to make the app easy to the user.