Website Redesign

DOCPAC: Improving pet adoption, donation experience, and events

Overview

CLIENT: DOCPAC.net
ROLE: UX Designer
Team of 3 (part-time project)
PROJECT DURATION: July 2020-February 2021

About DOCPAC: Established in 1963, DOCPAC  (formerly Six Flags Humane Society) has been part of Victoria, TX for a long time.  Its mission is to shelter homeless pets and get them adopted. 

Contribution to project:

  • UX Research 60%: survey, user interviews, affinity mapping, card sort, site map, heuristic analysis, competitive analysis, user testing
  • Design 25%: Design Evaluations, Iterations
  • Design Direction & Discussion: 15%

Challenges

DOCPAC’s website looks outdated compared to pet adoption agency such as Friends for Life animal shelter and major adoption agencies, such as ASPCA or Austin Pets Alive.
The website’s user experience needs improvement, example: donation and adoption pages.

Shown here: DOCPAC's redesigned adoption page

3 Goals for Website Redesign

1

Adoption

Increase Adoptions

2

Donations

Increase Donations

3

Events

More community outreach

UX Process

The UX process is typical but I started the process by combining user interview with user testing to discover areas for improvement.

1. Discover

Stakeholder Interview
Survey
User Interviews/User Testing on current site

2. Analysis

Card Sort/Tree Jacking
Heuristic Analysis
Competitive Analysis

3. Design

Wireframes (by KC)
Prototype 1
Design Evaluation

4. Testing

User Testing
Design Iteration

Selected Artifacts from Research

Current Website Analysis and Findings

1

Heuristic Analysis

Look for areas for improvement

2

Competitive Analysis

Find Opportunities

3

User Interviews

Find user wants, pain points

The website was analyzed using these techniques: Heuristic analysis, competitive analysis and user interviews.
Below is a summary of findings.

Heuristics: A Few Pointers

  • need better page organization
  • needs consistency in links,  wording, process
  • no search/sort/filter for pets
  • disappearing/reappear donate button

Competitive Analysis: SWOT

Strength

Branding, longevity, dependable staff

Opportunities

Build on community/following, extend services or target audience

Weakness

older demographics, website needs refresh, cleaner look.

Threats

Other adoption places, no or slow growth in adoption

User Interviews

  • missed opportunities: sharing, adopt button
  • confusing forms
  • streamline donation page
  • image mistaken for banner ad
  • cannot find event page
  • photos are important
  • dedicated to owning a pet and will go to length to secure one
  • lack of right kind of information on pet adoption website for users to determine if pet is right for them
  • users want a pet for family, as companion for another pet or for themselves.

Heuristic Analysis Example

From the donation page of the current website:  submit button only appears after you check the “Agree” box. This affects donation because users could quit as they can’t see the submit button. For this reason, there is a failure in visibility of system heuristic.

A Snapshot of the Affinity Map

Some insights:

  • users want to see large pet images
  • users want to know the history/behavior/personality of the pet they are interested in adopting
  • forms need clarification
  • content writing can be improved for clarity or more “friendly” , less impersonal tone

Design Changes

current Adoption page

Adoption Page Iteration by KC

Design Iterations: Before/After

Pet Page

(From left to right, top to bottom) the pet adoption pages went through several iterations. Some of the changes that were implemented included: larger pet images, changes to the wording (e.g pet size to include weight, pet fee instead of pet price, button to adopt, links to share pet info. These were all based on user interviews.

my Adoption page iterations

Final design

Event Page

DOCPAC did not have a “EVENT’ menu item on their website. Their event calendar does not have many events. Sometimes it is empty.
  • Event page will allow them to post in one place their event and it would be easy to locate
  • Visitors can see past and current events

Event Newsletter

A Newsletter template was created. Why? One of the competitive advantage is keeping audience engaged and loyal.

This newsletter was created with this intention, with events and suggestions based on pet holidays to help foster community–through knowledge sharing and promotion of DOCPAC pet events.

This is a proposal–It depends on whether there is staff to implement the newsletter and measure user engagement. DOCPAC could use pet holidays calendar to fill up their come up with events, even if they do not want to do newsletters.

Site Map Improvement

Site map based on Google Analytics

Current DOCPAC Navigation

Google Analytics data for top visited pages

New Navigation takes into account Google Analytics data as well as card sort data. For navigation design, dark blue color was used as a visual cue and as a contrast against the red donate button (see below/next section)

User Testing: Color Changes

Above are different “red” colors that were considered for the donate button, as well potential change to the navigation, should users have difficulty navigating. 

Red colors above were from Google Colors tool.

Color Contrast

User suggested better contrast in "DONATE" button. Since Red, Blue and Camel colors are brand colors, we worked on choosing a brighter red color.

Potential rearrangement of Navigation

One user did not see "Adopt" in the navigation while others didn't have difficulty. We will continue to keep an eye on this to see if it will be a major concern.

Challenges & Takeaways

Some challenges:

  • finding users to interview: even when we received “yes” from survey
  • limited data: google data for navigation/user data was limited from website
  • interviewee preferred phone interview. We had to figure ways to record the phone conversation.
  • It was challenging to recruit users from Victoria when we are 2.5 hrs drive away.

Some takeaways: What did I learn

  • Not perfect but it’s a start: I leaned on my UX network for remote recruitment: user interviews and testing
  • Do detective work on users to help to build during interviews
  • Sharing and discussion: design is better via knowledge sharing and team discussion

Next Steps

The prototype is mostly done. We decided to go ahead, send the project to get approval, and put it in development. Once website is launched we will look at metrics and iterate where we find problems.

Scroll to Top