Case study – Find a friend web

Find a Friend is an online pet adoption web designed to increase pet adoption rates from shelters by providing an easy-to-use and personalized experience to help adopters find the right pet.  

Duration: 4 weeks

The process

Research

Definition

Concept

Design

My rol

UX / UI designer

The goal

Primary: Allow potential pet owners to search for a pet from several shelters and organizations at once instead of visiting several sites.
Secondary: Get potential pet owners to meet in person with an animal. This is the only way to really tell if an animal is “right.” Provide a delightful profile for each available pet thus increasing their chances of adoption.

User research

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 that there are very few animal shelters with a responsive web design and easy navigation to find a pet to adopt.

The design

The website prioritizes five main functions: adopting a pet, volunteering, donating, fostering a pet and an about page for help/information about the organization as well as the site. In addition, there are also login/profile management pages. While the entire site is mapped out as follows below, I focused only on the adopt-a-dog path.

  • Search for a pet by location, size, and age
  • View photos of the dog in carousel format
  • Start the adoption process
  • Offer different ways to help if adoption is not possible

Responsabilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

User journey

For my design specifically, ignoring the other pages that I did not focus on, a user would:

  1. Start on the Home page, move to the “Adopt” page, which lists categories of animals

  2. Move to the “Dogs” category page, which lists different dog profiles

  3. Move to a specific “Dog Profile” page, with expanded information on the dog

  4. Tap the “Meet Me” button, which would lead some form of external communication, such as an email or messaging system to contact the humane society and set up a meeting with the animal.

Persona: Teresa

Problem statement:
Teresa has to visit several webs to decide to adopt a pet, wasting a lot of time.

Mapping Teresa’s journey revealed how helpful it would be for users to search for a pet from just one web, instead of visiting several sites.

Digital wireframes

Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.

The low-fidelity prototype connected the primary user flow of finding a pet, so the prototype could be used in a usability study with users. I then created the prototypes using Adobe XD. 

Usability testing

To determine the level of efficiency of design and usability within the user interface of the interactive prototype, unmoderated usability testing was conducted. The test was designed to establish ease of navigation within task flows, get clarity in content and call-to-action based on user understanding, identify any anomalies in navigation, terminology ambiguities etc.
 
Post observation feedback was gained from the test participants to find what they liked the most, liked the least and their recommendations for improvement.

Usability study: findings

These were the main findings uncovered by the usability study: 

Efficiency:
People want to
find a pet to adopt quickly and easily.

Help:
People want to help in different ways in case they can’t adopt a pet in that moment.

Social:
People want to share the pets that are available to help finding them a home.

Conclusion from peer review

Overall, the peer review concluded that the experience of the mobile application and website was effective in that the user flow was easy to follow and complete. In addition, the elements adhered to the design patterns of iOS and web environments.

Although certain improvements can be made (e.g. more filter criteria and contacting adoption agencies), the wireframes were able to effectively communicate the experience of the pet adoption solution.

High-fidelity prototype

The hi-fi prototype followed the same “find and adopt a pet” user flow as the lo-fi prototype, and included the design changes made after the usability study.

View the high-fidelity prototype

Accessibility considerations

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

Used icons to help make navigation easier.

Used detailed imagery for bands to help all users better understand the designs.

Take aways

Impact: 

The app makes users feel like it really thinks about how to meet their needs. 

One quote from peer feedback:

“The web made it so easy to find the perfect pet for me! I would definitely use it to help them find a home.”

Future steps

A company’s relationship with its customers is a living, breathing thing that needs constant attention.  The only way to ensure your customers are being heard is to listen to them regularly. 

That’s where continuous customer research becomes an important part of your development cycle and encourages a faster, more iterative process.

Shelter integration:

Besides investing in a responsive website to help people discover pets and helping them finding a home, Find A Friend has plans to create a multiauthor website so shelters can upload animal information by their own.  

 

Si te gusta lo que hago, puedes invitarme a un café. Un chute de cafeína siempre viene bien para mantener despierta la creatividad y seguir creando!