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.
As a dog adopter I want to find the perfect companion that matches my lifestyle
This case study provides an overview of the process I use when developing the following user experience. There is a personal reason for selecting the Pet Adoption exercise. We are in the process of adopting a dog. As a result, I had an advantage when conducting my research due to the familiarity of the topic. Although the focus of the experience is based on dogs, the user experiece can be applied to other types of pets.
More than 6 million—that’s how many cats and dogs enter animal shelters every year
Of approximately 3,000 survey participants, 24 percent said they prefer getting an animal from a breeder over adopting from a rescue or shelter.
Although the statistcs show that people adopt pets from shelters, these “homes” for pets are reaching high levels of overpopulation. As a result, over 3,000,000 animals are sacrified every year due the lack of resources and space in the shelters.
Also, people are still buying animals in pets stores. Unfortunately, these future companions are coming from farms where they are raised in very poor conditions.
After conducting research about the topic of adopting versus purchasing pets, I feel comfortable about the subject. I know the problem and I have found some solutions to solve it because of my investigation.
Next, I need to identify users and stakeholders to include them in my research. Creating a persona helps to get past our personal opinions and presuppositions about the potential user.
The next step involves conducting a competitve analysis of other apps that help users to find pets for adoption. I look for positive and negative application behavior. I don’t want to reinvent the wheel, so analyzing features and interactions from other apps will help me to make better decisions during the the ideation process.
I have analyzed the following apps based on user feedback: WeRescue, PetFinder and AllPaws.
The following is an example of what I have learned from one of these apps.
Finally, an app definition statement will help me to indentify what features I think users might like to have to make the pet searching simpler and more efficient.
In this part of the process I am immersing myself in the world for which I am designing. I generate ideas constantly. As a matter of fact I have been keeping a notebook with me because you never know when you are going to be inspired.
I have been sketching my vague ideas to think through them more clearly. I love sketching because it forces me to visiualize how things come together.
After a few sketches and quick wireframing, I felt ready to swtich from paper and pencil to Sketch. Sketch will help me to create the flow and I will Include only what is required to render the intended purpose or concept that I am planning to deliver.
One of the main reasons I like to create Task Wireframes with Sketch is because it helps me to grasp issues and potential solutions.
For instance, during one of the iterations I did not include the logging on or signing feature into the flow because I thouhgt about minimizing the process of finding. I did not want to have to too much friction within the process. My ideas was to open, find, decide and adopt. However, when finalizing the flow I noticed that the user of social media would help shelters to be known. How can users post to social networks without signing into the app?
The following Task Wireframe is the final version prior starting the protoype phase.
One of the struggles facing the first interactions in the design was where to add an onboarding feature. The other option was a welcome page for all the inputs for the pet finding.
The reason for the Onboarding option includes a better layout and the reduction of information overload.
“Breaking” the search criteria in several screens avoids presenting users with a screen fillled with inputs.
My reason for presenting the entering search criteria as the first screen includes prioritizing the engaging fact. Prompting new users with the registering information might stop them continuing with the app. Also, I think that making the app comprehensive enough avoids having to present an onboarding process. On the other hand, asking about what they are looking for first can create a greater feeling of engagment.
My thought is to ask users to sign up for the first time when they are finally commiting a primary action such as contacting or “faving” a pet, rather than upfront when they are initiating a search.
I decided to make the size picker as a multi-selection control because users can find it dificult to diferenctiate between the “Medium” and “Large” size pets.
Finally, I thought that adding the “location” feature helps those that are not familiar with the current location or just want to search for a specific place without knowing the zip code.
Once the search criteria is entered, the results screen provides a series of matches based on what the user has previously selected.
I used the vertical-scrolling navigation based on previous projects’ experiements. I have found positive user feedback regarding this navigation style. Users like to scroll up and down while looking at information.
Besides the basic metadata that describes the pet such as name, breed, age, etc., I thouhgt that adding a play buttong icon below the pet’s picuture helps signify to users that there is a video associated with the animal. In addition, we can encourage shelters to create VR videos so adopters can experience a closer virtual “meeting” with a potential new member of the family by clicking on the “VR” icon.
For top level navigation I decided to use a menu section and a filter control. As mentioned before, I want to make the experience simple, without too much information which can easily overwhelm.
Users can create a list of favorites candidates using the “heart” feature. Tapping on the “Heart” icon adds the pet to a list. I decided to use the “heart” symbol to represet favorites following the most common standars. In addition, based on a former study that I conducted, most of the participants associate “hearts” with the action of aggregating items to a list for later use.
One of the problems that I faced during adding this interaction to the design was making sure that there is a response signal after tapping the heart. Due to the dimensions of the icon the action might be unnoticed by the user. As a result, adding an animation or filling up the heart with a primary color will help to solve this problem.
I considered two options regarding how users move from the “list” screen to the next, the “detail” page, where there is an overview of all the information about the pet. One option consisted of making the entire row area active to touch. However, due to the interactive feature of adding favorites, it would be very challening to the users to diferenciate what areas are interactive.
Thus, making the image thumbnail and the chevron icon as entering points cleary reflect the two different points of entry.
This is a great interaction to be tested during this phase. Building a lo-fi protoype with both cases and presenting them to some participants help to make a more quantitative decision. However, due to time constraints, I am going to trust my experience and am going with the second soultion.
The pet detail page is one of the most important pieces of the design. This screen needs to provide as much clear information about the pets as possible. Among the images and video media additions, I thought that adding a VR experience might help adopters to have a closer view to the pets. Google Daydream View Device can be provided to users so they can experiement the virtual reality of being close to a pet.
One of the challenges with this screen consists of how the information is organized and displayed. I have explored two versions where the layout of the pet’s information differs in their location.
For one, the data is displayed as a list. The benefit of this layout resides in the position of the data. Users might find it easier to read, scan, or seek information within this layout. However, on the other hand, aligning the data in two columns might complicate the reading for the user. It is harder to read information when it is displayed in this tabular layout.
I chose the bottom navigation with three items to access the top-level views.
The menu section contains the following options
As I previoulsy mentioned before, I think that a “Fav” section is necessary. User can access this section via the menu option.
I considered not including these options at all into the design. My hypothesis is that the majority of the pets for adoption have multiple mixed breeds. As a result, these gudies could add some ambiguity to the final decision of adopting. Again, some user testing will help to confirm my hypothesis.
Allows users to terminate their session. User will be prompted to sign in again once they choose a primary action.
Tapping on the Search icon allows users to re-enter their finding criteria. I originally used the “magnifier” icon to allow users to start a new search. However, it seems like the functionality is more like filtering than searching. We associate the magnifier icon with searching for a term rather than the action of filtering.
Because of the time constraint of this exercise, the “Validation” step has been removed for the UCD process. The correct approach follows puting the wireframes in front of users to gather feedback about the design. Based on the feedback I would have iterated until data show that the design is ready to move to the next phase: Prototyping.
Let’s assume that I have gathered user feedback already and I am moving to the Prototype phase.
I decided to use Framer as a tool to build a section of the design. I have been using Framer for over a year and I found it a very powerful tool to deliver mobile concepts, especially for testing puposes.
The following prototype shows how users land on the results page and how they can select a pet to learn more about it. I have also added a few interactions like showing the menu section or favoriting a pet as an example.
The next section shows screens of the final design and comments about my design decissions.
For this deliverable I have been applying the mobile UI patterns (and particularly Android ones) thoughtfully in order to match how the app would look when it is built.
For the purpose of this exercise, I have used “Tarzan” as the pet to show his details.
The “List View” page shows the results of pets after a user entered the search criteria. I have decided to make the Location as the base of the results becasue, as I mentioned before , users mostly base their adoption decision based on the location of the pet.
Deciding to highlight in green the location on the pet’s details follows the same reasoning. Location is important for users. The green helps users to scan the location of the pets faster.
The entering point to the detail page consists of tapping the Chevron icon. Tapping on the image of the pet opens a modal with a larger view of the image. See prototype.
Tapping the menu icon, opens the navigation drawer.
One option on the menu is the “Favorites”. Tapping on this option, users will be directed to a page where their “favs” pets are listed. There the user can “unfavorite” a pet to remove it from the list.
It is still not clear for me if the Dog and Cat guide would add some value to users. Again, my hypothesis states that the majority of pets are mixed breeds so the accuracy of the guide might not apply to everybody. This is something to ask users during the “Evaluation” phase.
Finally the Logout item will close the session for the user. User will be asked again to sign in once they commint a primary action like favoriting a pet.
The Chevron icon points to the left following the motion of closing the navigation drawer.See prototype
For the detail page, I try it to follow the “keep it simple” design principal but I also look to privide the correct information to help adopters to decide.
Within this page, users will be able to watch videos, look at photos and add pets to their favorite list. Once the users taps on the heart an animation displays the transformation from white to red of the heart. After it is added to the fav list, the heart icon changes to red in the previous page.
I also tried to keep the video thumbnail free of obstacles moving the play icon to the left bottom of the image. Tapping on the icon plays the video. On the other hand, tapping on an image shows it in a larger view. (See protoype) See prototype
Beside the obvious use of this app with Pixel and Android mobile devices, I see other types of integration with Google products such as Google Home or Daydream view. Notifications can arrive to your Google Home regarding a new pet that fits the characteristics that you are looking for. Also, as I mentioned before, the use of VR technology will help to have a more realistic experience when searching for a pet.