Case Study:

Adopt A Friend

Mobile App/Responsive Website

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


THE PROBLEM

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

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 of 3

  • Founder of Adopt A Friend

  • (1) Additional UX Designer

  • Myself

MY ROLE

UX Designer, end-to-end

PROJECT DURATION

Feb 2022-March 2022

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

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

Too Many Sites

Too many sites to research what pets are available:

  • shelters

  • rescues

  • private organizations

Lack of Info

There is a lack of information about the pets:

  • temperament

  • breed

  • health



Applications

Adoption process is complicated:

  • lack of information

  • don't know where to apply

  • having to go into the location for info

Time

Busy adults don’t want to spend time going to multiple different shelters to look and visit "possible" pets.

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

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

SITEMAP

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

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

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

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

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

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

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

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

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

After Usability Study







Add "favorites" icon to pet profiles. ---->


Accessibility Considerations

1.) Alt Text

Provided access to users who are vision impaired through adding alt text to images for screen readers.



2.) Icons

Used icons to help make navigation easier.

3.) Imagery

Used detailed imagery for pet profiles (photos & video) to help all users better understand.



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

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




Going Forward

Takeaways

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

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

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

Ideate on new features by conducting more research on any other areas of need.

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: