I came up with a list of competitors based on Google searches and comments from the people I interviewed. Some of the topics I used to evaluate each site included: site purpose, primary navigation categories, search filters, personalization, competitive advantage, strengths and weaknesses, and design.

From my interviews, I found that there were two types of users — one type that just wanted a pet that would be a good companion, and the other type that wanted a specific breed. For this reason, I developed two personas to help me develop the site.

After reviewing my findings from the user interviews and competitive analysis, I created a product roadmap, which detailed the features that I thought users would find helpful, and then prioritized the list. Some of the key features for the product included the following:

Get Matched
In order to help my persona “Elly Abernathy” find a compatible pet pal, I thought that the site should have a personality assessment that would match Elly with suitable pets, similar to the approach of many online dating sites. This would help users who just wanted a pet that would be a good fit.

Customize Your Search
For users like “Amy Turtledove,” who knew what kind of pet they wanted, the site should have advanced search filters. Users would be able to filter results based on qualities relating to a pet’s breed, behavior, and appearance.

Simple Application Process
In order to make the adoption process more straightforward for users, I proposed including a basic application on the site. A common pain point among the users I interviewed was that the process was long and involved too much paperwork. Having a basic application on the site would streamline the process and allow users to apply to adopt multiple pets without the extra paperwork.

Pet Transportation
To address another pain point of “Amy Turtledove,” I wanted users to be able to search for pets that are far away from them, with the option to have them transported to them.

With the list of features I was planning on including in mind, I created a sitemap to outline the sections and pages of the Pet Pals site.

I created a user flow diagram in order to identify and visualize the two main flows that users would take in order to adopt a pet. The two flows are:

• Users fill out a quiz first to get matched with pets, and then see their match results
• Users just search for pets using filters without having to fill out a quiz first

Since I wanted to show two user flows, which included a quiz and an application, and also show how a shelter would be able to update the status of their pets, I ended up creating over 70 pages of wireframes. Shown here are wireframes of the homepage, the opening section of the quiz, a filtered results page, and a pet profile page.

The original name for the pet association was “DYR,” but I thought the organization should have a name that sounded friendly and could be easily understood. After brainstorming different options, my top favorites were Pet Pals and Furever, and I decided to explore different logo options for those two names. I landed on a logo option for “Pet Pals” that was simple and would work well on different screen sizes.

Before designing high-fidelity comps, I came up with a color palette and a couple typefaces that would work well together. I wanted the site to have a friendly and modern look and feel. For this reason, I decided to have a bright orange as the predominant color for the site, and use “Quicksand,” a san-serif typeface with rounded terminals, for headers, and “Roboto Slab” for body copy. From there, I created different visual assets for the UI kit such as buttons, input fields, and profile cards.

Shown here are a few key desktop and mobile screens for the site.

With my wireframes, I created a low-fidelity prototype in Invision and tested it with five people, all of whom were pet owners. My main goal was to test the user flow and to see if they could navigate through the site and submit an adoption application. I also tested if they could log into the site as if they were a pet shelter volunteer and change a pet’s adoption status.

The participants were very positive about the features I had included on the site — namely, all the advanced filters, the online application, a pet profile that highlighted the pet’s unique personality, and the ability to search for pets that can be transported. Surprisingly, only one of the participants took the quiz. The majority told me that they knew what pet they were looking for and wanted to start searching right away.

After completing my user testing, I created an affinity map to help me summarize the results. My major takeaway was that I needed to make the height of the filter menu shorter, so that users could see more of the filtered results. The filter menu was covering too much of the screen, and as a result, it wasn’t clear to everyone that the displayed results were a result of the filters they were selecting.

The final step for this project was creating a high-fidelity prototype. Below is a screen capture of me clicking through the prototype, but you are welcome to explore the prototype on your own.