Chameleon

Streamlining data entry for national animal shelters

macbook white clay mockup.png

01 Overview

 

Type

UX Research

UX Design

Duration

1 week sprint

Team

Kristen, UX Designer, UX Researcher

Stakeholders

Director of Software Engineering

02 Background

The Opportunity

Chameleon was interested in exploring a desktop web feature after learning about a pet image scanner I helped 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 to match animal records across the Chameleon system, which helps locate lost pets.

But this is hard to do.

The Challenge

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.

The Hypothesis

A database form that uses an image scanner to auto-fill information will streamline the animal intake process.

 

Original shelter intake form

Original shelter intake form

High-level Goals

Collect

Collect uniform

animal data

Streamline

Streamline the

animal intake form

Embed

Create a web embed feature for flexible use

03 Research

Expert Interview

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. With limited time, I asked the client if I could speak with a current customer. Luckily, she was also a subject matter expert in animal services.

I interviewed the Animal Services Chief of a prominent California county, with over 30 years of experience in animal care.

I wanted to know about...

Her daily tasks at the animal shelter

The tools and technology she uses at the shelter

The animal intake process

How staff are trained on the animal intake process

The methods used to identify animal characteristics

 

"There’s no standard method to determine an animal’s characteristics. Our staff use their best guesses to determine a dog or cat’s breed. For mixed breeds or

mulit-colored animals, they usually pick the predominant breed or color they see."


- Animal Services Chief
 

 

04 Insights

SCENT Method

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 description

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

They are trained to determine animal breeds, not SCENT

(which uses uncommon terms, like "Brachycephalic")

SCENT descriptions are often inaccurate and vary from shelter to shelter

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

I also learned that: 

Animal shelters use inconsistent vocabulary

Shelter staff prioritize animal breed over SCENT

Staff use tablets or mobile devices to take animal pics

Intake form data fields should be editable

Persona, Shelby
 

05 Concept

Key Features

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

clipboard.png

Uniform and accurate data

streamlined.png

Streamlined animal intake form

camera.png

Clearer pictures of animals

embed.png

Web embed feature

Sketches

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.

Sketches

06 Wireframes

Low-Fidelity

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 streamline the form, I...

Grouped similar form fields together

Reorganized form sections

Clarified form fields

Used the common F reading pattern to encourage users to first scan images rather than manually enter SCENT

Form, low fidelity

Mid-Fidelity

With limited time, I turned to colleagues for design feedback and critique. I further simplified the form and brought my design to mid-fidelity.

Iterations:

Used system’s original header to maintain consistency

Added section titles for easier navigation

Reorganized SCENT section to save screen space

Expanded “Additional Details” field for more information

Form, mid-fidelity

07 Testing

Preference Test

Due to the static nature of my wireframes, I didn’t have a specific user flow to test, so I conducted a preference test with 5 users.

Did users prefer Chameleon’s current intake form or the redesigned screen?

Key Learnings

I compiled the following insights into a priority matrix to help determine which iterations I could make, given my time constraints.

Guide users through the form.

Test participants preferred the layout of the redesigned screen, which uses whitespace to reduce cognitive overload and grid alignment to provide consistency. I learned that I could help users move more quickly through the form by further breaking down sections and adding character limits to form fields that allowed longer responses.

Use common database patterns.

Users were confused by the Animal Summary section at the bottom of the form, because this information is already listed at the top. Replacing this section with a database form would maintain consistency with common patterns and would allow the form to directly sync with Chameleon’s system.

Give users more information.

Adding helpful information, like in-line tips for uploading a picture or when information has been auto-filled, would help shelter staff recognize their options and readily spot which form fields still need to be filled.

Iteration priority matrix

Mid-Fidelity Iterations

I was able to implement all of the iterations listed in the priority matrix, further streamlining and increasing the usability of the form.

Iterations:

Divided the Animal Identification section

Added microcopy describing how to upload an image and which fields will be auto-filled

Added character limits to longer

form fields

Redesigned Animal Summary section to look and function like a database

Form, mid-fidelity version 2
 

08 Visual System

Colors

The simple and modern design provides a more updated aesthetic for the Chameleon system. Shades of blue evoke feelings of trust, calm, and order and shades of gray are commonly used in databases.

Color palette

Typography

Roboto

Bold, medium, and regular; used for headers, sub-headers, buttons, and body text. This commonly-used sans serif font increases legibility, especially of small text.

09 Design

Empty form, final design

Empty shelter intake form

Filled form, final design

Filled shelter intake form

 

10 Outcomes

Deliverables

Redesigned Chameleon’s animal intake form to streamline accurate data entry and designed and pitched embeddable feature that scans images and auto-fills form fields.

 

Impact

Usability testing showed that my redesign was favored 85% more than Chameleon’s current intake form.

This was an exploratory project for 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...

With more time and resources, 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.