Feature Addition • UI Design • UX Research • Wireframing

Adding a feature to help citizens report lost and found pets

February 2022 to April 2022  
3 computers showing the new reporting feature

The product

The website offered by the City of Vancouver gives citizens easy access to information regarding the city. The site includes information to services and programs offered by the city as well as online services such as maps, permits, and more.

The challenge

The aim of this project was to create a new online service that offered a way for citizens to report lost and found pets. We had to produce a medium-fidelity prototype which incorporated metrics provided by the City of Vancouver as well as user research conducted by the team. The design needed to be able to be integrated into the current City of Vancouver website.

My role

My responsibilities included managing the project to ensure deliverables were completed on schedule, conducting and analyzing user research to ensure users needs were met, and assisting with the prototyping to bring our ideas to fruition. I worked alongside two other designers for this project.

Solution

We created a service that allows people to report a lost or found pet. The list of lost and found pet reports were available in chronological order of posting and allowed users to share reports through social media to help spread awareness.

Research

To begin our research, we conducted a competitive analysis to identify competitors and analyze their strengths and weaknesses.

Competitive analysis

All around we saw that it was important to have clear messaging, a warm and friendly tone, and a simple interface. We noted that some sites weren’t easy to navigate or required payments; they were not accessible to everyone.

We analyzed websites such as PawBoost, The Toronto Humane Society, and Kijiji
User interviews

We conducted user interviews owners who had previously lost their pets, and analyzed interviews with subject matter experts. The subject matter expert interviews were done with a licensed private investigator and a lost pet consultant.

Affinity map sorting out users' goals, wants, insights, and pain points
We made affinity maps to better determine the key areas of concern for our users.
Pain points that appeared multiple times were noted.

We found that users wished for....

1
A simple process that was easy to follow

Users’ mental state reduced their ability to act rationally. Emotions cloud their judgement making finding help and acting quickly more difficult.

2
Tips to help them find their lost pet

Users looked for helpful tips on how to proceed after losing or finding a pet. They thought there were not enough straightforward resources available.

3
Support within their local pet community

Users wish for support from the surrounding pet community in their local area. Contact with other pet owners and the local community increased the likelihood of a pet returning safely.

4
More preventative information

Pet owners wished they had known of preventative measures they could have taken to avoid the situation entirely. They also found it difficult to update their pets registration, a vital tool for pet identification.

So who is the target audience?
We defined our target audience as those who are most likely to use the service and are needed for it to be successful.
People who have lost a pet
and
People who have found a stray or missing pet
Meet Anna and Rachel

By making personas and storyboards, we were able to better empathize with our users and understand their needs and struggles. Anna depicts a user who has lost a pet and Rachel shows what happens when a person finds a stray animal.

Personas

Persona of Anna, the user who has lost her pet

Persona of Rachel, the person who has found a lost pet

Storyboards

Storyboard depicting a scenario where Anna lost her dog, Picasso, and then tries several ways to get him back

Storyboard of a scenario where Rachel found a stray cat and successfully reunites it with its owner

So how might we quickly connect lost pets with their owner?
Ideation and wireframes
Using the pain points identified in the research phase, we were able to create low-fidelity wireframes and prototypes for user testing.
Low-fidelity wireframes
As a team, we each designed low-fidelity wireframes. We came together and selected the elements that best fit our users needs before moving onto our low-fidelity prototypes and medium-fidelity designs.

Our team thought using a modal window simplified the process of filling out a lost pet form. We thought it was a good idea to provide less information to help keep the user focused on the immediate task.

Our team thought that it would be helpful to easily see missing pet postings similar to social media posts. Users can also interact with one another to share information quickly and all in one place.

Our team liked the ability to download a copy of the posting. The print out could be used to alert neighbours and those not online.

Low-fidelity prototype
Some wireframes of the low-fidelity design are shown below.

Home page

Lost pet post page

Search posts page

Style guide
The style guide used was one provided by the City of Vancouver. This was one of the constraints we had to work within.
User testing
We conducted user tests with participants who had lost or found a missing pet. We created scenarios and asked our test participants if they could fulfill the tasks we assigned. We used the feedback to produce iterate our designs.We did this process twice, once for our low-fidelity design and once for our medium-fidelity design.

Users felt that ...

1
Forms were complicated

Users found that there was too much information required to fill out a lost pet form. They also did not understand the overall flow of the form.

2
Creating accounts was unnecessary

Users thought it was too much work to create an account for a one time use case. They would rather be notified about updates via email or phone.

3
Calls to action were unclear

Users could not find the call to action buttons without hesitation. The social media asthetic further complicated this issue.

Iterations

Left to right: Before and after we simplified the homepage to adhere to the overall aesthetic of the website and clarified the calls to action

Left to right: Before and after we removed the social media style design for creating a post as it was too complex for their immediate needs

Left to right: Before and after we reduced the amount of information for users to fill out by spreading the content among multiple pages

Photo of a screenshot of the new pet finding feature. The page shows the first page in the modal so the user can get started with filling in the lost or found pet form.

Check out our
Medium-fidelity prototype

View now

Learning outcomes

1
What did you learn?
  • How to collaborate with a multidisciplinary team from various backgrounds
  • How to use the strengths of each of the team members
  • How to adjust and work with existing branding guidelines and website constraints
2
What didn't go as expected? How did oyu overcome this?
  • Lots of assumptions about users that turned out to be incorrect
  • We overcame this challenge by giving importance to feedback and prioritizing the needs of users 
3
What would you change if you had the chance?
  • Since our scope was limited, we had to adhere to the constraints given
  • If given the chance, we would’ve changed the navigation menu and make it retractable
  • We would consider a mobile version to make it more accessible to mobile users
© 2024 Emma Sue Reichert