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:
- 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.
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
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.
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!