As part of a Google design exercise I took a challenge to design an experience to help connect people looking for a new pet and find the right companion for them. I started this exercise with ux research, then moved on to low-fidelity prototyping and then to high-fidelity interactive mockup. Time spent on this exercise: ~11h


  • Survey
  • Sketches
  • Wireframes
  • Visual design
  • Prototype


I started to build an online survey in order to find out people preoccupations when adopting a dog. 34 Portuguese people answered to the survey. 61,8% were female and 38,2% were male. 50% of the people have already adopted a pet. 29,4% of the people answered that the most important factor to choose an animal is Personality.

In this case, people majority preoccupations are if they have enough space and conditions at home in order to welcome an animal. As well as health and pet care, and enough time to be with the pet.

I also found out that most of the people who answered this survey will use a computer to look for pets for adoption.

Thus with all this information I created a persona, who drove my design decisions.

Interaction design

I started to do sketches in order to come up with ideas, and started thinking about which information to show, and flow between pages.


From the sketches I moved on to Axure rp and started doing the wireframes and high-fidelity mockup.

The structure of this page is composed by header, content and footer. The header has the logo, allows a person to find a match, and login in. The idea of finding a match is to help people find a pet by empathy. Usually there is empathy when there are similar behaviours. So, clicking on “Find a match” the person will fill a form and then see pets accordingly.

At the content area there is a section to search pets. The idea was te portal get the GPS location if the person, and pre-fill the location already. The reason there is an area with animal personality was because this was an important factor for the people.

Then at the content area, the idea was to show an image and highlight the name, length and age of the pet. This is information which can be applied to any pet, so even the person chose another pet the page will keep consistent.


The use case that I choose for the high-fidelity was to Find a dog match and View dogs information.

Clicking on “Find a match” the person goes to a form. Since is a people’s preoccupation having enough space and time, this can be a away to filter pets which need more or less space or attention.

Clicking on find the home page is filtered and shows the best results.

Clicking on one of the dog cards, more information about the dog is shown.

At this page there are two sections. One with other dogs and the person can search a specific dog. The other section has the photo section, where the person can navigate to see more photos. On top of the photo there is share button so that the person can share the photo with other people.

There is also the possibility to bookmark the pet by clicking on the heard.

Then there is a section with highlights, and here would be interesting have the top advantage of this dog, in this case is “children friendly”.

The section below shows more detailed information like preferences, in which shelter is, how to take care of him. At the bottom the person can sponsor max, meet max or take him home. Clicking on taking him home the person would go through a stepper and the shelter could contact the person after.

High-fidelity mockup interactive

The interactions of this mockup are available here: