When The Client approached POSSIBLE they were looking to modernize their existing consumer website for Client-Petsite.

Client-Petsite is heavily traffic site. A great resource for pet related information and the largest facilitator pet adoption.

Although the site has had great success, it's website and tools have fallen behind over the years. A sprawl of content is spread over 3 websites and outdated administrative tools.

Our goal was to be true to Client-Petsite's users and Client-Petsite's mission with a website that increases its overall effectiveness in elevating the status of pets to that of family members.

To comply with my non-disclosure agreement, I have obfuscated or removed confidential information in this case study. The information here is my own and does not necessarily reflect the views of POSSIBLE or The Client/Client-Petsite.

My Role

I was responsible for the user experience strategy and design of the responsive consumer facing site and mobile site for pet shelters. I lead the UX work, producing all major deliverables and presenting these to the executives and internal team.

I worked alongside another a Art Director and Project manager who managed deliverable timetables, content organization and requirements gathering.

Design & Execution

I designed a website that would scale responsively and a mobile site. The website is the redesign of the Client-PetSite site, and mobile site is for pet shelters to use to manage their pet inventory.

Requirements gathering

I supported my project manager in gathering requirements from the client. The client's business objectives and the shelters have different goals, as such, these needed to align in the design of the site. I created and maintained lists of questions we needed answered during meetings.

Design Execution & Validation

Daily meetings were needed to present the business stakeholder designs as they were completed for sign off and handing over to the development team.

Clean up & organization

I came onto this project after a designer had started it and had been let go. I organized scattered work and salvaged what I could. I streamlined documentation so that creative could begin on the graphics to speed up production.

Validation & alignment

As features and functions were designed in my wires, the team needed to review and make adjustments as needed. I presented every few days to the team showing current progress and discuss questions that arise.

Information architecture

The consumer site spanned 3 websites which needed to be organized. Sitemaps and hierarchy needed to be understood by those working on it. I am a big proponent of this documentation as it helps find redundancies and dependencies.

The Challenge

Enhance what works, discard what doesn't

Client-Petsite has been around and doing well since 1996 when it started. But it has lagged behind it's competitors in recent years.

Although it has a great history and has facilitated hundreds of thousands of adoptions, it needed to retool to remain the largest source for pet adoption for years to come.

Working at an Ad Agency means things needs to get done as quickly as possible with high pressure weekly client presentations. Designs not only need to deliver on what was agreed to in the pitch, but it needs to look good for presentations.

The Approach

Design for emotional connection and ease of use

Users arrive at the site with specific intentions. They could be a possible adopter, someone who has adopted, or someone who is reading the editorial content. They may be all of these, or one. Building a site that allowed for all of the users was the goal.

Analyze the editorial content currently on Client-Petsite, find out what users read and didn't read and where were the pain points in navigating the site.

Understand the user's goals and what has meaning to them, and then create a design that gets out of the way and allows the content or pet to connect with the user.

Understand how users currently user the site, what encourages engagement, and what their needs are.

Client-PetSite Design

Design for user generated content

Shelters will be populating the site with their pets photos and information. This meant that the design needed to be clean and orderly.

Articles are very easy to read in large type, and clear typographical hierarchy. The user interface’s buttons are intuitive and not ambiguous to their actions and function.

Treat the pet choosing process like a dating site. Show the pet's personality in their profiles and allow users to 'heart' them. This helps the site record which pets gets a lot of attention and analyzes what is causing it by finding patterns.

“Treat the pet choosing process like a dating site. Show the pet's personality in their profiles... ”
Shows two photos of whiteboard concepts.
Client-Petsite Pro Design

Design for ease of use, design for care and thought.

Shelter employees often have a lot of turn around in their pet inventory. Some Pets go quickly, others stay much longer at shelters. These pets need to be brought up to the user that they need attention too.

One of Client-Petsite's missions is to eliminate the need for euthanasia of adoptable pets. We took that to heart.

As pets stay longer at shelters they become more likely to be euthanized. There may be many reasons for this. Our research showed that users make adoption decisions based on better descriptions, clearer photos where the pet is put in the best light. Client-Petsite Pro has articles on these topics. Articles were contextually placed where they would be most useful.

Tools for Shelters

Break it down, and chop it up

The List a Pet process is one of the most important parts of a shelter employees job. It has a huge impact on adoption rates of pets, and it something that will be used frequently. It was a high priority that it captures the information, and that it be easy to use while the user are moving around the shelter.

I designed a 6 step process that broke up adding a pet to easy to digest steps. Each screen's information related, and included helpful tips along the way.

Easy, more general questions were asked to start, slowly working to more detailed information. As questions were answered, they determined what information was needed further in.

Personality averages were used for pet breeds. These can be changed, but they are likely settings based on breed type, size, age, and so on. We tried to find every way to eliminate work for the user.

“Treat the pet choosing process like a dating site. Show the pet's personality in their profiles... ”
UX Artifacts

Design tools

Since these wires would be seen on screens for presentation to the client, we opted with a vector wireframing application. Details needed to be crisp and clean.

I used a combination of Omnigraffle for the wireframes, Axure RP 7 for more complex sitemaps and userflows, and Adobe InDesign CC when putting together a deck for presentations.

We used Basecamp for project mangement.


What I Learned

Put some love into your designs

A constant challenge as a designer is how to help the content reach the viewer, while keeping it useful.

On this project part of the goal was to empower the shelter employees to create better listings. Each listing is a possible connection, keeping that thought throughout the desinging process goes a long way.