UX Design Process — Designing an App to Find Lost Pets

This blog posting is dedicated for describing what was worked on during our CS 449 — Human Computer Interaction course, why is was worked on, and how our product was developed that focused heavily on User Experience.

User Experience is not how good the application looks. The feature that was easy to use, the buttons that were hard to find, the home screen that’s welcoming and easy to understand; it all comes down to the category of User Experience. Therefore, this project is not going to be on how how make aesthetic screens or how to make a perfect circle, but instead on the experience the user gets from start to finish and everything in between.


The main goal of our product is the “recovery of lost pets”. While there are many ways one can try and advertise their lost pet, people all have their preference and are not accustomed to a specific platform. We want to create a platform that will contain all of the lost pets or found pets’ information, as well encompass all of the media platforms that people prefer. Instead of having the pet owner go from one media platform to another, we want the pet owner to mainly be using our app to access all the different pet informations but also have access to sharing their information easily onto other media platforms with few simple clicks.

Persona and Empathy maps

Firstly, we started with creating some personas, which are users that we expect to use our app or that we would target to use our app for. 3 of our personas represent a pet owner and our last persona represents a non-pet owner who still loves animals.

The empathy maps that are attached with the persona represents what the persona feels, sees, hears and does, gains and has difficulty with. It is used to provide more information about our potential users.

Persona 1

Persona 2

Persona 3

Persona 4

Exploratory Study

We then went ahead to conduct an exploratory study to see how the participants with pets feel about losing a pet and what they would do, and how participants without pets would feel about seeing a pet on the street, and what they would do. The method of our exploratory study is to conduct an interview, to gather some background information that did not need to be observed. We asked questions about how the participants interact with their pets and what they feel about pets to gain see if the way they feel about their pet has a connection with how they would act when they lose a pet or if they lost a pet before.

Some of the questions that were used:

  • Do you or your family own any pets?
  • Where does your pet come from?
  • How would you describe the appearance of your pet? How would you describe some typical behaviours of your pet?
  • Describe how your pet act towards strangers and other animals?
  • Can you think of any unique marks or identification (e.g a dog tag) on your pet? Anything like a dog tag, collar special marks on the pet etc?
  • How would you distinguish your pet vs anyone else’s?
  • Does your pet have any microchip installed that would assist in tracking?
  • Could you walk me through the daily interactions with your pet?
  • Could you describe the areas outside of your home that your pet frequently travels to? (how often does your pet leave its home?)
  • Does anyone else have access to your house?
  • Is there anyone in your neighbourhood who is known to take in lost animals?
  • Are there any places your pet frequently goes to hide?
  • You get home from work/school and your pet is gone, what do you do?
  • have you had any instances in the past losing a pet? (if yes, what steps have did you take to help find him/her?)
  • Describe the normal route when you walk your pet (walk your pet in around the neighbourhood, or less urbanized areas)
  • who would your immediate list of contacts in case of a lost pet
  • How close are your neighbours
  • Would your daily routine change without your pet?

If they don’t have any pets:

  • Have you seen any lost pet reports? If so, where have you seen them on usually?
  • Are you the type that likes pets? (e.g. do they make you uncomfortable?)
  • Are you the type of person to aid in a pet that you know for sure is lost?
  • What are the different social media platforms you use?
  • Which one is your preferred?
  • Are you around a neighbourhood with pets?
  • How well can you distinguish them from other pets?
  • How well can you identify a pet’s physical attributes? (e.g. Breed, gender, unique attributes, etc)
  • Will you ever get a pet in the future?
  • Do you help care for friends/family’s pets when they can’t?
  • What do you find helpful in trying to report a lost pet
  • Are you aware of any animal shelters nearby your place

Constructing Affinity Diagrams

As we conducted some interviews, we constructed an affinity diagram as we start to define user needs. We’ve put any problems we see regards to pet recovery process in yellow sticky notes, and from our yellow sticky notes if there are any common groups we grouped the yellow notes and added a blue sticky note to it that represents the group. Red sticky notes represent a key issue, and green sticky notes represent any themes we’ve saw recurring throughout the process.

Flow and Cultural Models

We then moved onto constructing some flow and cultural models.

The flow model represents the communication and coordination necessary to accomplish a goal, and describes people’s role/responsibility and how they communicate with each other.

The cultural model captures external influences that may affect perception and adoption of the product.

We have grouped the flow model for our two user groups: pet finders and lost pet owners.

Pet finder flow model
Pet finder cultural model
Lost pet owner flow model
Lost pet owner cultural model

User Stories & Idea Sketches

As we gained more understanding on how our users act and feel, we’ve started to lay out some user stories then to come up with features based on the user stories that would solve their issues.

A typical user story would be a problem that the user experiences:

  • I want to be able to see my pet’s location on a map
  • I want to share my lost pet information on this app to Facebook

Some user stories and idea sketches we’ve come up with at the time:

Wireframes & User Flow

Based on our sketches, we started to come up with wireframes that would be the basic guideline of how our app would look, and how it would function. It includes information like what goes on each screen, how it is displayed, what information is shown and what actions are taken when user touches something. Some sketches include:

From the wireframes, we constructed the user flow which is how the screens of our application will transition from one to another; how the user will navigate throughout our app. This is also when we started constructing our paper prototypes: to test our app usability.

User flow — first sketch
User flow — second sketch
Paper Prototypes

The paper prototypes represent what our application will look like, but it is used to first test whether it would support our users’ needs and determine if improvements are necessary before the high fidelity prototypes are worked on. Some sketches include:

And with these prototypes, we’ve went through several evaluations to test the usability. We asked users to perform certain tasks such as file a lost pet posting, create a poster for the posting you’ve just created and more, to determine the following:

  • The ease of navigation
  • Being able to understand what’s present on each screen
  • Performing given tasks without needing a walkthrough

With the feedback that was received, we moved on to construct our high fidelity prototypes.

High Fidelity Prototypes

The high fidelity prototype is a much more interactive prototype that allows us to test more advanced requirements, and to be able to make small adjustments much more easily.

Some high fidelity prototype sketches:

Heuristic Eval

The heuristic evaluation was conducted to determine whether the action participant takes and expects how it is done based on our high fidelity prototype, corresponds with what we developed. For example, if we are on the home screen and asked the participant to create a lost pet posting, we expect the participant to click “I lost my pet”, then fill in the necessary information, then submit. What the user actually expects it to be done may be different, and we used that information to see what set of actions might make more sense.

Cognitive Eval

The cognitive evaluation was conducted to determine whether the set of actions a participant must take to complete a task is expected and naturally flows with the expectation. For example, if we ask the participant to share their posting to social media, they will first click on their pet posting, click on a button to cross-post, then few more buttons until they successfully post to social media. If the participant correctly performed those actions in order, then what the participant expects aligns with what we’ve developed, otherwise we can analyze the discrepancy and determine what is a better step of action to take.

With all of the given information, we’ve come to our final prototype.

Final Prototype

Concluding remarks

And there it is. Our final prototype, made from mere sketches, storyboards, personas into paper prototypes and high-fidelity prototype. Now it’s your turn to save an animal.