Millions of animals are currently in shelters and foster homes awaiting adoption. Design an experience that will help connect people looking for a new pet with the right companion for them. Help an adopter find a pet which matches their lifestyle, considering factors including breed, gender, age, temperament, and health status. Provide a high-level flow and supporting wireframes.
I started my process by identifying the assumptions around the users of this product, which I’ve decided to call, Pawdoptees™. Even though there are two distinct user-types for this project, internal and external, I chose to focus on the external end-user due to time constraints. Here are some of my thoughts:
1.0 › High-level flow chart sketch and notes about audience, assumptions and ideas
I also spent time trying to identity the different types of users that would use this product. I made a list of the most common user types:
Once I had a better idea of the high-level project, I started sketches around screen layouts and the basic features for each step of the user flow.
1.1 › Sketches and ideas for each individual screen
1.2 › Sketches and ideas for each individual screen
After completing my initial sketch wireframes, I refined my concept. I wanted to leverage the idea of personalization. One of my assumptions around users is that they love to learn about themselves. Even though a user was looking for a pet, the experience needed to be personal and custom to them.
This is why I integrated a personality test into the pet adoption experience. Personality tests and knowing oneself are trending right now. By combining a human’s and pet’s personality there can be better adoption matches made and stronger bonds formed. Therefore, resulting in less pets being returned to the shelter and more pets being successfully adopted.
After researching the idea more, I discovered ASPCA’s Canine-ality¹ and Feline-ality¹ system. Similar to both the True Colors² and Myers-Briggs³ personality tests for humans, the ASPCA’s tests provide a personality assessment for pets in shelters. I really wanted to integrate this system into my project.
My next step was to create a digital version of the high-level user flow and wireframes.
2.0 › Refined Flow Chart
2.1 › Refined Annotated Wireframes
Based on the idea of the ASPCA’s Canine-ality and Feline-ality system, I built my style using purple, green and orange for the personality groups. I also added an additional secondary color for non-personality themed areas of the experience.
Even though the experience is flat in style, I tried to keep some personality, like patterns to create texture and big pet photos to break up the space. I used the personality group colors to theme the screen appropriately. For any screen that did not directly tie to a personality group, I used the secondary UI color.
I created iconography to match the sub-categories, like “Couch Potato”, under each personality group. This was to give each sub-category a visual identifier in addition to the name.
Examples of the visual style:
And also, don’t shop… ADOPT! 🙂