Design of the Pet Finder Web Application

Nelly Peters-Campbell, Zane Harvey, Joao Marcos Costa Salles, Miranda Squires
DESIGN

ABSTRACT

One design decision that was a necessity on our website

was adding that sidebar navigation tool to the left of the
site. This not only provided a familiarity throughout the
pages, it also allowed for an easy to understand tool that
helped sort for animals the user was interested in. With this
easy side bar navigation (figure 1), it appeals to any and all
users allowing even the most technologically challenged
user a chance to understand and fully utilize our website.

In this paper, we describe the design of the Pet Finder web

application that we created throughout the semester. The
application allows searching for adoptable animals in a
local shelter conveniently, online. This final report
discusses our problem statement, suggested solution,
project design decisions, development, and usability testing
and evaluation.
Author Keywords

Web application, usability testing.

ACM Classification Keywords

H5.m. Information interfaces and presentation (e.g., HCI):

Miscellaneous.
INTRODUCTION

Our project is a website hosted on the university server

where you can easily navigate through the menu to search
for animals that are available for adoption at local shelters.
On the website are available pictures, biographies of each
animal including: breed, age, personality traits, etc. This
information is found in all pet descriptions that can be
accessed by a click on an animal picture. Besides searching
features that are filterable, this website is also focused on
human interaction and user experience with its simplistic
design and consistent color theme. To develop this website
further in the future we will need to contact the local animal
shelters to get their consent about using information about
their animals and shelter online and visible to the public.

Figure 1. Pets Available page, featuring global navigation.

After heuristic evaluation and user testing, we received

many suggestions to redo the pet profile where the bio,
health history, age, breed, gender, etc., is located. So we
took this into account and reorganized the pet picture and
bio text to give the page a cleaner look (figure 2).

PROBLEM

Adopting a pet is a huge step in anyone's life. The process

can prove tedious and time consuming, which can
ultimately dissuade a potential adopter from carrying
through with their decision. With thousands of animals
living their lives in cages, we decided to create an intuitive
way to speed up those lengthy pet adoption processes and
allow the user to get an idea and basic understanding of
what they are looking for before having to make the trip to
the animal shelter. The users range from young families
making their first investment into taking care of another life
to elder citizens looking for companionship in the later
moments of their life.

Another design decision we made while taking into account

suggestions made by some of our evaluations was first
fixing minor errors in the faceted search, as well as, adding
the category, good with, for potential adopters who want
to know if an animals is good with other pets they may
already have or children.
Alternative designs we had discussed originally was to add
a live chat box for potential adopters looking at the site to
be able to talk to an online person to ask any questions they
may have, but we decided not to implement that until we
contacted local shelters, and officially decided whether we
would actually make this site public in correlation with a
few of the local shelters whom may be interested. However,

Our primary tasks that we focused on during this project

was to create a navigational menu that would be suitable for
both novice and advanced computer users, as well as, basic
sidebar and filtered search options for ease of access for
each user to find exactly what he/she wants.
1

this was more of a future goal because we wanted to focus

on navigation and efficient and successful basic and filtered
search tasks.

EVALUATION

In order to gain a better understanding of the user needs, as

well as to develop a better sensibility of their motivation
when looking for a pet companion, we conducted several
interviews and one-on-one usability testing sessions with
three participants representative our target population: (1)
had a pet adopted from the shelter, (2) was thinking of
adopting a pet, (3) had a pet that was not adopted from the
shelter because the owner was skeptical about adoption
from the shelter.
We performed the testing of the prototype by asking the
participants to perform 3 predetermined tasks. The tasks
scenarios were printed on separate sheets of papers, the
users read the tasks aloud and then carried out the tasks
while the interviewer observed and took the notes of the
participants comments and the completion of each task.
The users were encouraged to think aloud while working on
the tasks. We also conducted contextual interviews at the
participants home or place of work.
The key insights resulting from our interaction with the
participants included: (1) participants expressed frustration
when they clicked off the page, returned to the query page,
and found their initial query gone, (2) additional metadata
and filter options were needed, such heath, special needs,
and pet background information (3) better visibility was
needed for the feedback messages.

Figure 2. Pets Available page, featuring faceted navigation and brief

pet profiles.

The final design was simplistic with a consistent theme as

well as buttons that were consistent on each page in order to
appeal to both novice and experienced computer users.

All user concerns and technical issue were addressed in the

final design.

DEVELOPMENT

When we first developed this idea as a group we were set

on making a mobile app that would have profiles of animals
in local shelters displayed with a short bio and health
history. The user would then decide if he/she was interested
in the animal on initial glance. If not interested, the user
would simply move onto the next animal. If interested, the
user could find out more about the specific animal, set up a
meeting time, and even begin the adoption process right
from the page. Originally using real dogs and cats from the
SPCA was an offered idea, but we soon realized that would
require a lot more work, time, and gas to accomplish so we
ultimately decided against it. As we began creating our Pet
Adoption Website, we realized that we could take on more
than just cats and dogs adding a little variety to our website.
We implemented a side navigation bar that allowed the user
to specify exactly what they were looking by age, gender,
breed, species, etc. One problem that may have affected the
usability of our interface was the fact that we had dead links
throughout our site that we were planning on getting to but
never had the time. Also, some of the links were there to
show what the website could do in full if it was to be
developed further such as the adoption process online, and
links to local animal shelters.

REFLECTION

If we could take what we know now and do it again I

believe our process would go much smoother and our
overall ending product would have been completed to a
higher degree. Another point to bring up is the fact that we
now have some sort of grasp on user testing. During our
first round of tests, we as a group were very slow and our
testers were losing interest. I think if we conducted the
same tests now it would go much better and more data
could be collected ultimately making our product better in
the long run. As we began brainstorming ideas and coming
up with a design of our application I think everyone learned
an important lesson in the design process and that is
everyone on the team doesn't have the same design taste.
This leads to small alterations within the group and slows
down the project completion rate. If we could go back to
the beginning stages of our project, we would have focused
more on the implementation and functionality of our
application rather than the design and feel. Although we
were able to accomplish both by the end, we think that
having a working application is more critical than having a
merely aesthetically pleasant app that doesnt work.

The columns on the last page should be of approximately equal length.