The explore view does not have a lot of controls. The only two filters available are distance and type of animal. Someone who is looking for a dog and is willing to put in some effort, can set the type of animal to Dog and set the distance to 100km. This makes sure he’ll easily find the best match for him.

The questions that the user has previously answered do not serve as “filters”, but instead are used to grade, rank and personalize all the results.

Animals who are a good match for the user will be shown at the top of the list. Each card also shows a summary of the animal’s characteristics, highlighting the main reasons why this would or wouldn’t be a good choice for the user.

Animals are not hidden from the list if they don’t meet some of the user’s preferences, since he might be willing to make a compromise in a certain area, if everything else is a perfect fit. They are simply ranked lower in the list.

Most competing products show all possible info, which complicates the product and makes it hard for the user to make a decision due to information overload.

Here I’ve opted to only show the information relevant to the user’s situation. The app’s goal is to find a pet that fits you, not to look up all possible information about a specific breed.

The top of the page basically already has all the necessary information: A picture of the animal, its breed and age, and whether or not it’s a good match.

Based on this information the user could choose to favorite the animal or contact the shelter.

To completely remove friction for users who are considering an animal, I added the option to arrange to go walking with the dog without leaving the app. Tapping the button opens a dialog with an inline time picker. In just a few taps the user can arrange to meet his potential future pet.

Below there are the animal’s relevant characteristics, grouped by desirability.

Characteristics that require more explanation have a seconds line of information. When tapped a bottomsheet opens that gives more information.

To help us achieve goal #2 and #3, characteristics that are typically seen as bad, can highlight their benefits instead. For example, if a dog is 5 years old, that might seem like a downside to the user. But if the user has previously indicated that he’s looking for a dog that requires little training, then underneath the dog’s age it will explain how older dogs require way less training than puppies. In this way we’re able to educate the user when and where it’s relevant, and get rid of any wrong notions he might have had.

At the bottom of the view the user can find information about the animal’s current home. To help us achieve goal #2, it has pictures of the shelter to show that it’s way nicer than most people think. Additionally there’s a short text about the animal from one of the employees. This humanizes the shelter and at the same time shows that the employees care for the animals and treat them well.

If there were any challenging interactions, gestures or animations I would move to Framer at this point to do some prototyping. Since there are none I’ve (unfortunately) skipped this stage.

High fidelity

The wizard has a lot of questions, so in order to speed up the process, the user should be able to scan the page as fast as possible. No distractions, only the content.

After selecting an answer, the content moves out of the view to the left while the next question comes in.

The number at the bottom increases by one and the indicator slightly progresses.