Annie Devine
PC Banner.png




PetConnect is an association of animals shelters aiming to promote awareness and discoverability of pets looking for a home.

Around 6.5 million animals (roughly 3.2 million cats and 3.3 million dogs) enter US shelters every year. On average, less than half of these animals are adopted in a given year, and about 1.5 million are euthanized.

PetConnect wants to increase the amount of shelter adoptions by helping people find their perfect companion online. They were in need of a responsive website design for users in search of a pet, and their secondary priority was an interface for shelters to upload animal information easily.


I needed to find out how current pet adoption sites (PetFinder, etc.) have designed their user experience – especially their search and filter capabilities – and to what degree these were aligned with the needs and goals of users looking to adopt a pet. My secondary research looked into the current landscape of pet shelters, and the major online pet adoption competitors.


Secondary Research p1.png
Secondary Research p2.png

I conducted interviews with both shelter customers and shelter employees. The goal of my primary research was to understand what the process of discovering a pet is like for people, especially online: Their likes, dislikes, pain points, frustrations, etc. I also wanted to understand how shelters find the process of helping people to connect with the right pet online. 

  • Customer Successes:

    • PetFinder’s wealth of information all consolidated in one place

    • PetFinder’s highly customizable search filters

  • Customer Pains:

    • Outdated or inaccurate info on PetFinder, and duplicate listings

    • Breeder websites (hard to find, expensive dogs, ethical concerns)

  • Employee Successes:

    • Ease of use with PetFinder; Uploads automatically from their website

    • Get a lot of responses through PetFinder

    • Social media is an easier way to highlight animals with special stories

  • Employee Pains:

    • Stretched for resources to keep animal info updated (rely on volunteers)

    • Social media rarely leads to adoption (mostly just get nice comments)

    • People are inflexible; They only want the specific animal they saw online

Using the data and insights from my research, I crafted a persona – Evelyn – to help me keep the goals and needs of a typical PetConnect user at the forefront as I moved into the next project phase: defining and ideating.

Persona v2.png

Define & Ideate

Goals v1.png

Referencing my project brief and research findings, I created a Venn Diagram showing how the goals of PetConnect, its users, and animal shelters overlap. I wanted to ensure I was aware of how different interests converged or diverged among stakeholders as I moved forward with brainstorming and ideating.

Using the insights and needs from my empathy map, I created a handful of POV (point of view) statements with the following format:

“Evelyn (our persona) needs [need], because [insight]”

For each POV statement, I developed a HMW (“How might we…?”) question to identify the specific issues that the PetConnect website would address:

“How might we help Evelyn achieve [need]?”

Information Architecture

After brainstorming potential solutions to my HMW questions, I began outlining and prioritizing a list of features for PetConnect's website:

Screen Shot 2018-05-01 at 3.09.35 AM.png

Using the features listed as P1 and P2 in my feature matrix, I created a sitemap for v1 of PetConnect's site to outline all the primary screens:

Sitemap v1.png


To understand what UI elements will be needed as I moved into prototyping, I outlined the primary user tasks on PetConnect's site, and for each task I listed their associated screens and requirements. From there, I began sketching out my screens to determine their general layout and hierarchy.

Sketches 1 of 3.png
Sketches 2 of 3.png
Sketches 3 of 3.png

Using my UI requirements doc and my prototype sketches, I created wireframes for all the screens that users would need to accomplish the user tasks laid out in my previous deliverables. In addition to helping me determine the layout and hierarchy before delving into the rest of the visual design, these wireframes would also aid me in the next phase of the project: usability testing.

Search Results.png
Pet Details.png


To assess the usability of my wireframes, I developed a plan for conducting live testing sessions with a handful of participants. I outlined my objectives, test subject, methodology, and script (scenarios and tasks), then set up times to meet with my participants either in person or via Google Hangouts. I wanted to see how potential PetConnect users reacted to my prototypes - specifically, how easily they completed my tasks, and whether they experienced any frustrations or roadblocks along the way.

I synthesized my notes into an affinity map to find patterns among the participants:

  • Unsure how to access user profile to see saved searches and favorite

  • Older participants weren’t immediately familiar with share/favorite icons

  • “Ask Shelter” vs “Contact Shelter” vs “Ask About…” confusion

  • Some assumed “Adopt {Pet Name}” would take them straight to a payment page, rather than the application

Next, I translated my observations into insights and recommendations that I could implement for my hi-fidelity wireframes, and sorted them by priority.


Final Takeaways

Since I had a limited timeline for this project, I only had the chance to conduct usability testing on my mid-fidelity wireframes, but I would have liked to test the effectiveness of my high-fidelity wireframes as well.

If I had more time, I also would have liked to design the PetConnect interface for shelter employees – ideally working more closely with the employee that I interviewed during my research phase.