Chameleon

Streamlining data entry for national animal shelters.

Chameleon provides the nation's leading software for animal welfare organizations, enabling agencies of any size to maintain accurate and comprehensive records on animals in their care.

MY ROLES |

UX Researcher, UX Designer

PLATFORM |

Desktop Web Embed Feature

TYPE | 

Client Project

TOOLS |

Figma, Miro, Zoom, Jira, Pen + Paper

STAKEHOLDERS | 

Director of Software Engineering

TEAM |

2 UX Designers

THE CHALLENGE

How might we help animal shelter staff expedite their animal intake process? 

Chameleon was interested in exploring a desktop web feature after learning about a pet image scanner I helped to create for another project, Paw Prints. One of the company's software products, Chameleon/CMS, provides a comprehensive animal intake form for animal shelters. Inputting accurate animal data on this form is critical in order to match animal records across the Chameleon system, which helps locate lost pets. But this is hard to do. 

The company needed my help to redesign Chameleon/CMS' animal intake form so that it could collect uniform animal data and streamline the intake process. Any feature added would need to be embeddable for any website or software, because the company currently oversees 30+ products. 

HIGH-LEVEL

GOALS

1. Help Chameleon collect uniform animal data
2. Streamline Chameleon's animal intake form

3. Create a desktop web embed feature that can be used on any website or software application

Step One: Learn

OUR USERS

To help me better understand Chameleon's problem with inconsistent animal data collection, I knew I had to go straight to the source and speak with an animal shelter staff member. Because I only had one week for this project, I asked our client to put me in touch with a Chameleon/CMS user. 

Luckily, the user I spoke with also happened to be a subject matter expert in animal welfare. As the Animal Services Chief of a prominent California county, she has worked in animal shelters for 30 years and was able to provide invaluable insight. 

portfolio - list icon.png
California animal shelters
use similar (but inconsistent) 
animal vocabulary
portfolio - paw icon.png
Shelter staff prioritize inputting animal breed, rather than SCENT
portfolio - tablet icon.png
Shelter staff use tablets or mobile devices to take pictures of animals
portfolio - edit icon.png
Shelter staff like to be able to edit information on the intake form

SCENT

METHOD

When speaking with our user, I learned that Chameleon software uses the SCENT identification method to capture animal data and match animal records across its system. The more accurate the data, the better the match.

 

SCENT stands for: 

  • Size

  • Coat

  • Ears

  • Nose

  • Tail

 

However, shelter staff tend to prioritize accurately inputting an animal's breed, instead of SCENT, for two reasons:

  1.  They are trained to determine animal breeds, not SCENT (which uses uncommon terms, like "Brachycephalic"

  2. SCENT descriptions are often inaccurate and vary from shelter to shelter

This not only highlighted the need for more consistent data, but also made it clear that there was an opportunity to help Chameleon to collect uniform animal data - one of my high-level goals. 

MEET SHELBY

Putting myself in the mindset of animal shelter staff, I created a persona, Shelter Worker Shelby, ​whose primary goals are to maintain accurate animal records and take nice pictures of animals to help them get adopted or reunited with their owners. Due to understaffing at her shelter, she hasn't been trained to use Chameleon or to determine SCENT. 

Persona
Persona

"

With a better understanding of Shelby's experience and workplace challenges, I was able to formulate a problem statement:

As people who care about animals, users want to quickly fill out an animal report and make sure it accurately matches the database because they want pets to be reunited with owners who care for them.

" 

Step Two: Make

IDEATION

With this problem statement and my persona in mind, I thought about my ideation goals, making sure to relate them to the project's high-level goals:

portfolio - list icon.png
A way to capture uniform + accurate data
portfolio - intake icon.png
A way to streamline the animal intake process
portfolio - camera icon.png
A way to help users take nicer or clearer pictures of animals
portfolio - embed icon.png
A feature that can be embedded on any website

In addition to streamlining the form, I wanted to incorporate the pet image scanner that I helped design during my Paw Prints project. The pet image scanner scans a photo of an animal and then automatically detects and inputs SCENT data. This feature would help meet the above goals and could also be embedded in a website. 

I made some quick sketches: 

Camera screen with tips for taking better pictures
Pet image scanner as an embeddable feature
Animal intake form with pet image scanner embed

With more time, I would have liked to have observed shelter staff using Chameleon's animal intake form so I could further understand potential pain points with the form itself. The next best thing was to ask my client for a screenshot of the current animal intake form so I would have a baseline for my redesign and know what form fields were important to retain. 

Chameleon's current animal intake form
Current animal intake form

LOW-FIDELITY WIREFRAMES

I used Figma to create a low-fidelity wireframe of the animal intake form so I could iterate quickly. Since this form is part of a larger database, I wanted to make sure I incorporated the essential form fields.  To help shelter staff more quickly fill out the form, I used the following strategies: 

 

 

 

 

 

 

 

portfolio - grid icon.png
Grouped similar form fields together
portfolio - intake icon.png
Used an F reading pattern to determine placement of pet image scanner + encourage users to scan an image before manually entering SCENT
Reorganized + simplified form sections where possible 
F

Due to the limited time for this project, I turned to design colleagues for feedback, and then made the following iterations: 

BEFORE

AFTER

Chameleon Low-Fidelity

MID-FIDELITY WIREFRAMES

Bringing my design to mid-fidelity, I added a "filled in" screen of the animal intake form to give the client a better sense of the intended interaction and to provide a representation of how the pet image scanner would auto-fill the SCENT descriptions.

Mid-fidelity: filled form
(SCENT would be auto-filled)

Step Three: Try

PREFERENCE TESTING

Due to the static nature of my wireframes, my test participants were not able to experience inputting text and uploading a picture to the animal intake form. Since I did not have a specific user flow to test,  I decided to reassess my testing approach. 

 

I conducted a preference test with 5 users to see if they preferred Chameleon's current animal intake form or the redesigned screens. 

 

I then used an affinity diagram to organize participants' feedback: 

Affinity diagram of preference test results

I compiled these insights into a priority matrix to help determine which iterations

I could make, given my time constraints.  

Iteration priority matrix

MID-FIDELITY ITERATIONS

I was able to implement all of the iterations listed on the priority matrix and made changes to my mid-fidelity wireframes before handing them off to my client:

BEFORE

Chameleon Mid-Fidelity

AFTER

Chameleon Mid-Fidelity Iterations
 

FINAL MOCKUPS

Mockup: empty form
Mockup: filled form

Below are the final mockups of my screens, which I created so that my client could envision the product in Chameleon's system. The simple and modern design provides a more updated aesthetic and the calming blues represent feelings of trust, calm, and order.

Chameleon Mockup - Empty Form
Chameleon Mockup - Filled Form

IMPACT

This was an exploratory project with my client, who wants to be able to discuss the technical feasibility of the pet image scanner with his development team before deciding whether to implement the embedded feature. However, the form redesign revealed ways to facilitate the collection of more accurate and uniform animal data, and is of interest to the Chameleon team: 

"First off, congratulations and well done! I will circulate your work with our staff, who I am sure will be interested to see and discuss it. We would need a larger team to develop and test this further."

- Evan Bowen, client

If I had more time and resources for this project, I would work with a software engineer to create a functioning prototype for further usability testing. I would also test with current Chameleon users​ to make sure my design positively impacts their workflow. 

Huge shoutout to my teammate, Martha Magsombol, animator extraordinaire.

Credits: 

Dripicons by Amit Jakhu

Feather Icons by Cole Bemis & Mauricio Quezada

Interested in learning more about my design process?

Check out another client project.