Petful
Petful is a non-profit organization helping shelters nationwide bring awareness and discoverability to pet adoption.
Overview
Shelters across the country need help to raise awareness and Petful helps foster the discoverability of pets waiting for a home.
Problem
We want to know the process users take while searching for and finding potential animals to adopt so that we can understand how to improve the adoption process and the necessary steps needed for a shelter and a potential owner.
Research Goal
Client
Designlab Brief
End- End UX/UI Designer.
UX Researcher
Role
Duration
80 Hours
Prototype (Will open in new tab)
01 Research
03 Design
04 Test
05 Conclusion
02 Define
01 Research
Methodology
I compared for-profit and non-profit pet adoption programs and search engines. I used this as an opportunity to gather insights on UI design and helpful features for users during the pet adoption program.
Competitor Research
Key Takaways
Use of bright, captivating colors
Most sites had UI weaknesses in header navigation bar
Compelling pet information/picture drawing user's attention
I conducted 3 in-person interviews and 1 virtual interview lasting approximately 30 minutes each. Users had either 1.) completed a pet adoption (recently or in the past) or 2.) had started the pet adoption process. The ages ranged from 20-30 years old.
During interviews, the goal was to learn more about the adoption process step-by-step and how users make decisions influencing the actions they take during the pet adoption search.
User Interviews
Motivations
A new companion that can make a house feel like a home
Past experiences with family pets influence the want for another one later in life
Goals
Do not want to get too stressed or discouraged by the adoption process
Give an animal the best life possible
Pain Points
After submitting application, the process is confusing
Looking at multiple sites with a small amount of pets available for adoption is tedious
Research: Key Takeaways
There is a lack of communication to the potential pet owners during the adoption process/search that discourages the user from continuing the search all together.
01
Quick adoptions can lead to owner feeling overwhelmed and unprepared to bring home new pet.
02
Social media is a powerful tool in pet adoption. The use of social media drives a user to diving back into the pet adoption search.
03
From observations and insights, HMQ were brainstormed giving direction for further design steps.
How might we ?'s
How might we use social media to encourage young people ages 20-40 to explore available animals?
How might we provide information to users during the adoption process in order to reduce informaton overload?
How might we incorporate more communication between shelters and users for a more cohesive and stressfree adoption process?
How might we encourage users to expand their criteria during an adoption search without interrupting their quest to find pet?
02 Define
Personas
Drawing general themes, pain points, motivations from user interviews contributed to the user personas. During the user interviews I heard about struggles user’s are experiencing and developed a user experience in two personas encompassing daily struggles or overarching goals.
User and Task Flow
Key Features were vital in developing the site map, narrowing down the direction of the website based on which features most beneficial to users. The features which aligned with user and business goals such as pet search and application checker had higher priority when the site map was being created. I want to create a solid foundation for users to be able to explore, starting their adoption search and revisit which would allow for more fun and compelling features to be added later. Click the link below to view site map (Will be directed to a separate tab)
Site Map
Based on the approximate layout of the site and key features 3 user and tasks flows were focused on during the design process
Search for pet profile
Find a “how-to-guide”
View status of pet application
03 Design
With time constraints during this design project, I focused on two major key features that would showcase compelling designs for the new responsive website.
Search for pet profile
Find a “how-to-guide”
View status of pet application
The dashboard, pet search and application dashboard were the key screens sketched out. The sketches were originally tailored to a mobile screen rather than a tablet creating discrepancies while I was wireframing a tablet screen first. This challenge showed me for future projects, it would be beneficial if I either 1. started with a mobile-first design or 2. committed more time to creating sketches in the screen size needed.
Sketches
Mid Fidelity Wireframes
After sketching, designs were digitized using figma with focus on key screens then incorporating other key features. At this step, the strengths and weaknesses of original sketched layouts came to light and reworking of features started.
Another requirement for this design project included developing the brand image and logo design for the Petful.
Brand Values were created, influencing the typography, color palette and logo design
Caring
Happiness
graditude
belonging
Compassion
UI Design
Roadblock: During UI design process the logo had to be revisited throughout the design process based on peer and user feedback to adequately showcase the brand.
High Fidelity Wireframes
For this Responsive site, I focused on the user flow: view pet application on profile when I designed the mobile screens. I did not have time to make all tablets screens into the mobile format. I focused on this particular user flow due to the probability a user will be on the go and want to check in on the application, not having access to the tablet left at home.
Click link below to view Prototype
04 Test
Usability Testing
3 users had to complete 3 tasks using a figma prototype. Testing was either performed remotely over zoom or in person where I could observe the user.
Prototype usability results were analyzed with 3 metrics:
Time to completion: Tasks took users <2 mins to complete
Success rate: All users successfully completed all tasks with no assistance
Hardness rate: When asked to rate the difficulty of the tasks on a scale of 1-5 (5 being the most difficult), all users rated the tasks as a 1.
Header Expansion
Confusion for user to locate application section, user's gave feedback to include dropdown menus in the navigation bar in order for the clearer direction
Personal Profile Screen
More details recommended for a cohesive profile such as address, preferred phone number etc, Users did not feel like enough information was included on the page
Usability Testing Results
Application Status Bar
users were confused regarding steps left to go in application status process
added a visual and text component to give clear up confusion
05 Conclusion
Due to time constraints, some features could not be included in the MVP, upon expansion features would be added to offer more than most competitors. My main focus during the project within the time given, was to design a user friendly search module to promote adoption across shelters nationwide.
Features which would be focused on in the future are highlighted below in the original key features list
