Note: This is a detailed UX writeup and the interactive mockups will only work on desktop.
If you feel like skipping ahead to the interactive prototype, click here!
The adpt App:
Connect with Shelter Animals Near You.
According to the American Society for the Prevention of Cruelty to Animals, 6.5 million companion animals enter U.S. animal shelters nationwide every year. Of those, approximately 3.3 million are dogs and 3.2 million are cats. During this exercise I propose an experience that will make it easier and more fun to connect people looking for a pet with compatible shelter animals.
First notes, aSSUMPTIONS, AND WHITEBOARDING
When approaching this challenge, I sought to solve real problems currently affecting the world of animal adoption. As I am not familiar with the intricacies of the process for adopting a shelter animal, I reached out to the director of a shelter animal charity organization in New York City and received useful perspective on the project, including one key takeaway:
"Much like relationships between humans, a human-animal relationship is often irrational and unexpected. We'll have people tell us they want an older, calmer, animal but fall in love with a kitten at first sight. Nothing can replace the face-to-face experience of meeting an animal."
While certainly more research (user interviews) is needed to fully understand the complex problems surrounding animal adoption, I felt confident that it would be best not to replace the shelter adoption experience, but to improve and augment the experience.
With this in mind, I boiled down the solution (independent from technology) a simple form:
Problem: Pets in shelters need to be adopted.
Hypothesis: In order to adopt an animal, a user will generally want to meet them in person, but most people don't have time to travel to many shelters to do this. If they had a way to review compatible animals in a more convenient way, more animals may be adopted.
Solution: Adpt, an app that lets users screen pets and communicate with shelters to save time and find the best pet partner around.
Lastly, technological considerations were taken into account. I needed the platform to enable the user to connect and build empathy with compatible pets in a fun and convenient way. Many platforms were considered, but I found that building for mobile was the best choice (see image).
High-level flow
Again focusing on simplicity, I sought to design a high-level flow that included any user, any shelter, and any pet. Initially I included specific user stories and wants here, but cut them in favor of the one united story target users will have: they want to adopt a pet.
Onboarding
I recognized that onboarding would be an important process in this scenario because it can immediately either welcome or alienate a potential user.
I boiled the setup process down to three questions:
What is the user's name?
What is the user looking for?
Where are they looking for that?
I hypothesize that these three questions are enough to begin to show the user relevant, compatible results of shelter animals waiting to be adopted.
Click through the adjacent prototype to see the onboarding process for adpt. (There is a full prototype near the bottom of this post.)
Additionally, I created a unique design for the location page. When the user is specifying where they'd like to search, and from how far away they'd like to see results, they see an interactive circle expand over their search area. There may be only a handful of shelters around a user. Being able to see which shelters are in range of their search (red pins) and which are out of range (grey pins) may prompt them to expand their search area.
using the app
While using the app, I wanted to focus on the user interacting with the shelter animal in a meaningful way.
At first within the "Pet Finder" mode I used lists, and later cards, to display the shelter animals and their information. However, I found that this prompted a more ephemeral experience with each animal, and during brief user testing found that users wouldn't spend much time on each pet's page in favor of rapid swiping. (Moving forward, more testing will be needed.)
I opted to use a button-based system, located at the bottom of each pet's page, to save a shelter animal to your "Pet List". With this system users may spend more time on each page, and be more open to something catching their eye.
Try it out now, hit "Find Animals Now" to browse nearby shelter animals in the Pet Finder, and once you see one that is compatible to you, add it to your "Pet List", from where you can communicate with the shelter.
full prototype, Strengths & Weaknesses
The full prototype, with both the onboarding process and app interaction included is here.
Strengths:
I think the design accomplishes what it sets out to solve. It is convenient, fun (although this can be improved), and allows a user to connect and build empathy with shelter animals, all while encouraging compatible relationships.
Adpt manages to provide a seemingly personal experience for the user while not requiring them to input significant amounts of their personal data, which allows it to lower the barrier to entry of adoption.
The prototype is simple to use, and during initial user testing people of diverse technical and non-technical backgrounds were able to figure out how to interact with it using little to no assistance. Material design concepts are recreated faithfully, which allowed the users to quickly understand the prototype.
Weaknesses:
While designing the app, I studied and implemented material design in order to present the user with a clear and comfortable experience. However, I feel ultimately that the strict adherence to these principles resulted in an experience that, while clear, is somewhat visually uninteresting and doesn't feel unique.
The interaction of Adpt between shelter and user is one that is designed around shelters and users in the US only. Worldwide, there is still a significant need for shelter animals to be adopted, but many places may differ from the US model of traditional "shelters", or may not have the resources to take pictures of, and write bios for, their animals. (For instance, in Shanghai many animal rescue organizations are far more grassroots, relying heavily on personal networks to rescue and spread awareness.) More research would be needed to understand the complexities of the adoption process around the world.
I see a lot of room to innovate in the shelter process itself (the management of shelter animals), and this app doesn't currently deal with that aspect of the process. For example, many shelters are still using paper forms for their adoption applications and records, which results in inefficiencies for many organizations that cannot afford them.
Conclusion
Building this prototype was a challenging but rewarding experience. While I don't often build for mobile platforms, I appreciated the ability to utilize the user's existing expectations and interaction patterns that can guide them through the app. (This is in contrast to an area where I focus, augmented reality, where we often have to design instruction for the user to interact with the product; in contrast, most people know how to use a standard smartphone app.)
The study and building of an accurate material design mock-up was more difficult than I expected, but having done so I have a new appreciation for the presentation of layers and folds capable of creating a dynamic, deep experience on 2D mobile platforms.