Client: TAPS | No-Kill Animal Shelter

Timeline: 4 Weeks

Role: UX Researcher, UX Designer, Interaction Designer, UI Designer

Tools: Adobe Illustrator, Adobe Indesign, Adobe XD, Invision, Zeplin

Deliverables: Responsive Website Design, Desktop Prototype, Branding

• The American Pet Products Association reports that millennials are now the primary pet-owning demographic, at 35 percent of U.S. pet owners.

• Percent owning pets by age group goes as following:
  18-34 age group 62%
  35-49 age group 62%
  50-69 age group 59%
  70 or over age group 41%

• Along with 35- to 49-year-olds, Millennials have the highest likelihood of owning a pet.

• 43% of 18-to 34-year-olds who do not have a pet now say they want one in the future.

• One reason why Millennials have a strong attachment to the idea of pet ownership is that 69% agree that “having a pet is a good way to get ready to have a family.”

• The APPA biennial survey of pet owners found that 84.6 million U.S. households owned pets in 2016, up 6.1 percent from 2014

• According to the report, the average age of cat owners is 55 to 64 years, and 58 percent are female.

• Dog owners are, on average, about a decade younger (age 45 to 54 years), and the majority (53 percent) are female.

• The survey finds that “family” households remain more likely to own pets than “non-families.

1:1 User Interviews

Participants were asked questions about their interaction with TAPS as well as question about how they how found TAPS and what compelled them to adopt from TAPS.

Total Participants Number: 5
Age: 29 - 52
Gender: 4 female, 1 male

I interviewed 5 participants who had interacted with TAPS before. All of them had adopted from TAPS in the past and are now following them on Facebook.

Insight:

• Users look online to see animals before going to the shelter

• Users’ visit TAPS to adopt a pet

• Users have already made up their mind about what they are looking for in a pet before starting to search

Need:

• Users need to view available animals online

• Users need to find out about the adoption process

• Users need to be able to view specifics details about pets available

Persona

Using the information gathered from the empathy map I built a persona. This is a great tool to build empathy with the user.

POV Statement

Using the insights and needs from the empathy map I constructed Point of View Statements, this helps understand the needs from our persona’s point of view. Using these I could then pose How Might We questions to start brainstorming how to solve the problem.

Sitemap

Using the present TAPS website I updated the sitemap to match my user’s needs and goals.

User Flow

With the knowledge of how the site was going to be organized I looked into how the users would flow through the site. I broke each step down further to really study my user’s flow and understand what steps and decisions my persona would have to take in order to achieve her goals.

Sketches

With all the research and brainstorming that I had done, I felt comfortable that I understood my users well enough to start sketching a site that would address their needs.

Mid-Fidelity Responsive Wireframes

Using the sketches I had developed I moved on to Mid-fidelity responsive wireframes of both the homepage and an interior pages, including desktop, tablet and mobile.

Mid-Fidelity Wireframes

Using Invission, I utalized the mid-fidelity wireframes I had created to prototype TAPS’ website.

Usability Testing

Now armed with a working prototype of the desktop website, it was time to test it and improve it. A key step to understanding how users are interacting with the Zeit website is to watch participants accomplish tasks on the prototype.

Total Participants Number: 5
Age: 21-64
Gender: 2 female, 3 male
Completion Rate: 100%
Error-Free Rate: 60%

Test Objectives

• Study the overall flow and navigation of users through the site

• Test how long it takes for users to achieve a specific task

• Identify any issues or areas of confusion that the user seem to encounter r

Task 1

• Find the available cats for adoption on TAPS’ website

Task 2

• Find the cat “Furball” and complete the adoption application for Furball.

Affinity Map

Using all the data collected in the usability testing from watching and listening to the participants I constructed an Affinity map. To do this, I organize each piece of the data in such a way that common patterns could be grouped to reach insights.

Insight:

1. Users struggle with how to go back to the homepage

2. Users are having difficulties finding a specific pet

3. Users struggle to understand what the next step on Adopt a Cat page is

Recommendations :

1. Add TAPS’s logo in the top left corner instead of low-fi word. Have the word “Home” as one of the options in the Nav Bar.

2. Add a “Search by Keyword or Name” option on Adopt a Cat and Adopt a Dog pages

3. Take away the top text ( Find your perfect pet...) so users see filter options and cats right away.

Prototype Revisions

Using the insights from the affinity map, I addressed the problem areas by redesigning some elements and updating a few pages.

Logo

While TAPS had an established logo that was well known, I felt it was important to keep the overall feel of it but to modernize it.

High-Fidelity Wireframes

Using the updated mid-fidelity wireframes, I applied the branding to create high-fidelity wireframes.

High-Fidelity Prototype

Using the high-fidelity wireframes that included the updates from the usability testing, I updated the prototype.

UI Kit

Lastly I updated the UI kit to reflect the current wireframes. Making sure that it included all UI elements so that the branding could be kept consistent.