Case Study:
Case Study:
Adopt A Friend
Adopt A Friend
Mobile App/Responsive Website
Mobile App/Responsive Website
Embedded Files
Pet adoption website that helps users find pets up for adoption from shelters, rescues, and private homes nearby. Adoption process is very easy to understand and applications can be sent in under 5 min.
Project Overview
Project Overview
THE PROBLEM
THE PROBLEM
Why are visitors on our app and website not applying for pets to adopt?
Why are visitors on our app and website not applying for pets to adopt?
Busy people that want to adopt a pet, have a hard time finding the right addition to their family and are overwhelmed by the amount of websites and adoption processes. They have to sift through pet profiles that lack information on fees, temperament, health, breed etc. They want to find what pets are available in their location, information about the pet, and the adoption process, before going into a shelter to meet the pet. My team and I were tasked to understanding why users were't applying for pets on the website and to provide solutions.
SOLUTION
SOLUTION
Improve information architecture, add simplistic visual design instead of text, and improve usability.
Improve information architecture, add simplistic visual design instead of text, and improve usability.
With the research that we conducted we concluded that the lack of organized information and usability played a big part on the user's experience leading them to exit the site before applying for pets to adopt. We needed to make a design for the user to search all pets up for adoption in the area from multiple rescues, shelters, and private homes while clearly providing information about the pet and adoption fees. We redesigned the website focusing on information architecture, organized information and visuals instead of text to simplify the UI.
TEAM
TEAM
Team of 3
Founder of Adopt A Friend
(1) Additional UX Designer
Myself
MY ROLE
MY ROLE
UX Designer, end-to-end
PROJECT DURATION
PROJECT DURATION
Feb 2022-March 2022
RESPONSIBILITIES
RESPONSIBILITIES
Conducting interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the user
Understanding the user
Pet temperament is important.
Pet temperament is important.
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was "busy adults wanting to add a new addition to their family that would interact well."
Research revealed interaction was not the only factor limiting users from finding the right pet.
Other user problems included:
Difficult adoption processes
Lack of information on sites
Too many organizations/shelter websites
Lack of communication with organizers
User Pain Points
User Pain Points
Too Many Sites
Too Many Sites
Too many sites to research what pets are available:
shelters
rescues
private organizations
Lack of Info
Lack of Info
There is a lack of information about the pets:
temperament
breed
health
Applications
Applications
Adoption process is complicated:
lack of information
don't know where to apply
having to go into the location for info
Time
Time
Busy adults don’t want to spend time going to multiple different shelters to look and visit "possible" pets.
Persona and Problem Statement
Persona and Problem Statement
I created a persona using the pain-points I discovered from research, to further understand and map out the thoughts and behavior of the target-user for the product, in order to solve the design problems.
Heather is a young mother building a happy family who needs to find a pet with a good temperament because she has a newborn baby and wants an addition to the family.
User Journey Map
User Journey Map
Mapping Heather’s user journey revealed how helpful it would be for users to have access to a single, categorized pet adoption website with easy search options, icons, and stats about the dog to tell (without going in-person) if the pet was a good match, also a simple application processes to adopt.
Starting The Design
Starting The Design
SITEMAP
SITEMAP
Designing with user's needs in mind: simple search & explanation of adoption process.
Designing with user's needs in mind: simple search & explanation of adoption process.
I designed a sitemap to map out the design of the website with the user’s needs in mind. Main focus of site should include the users need of a simple search for the pet and explanation of the adoption process.
PAPER WIREFRAMES
PAPER WIREFRAMES
Using hierarchy of design to prioritize user's time by adding quick-search on homepage and easy application button.
Using hierarchy of design to prioritize user's time by adding quick-search on homepage and easy application button.
Taking the time to draft iterations of each screen of the site on paper, helped me to freely get out my ideas quickly without editing. It also ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy search process to help users save time. I added a easy application button on the pet profile page.
DIGITAL WIREFRAMES
DIGITAL WIREFRAMES
Using heirarchy of design to prioritize user pain-points: "easy search", "easy application", and "temperament."
Using heirarchy of design to prioritize user pain-points: "easy search", "easy application", and "temperament."
As the initial design phase continued, I made sure to base screen designs on findings from the user research. Easy application button on pet profile page with numbered steps on how to apply, adoption fee listed upfront, and detailed pet stats with temperament; these were all user pain-points that were discovered with research and solved with design solutions.
Mobile Size
Usability Study Findings
Usability Study Findings
To start testing the designs, I created a low-fidelity prototype viewed here. This prototype was used in an unmoderated usability study with 5 participants. Here are the main findings uncovered in the usability study.
1.) Temperament
1.) Temperament
The pet’s friendliness with people and other animals is a key search factor. I will implement into design a color ring indicator.
2.) Icons and Stats
2.) Icons and Stats
Clear icons indicating that the pet has shots, etc. help user quickly see if pet is a right match. I will use check-mark icons.
3.) Save Favorites
3.) Save Favorites
Users want to like and save their favorite pets in a search. Icon in profile photo can be a quick design for this.
Refining the design
Refining the design
Mockups
Mockups
Temperament or friendliness was a main concern for people in the usability study. A temperament colored ring was added to mockup. Quick stat check on the pet for important information indicators were added for a quick profile scan, saving time for users.
Before Usability Study
Before Usability Study
After Usability Study
After Usability Study
Yellow ring represents temperament: friendly with people, not other animals ----->
Checkmark and exclamation icons added to stats. ----->
“Add to favorites” icon was added to pet profiles for the user to easily save their favorite pets while they search. The usability study showed that adopters wanted to keep track of the pets they liked quickly.
Before Usability Study
Before Usability Study
After Usability Study
After Usability Study
Add "favorites" icon to pet profiles. ---->
Accessibility Considerations
Accessibility Considerations
1.) Alt Text
1.) Alt Text
Provided access to users who are vision impaired through adding alt text to images for screen readers.
2.) Icons
2.) Icons
Used icons to help make navigation easier.
3.) Imagery
3.) Imagery
Used detailed imagery for pet profiles (photos & video) to help all users better understand.
Screen Size Variations
Screen Size Variations
I made alternate considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users search for pets from a variety of devices, I felt it was important to optimize the browsing experience for mobile devices so users have the smoothest experience possible.
High-Fidelity Prototype
High-Fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for searching and applying to adopt for a pet. It also met user needs for a clear and efficient application confirmation.
View the Adopt A FriendHigh-fidelity prototype
View the Adopt A FriendHigh-fidelity prototype
Going Forward
Going Forward
Takeaways
Takeaways
Impact
Impact
The website made users feel like they could search and apply for all dogs in the area that were up for adoption easily and specifically. The search options and categorization allowed users to truly find the perfect addition to their family; from temperament, health, age, and breed. Adoption steps were clearly defined and it was easy to apply for a new pet in under 5 min without a trip to the shelter.
What I Learned
What I Learned
While designing the Adopt A Friend website, I learned that the first ideas are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the design. Great UX design can solve problems for users very simply by a simple icon or color ring. I’m so inspired to come up with more ways to solve users needs. I really enjoyed this project and am very excited to continue to grow as a UX designer!
Next Steps
Next Steps
1.) Testing
1.) Testing
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.Conduct more research for the color-coded rings and application forms to see if any designs could be improved.
2.) Ideation
2.) Ideation
Ideate on new features by conducting more research on any other areas of need.
Let's Connect!
Let's Connect!
Thank you for your time reviewing my work on the Adopt A Friend website! If you’d like to see more or get in touch, my contact information is provided below.
Email: amandaklein001@gmail.com
Phone: 928-925-2535
Linkedin: https://www.linkedin.com/in/amanda-klein-a87038a9/
Other Portfolio Projects:
Other Portfolio Projects:
Page updated
Google Sites
Report abuse