Google Design Exercise: Solving the shelter problem

This is a design exercise I completed as part of the hiring process at Google.

After passing a phone interview, applicants move on to a design exercise. The exercise then gets reviewed by the hiring team. If all members agree the exercise is strong enough, the applicant moves on to the on-site interviews.

For the design exercise three possible challenges are given. I picked the exercise that allowed me to showcase the broadest set of my skills and that aligned most to my personal interests.

The exercise took me roughly 10h to finish, including the writing of this case study. The exercise got me through this phase of the hiring process and later on got me the offer as well.

Below you can find the design brief I picked, and the solution I came up with.

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 wire frames.

I’ll go over the process I followed to complete the design exercise, and explain my reasoning and thoughts behind the decisions I made.

Note that I found dogs have the most problems getting adopted, so in the course of this exercise they were my main focus. I made sure that all designs would work for other species as well.

Time spent on the exercise: ~10h (including writing this “case study”).

Research

No need to be tidy at this point

I started out with some brainstorming to explore the topic of the design exercise and gather my initial thoughts. I did some competitor research to see how other products were tackling this issue and taking notes of the things I did and didn’t like. Just roughly penning down what features the app would need, what information would need to be shown, and what pieces of content should be in focus.

Finding the problem

Before we start solving anything we should take a look at the issue at hand and break it down to its root cause(s).

We want to make it easier for people to adopt animals from shelters or foster homes. The underlying problem is that people still buy from shops, rather than adopt from shelters. This is problematic because there are more animals going into shelters than the system can support, and as a results almost 3 million animals get euthanized every year. Additionally, animals bought in stores are often coming from “puppy mills” where they are bred in very poor conditions.

So why don’t people adopt? As I discovered in the research phase, people unfortunately hold very wrong opinions when it comes to shelters. To list some of these untruths:

• “Old dogs can’t get used to new owners, and will never be as loyal as a dog you had since it was a puppy.”
• “Old dogs are hard to train, and cannot unlearn their old (and bad) habits.”
• “Dogs in shelters are unhealthy.”
• “Shelters are dirty and the animals there are unhappy and I don’t want an unhappy pet”

All of these are plain wrong, and actually the opposites are very often true. The advantages of adopting from a shelter are very real, but unfortunately not as well known:

• Puppies are harder to train than old dogs. They claw, bark, bite and chew all the time. Old dogs are long past this phase and are a lot calmer.
• On top of that, older dogs are already potty trained and even know basic tricks.
• Dogs from shelters are generally healthier because they get medical checks very often.
• Old animals already show their true personality. A puppy can become very different years after you buy it. (which is often the reason why they end up in shelters)
• Adopting from shelters is usually cheaper, even if you don’t get the animal for free. When buying from a shop, the medical costs will be higher than the adoption cost at a shelter, where the medical costs are already included.

Solving the problem

Keeping these things in mind, I decided on the following mission statement.

Get more animals adopted from shelters.

This will be achieved through these 3 goals:

1. Help people find a pet that fits them perfectly
2. Dispel the myths regarding shelters and shelter animals
3. Highlight the advantages shelters have over shops

Now we know what we want to achieve through the UI, so we can start designing.

Sketches and wireframes

The needed features, actions and pieces of information were already pretty clear after the phases above, so I could jump straight into a quick sketch to map out the user flow. I tried to put in all the features I was planning, and most of it already felt logical at this point.

After a couple of paper iterations I had the general idea ready, so I switched to Sketch, where it’s easier to move things around.

This was the final result of the user flow after a couple of iterations in Sketch:

Since we don’t have a lot of top-level views I opted for bottom navigation with 3 views:

• Explore
• Favorites
• Contact (contains messages and appointments)

Each tab represents a different cycle in the users progress towards finding his perfect pet, and as the user gets closer to his goal he moves through the navigation from left to right.

I won’t go into detail for favorites, picture viewing, messages and settings since they work pretty much the same as in every other app.

