Case study – Find a friend web
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!
UX / UI designer
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.
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 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.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
For my design specifically, ignoring the other pages that I did not focus on, a user would:
- Start on the Home page, move to the “Adopt” page, which lists categories of animals
- Move to the “Dogs” category page, which lists different dog profiles
- Move to a specific “Dog Profile” page, with expanded information on the dog
- 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.
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 study: findings
These were the main findings uncovered by the usability study:
People want to
find a pet to adopt quickly and easily.
People want to help in different ways in case they can’t adopt a pet in that moment.
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.
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.
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.”
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.
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.