Lend a Paw

Lend a Paw is an association of animal shelters. They partner with shelters all over the country to raise awareness and discoverability to the work and pets waiting for a home. By partnering with shelters all over the country they want to create a platform that allows people to see all the available animals in any shelter close (or not) to them. They hope investing in a website will help people discover animals and learn more about shelters.

Objective

Design a website that covers core functionality: search for pets, information about specific pets, and information about Lend a Paw and shelters. They don't have a defined brand, so they are also looking for a new branding.

Research

There are a lot of individual shelter websites but not a lot of websites that compile the animals available for adoption. So research had to reference both types of research through competitor analysis and user interviews. I have raised dogs but I personally have never adopted an animal or searched for animals to adopt online. As a result I was fairly uninformed about the current space and what was important to shelters as well as adopters.

The main research goals were

1. Find how people currently search for a pet to adopt

2. Understand what is most important to people looking to adopt a pet

3. Understand the messages the shelters want to communicate to adopters

Research Findings

Competitor Analysis

Since this is a non-profit it's important to consider the goals and messages the shelter wants to share with potential adopters as well as the goals of the adopters. I researched a lot of direct competitors as well as specific shelter websites. I learned that shelters want to promote adoption as well as other ways to get involved with shelter such as fostering pets, volunteering and donating to the cause.

User Interviews

Most participants chose a shelter based on the proximity to their location. I also found it interesting that many participants did a lot of research before choosing the pet they wanted to raise, but ultimately the decision came down to the pet they had the best emotional connection with when the went to see the pets in person.

I interviewed people who had adopted dogs, cats, or both in the past and found that there were a few common requirements they had for their search.

1. General Criteria Searching -for example, a fur color, or a size and age rage.

2. Personality of the Animal - to make sure that it can be accommodated, cat owners also often planned to adopt specific cats but changed their minds once they met them

3. Past Experiences of the Animal - dog adopters thought it was important to know what the dog experienced in the past, as it could give information about why it acts a specific way

4. Lifestyle Match - for example to fit with the type of living space they have or the amount of time they can spend with the pet

Interaction Design

Sitemap

Created as an outline and to make sure the goals and needs of Lend a Paw, shelters and users are fulfilled.

User Flow

Based on the persona created I made a main user flow to understand the typical interaction that the user would have with the website.

Sketches and Wireframes

The next step was to sketch out a few ideas on paper then create wireframes of all the main pages.

Branding

Since the brand didn't have a logo or defined concept I thought about what impression and feeling a pet adoption website would want to give off. I decided I wanted the feeling to be friendly and bright to encourage adoption, and chose colors and fonts accordingly.

Starting from the name I thought of Lend a Paw worked well for the non-profit. It gives users the feeling of helping out whether it's through adopting, fostering, volunteering or donating. For the logo I made it an image of a dog at first glance, but a closer looks shows it is made from the letters P, A, and W.

After choosing colors, typography and images to fit this feeling. I created a style guide for the brand.

I wanted the feeling to be friendly and bright to encourage adoption.

Increased Fidelity

I then applied the style guide to the wireframes to create a mid-fidelity design that could be used for usability testing.

Usability Testing

I created a prototype in inVision for usability testing. I tested the main user flow or searching for a pet and sending an inquiry about it. to see.

The main testing goals were

1. Evaluate the navigation and flow of the website

2. Get the users impressions of the website

3. Observe possible problems or hesitations with the experience of the website

4. Confirm the flow and functionality aligns with the user’s expectations

Test Results

The testing went fairly smoothly and many participants liked how detailed the pet page was. There were a few things that could be improved. Clarifying some of the call to action buttons and what they do caused a few hesitations for the participants. Most notably the call to action button to contact the shelter caused a bit of confusion as to what would happen when it was clicked.

Affinity Map

Potential Solutions

Clarifying the main call to action on the home page

Choosing one call to action button for contacting the shelter

Clarifying the buttons for a new search on the browsing pages

Prototype

Click the top right corner of the prototype to view full screen