Notifications are something that could easily be forgotten in this case, but I think they’re very important. With notifications, the app is pretty much “set and forget”. You fill out the one-time questionnaire, and after that you will get a notification every time a new animal is put up for adoption that matches what you’re looking for. This alone is already a very strong USP. Even if the user does not find a good match initially, as long as he keeps the app installed he will be notified of every new possible match. This goes a long way towards achieving goal #1.

For an animal this means that as soon as they enter the shelter, multiple people immediately get a message. This could drastically shorten the animal’s waiting time in the shelter, and in overcrowded shelters possibly even prevent its death.

Going into detail for the two most important parts in the user flow:

Onboarding

The welcome screen is pretty standard. It features a big app icon (preferably animated) to reinforce branding and add some visual delight to the user’s first contact with the app. It also repeats the value proposition which explains the user why it’s worth it to complete the questionnaire.

The questionnaire itself is equally simple. Each page has a big question at the top and multiple choices below. Since there are a lot of pages, the wizard automatically moves on to the next page after picking an option. The user can go back to change his response, or go forward to skip a question using the arrows at the bottom.

After completing the wizard, the user gets a view with an artificial loading indicator. In cases like this it’s important to increase the perceived value of the product. If the user spends ~5 minutes answering questions, but the results appear instantly, they might feel as if the product is not really doing anything and all his work was for nothing. Showing a nice loading animation for just a few seconds will prevent this.

If the user presses the Skip button on the welcome screen, he immediately gets the listing view. As long as he has not completed the wizard, there is an inline card that repeats the value prop and urges the user to answer the questions.

Exploring

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.

The results view puts pictures of the animals front and center.

The animals’ first name is being used in order to establish somewhat of an emotional connection.

The lower part of each card has all relevant characteristics telling the user why this animal is or isn’t a good match.

At this point we’re mainly trying to get the user into the detail view, so we’re going for a “OMG so cute” reaction which would lead to a click.

When we get the user in the detail view we want to address his concerns about shelters, and stress the benefits of adopting.

All the core information and action are visible above the fold.

Even though Contact might seem like the most essential action, I put favorite in the FAB because it we want to encourage the user to maintain a shortlist. The more effort the user has put into personalising the app, the less likely he is to abandon it.

The BOOK A WALK action is surfaced to the top of the page and displayed as prominent as the other actions. This is ideal for users who are considering adopting and want to see the animal in person, but are held back by the commitment of telling the shelter they are interested in adopting. The user should think “why not, let’s give it a try”.

Stretch goal

The exercise said to design this as if it was an actual Google product. While not exactly part of the app, if I actually was designing this app for Google as a Google employee, I would also try to achieve our goals by leveraging other parts of Google’s massive ecosystem.

There are many other services a product like this could be integrated into. Think of cards inside Google Now, or an improved layout for Google Maps for shelters, where the employees can upload pictures of all the individual animals in an organized way (similar to how restaurants now have a “menu” section).

One integration that I think could be especially interesting is Chromecast.

I’ve always liked the pictures that come up when the device is idle, and while they look great I think there’s a lot of missed potential there.

Off-topic: I wish Google Flights and Google Trips were a single app, where I can explore, book and plan my trips. My number 1 request for this non-existing app is Chromecast integration.
I often see amazing places on my Chromecast and I wish I could say “OK Google, add this to my travel wishlist”. This would add the location that’s currently on my Chromecast to the Google Flights+Trips app as a starred location.

Back on-topic: In similar vain, something that would go a long way to achieve our goal of increasing adoption rate in shelters would be to raise awareness.

A great way of doing this would be to show nice pictures of nearby animals in shelters/foster homes on idle Chromecasts.

Everybody likes pictures of cute cats and dogs, and it raises awareness for the issue and gives an enormous amount of exposure to local shelters. Win-win-win.

A cute dog, cat, turtle or bunny might appear on one of the more than 30 million chromecast-connected TVs, and a couple of clicks later the animal could already be adopted.

Thanks for reading!

More at twitter.com/kuijkenpol