Chameleon
Streamlining data entry for national animal shelters
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
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.
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
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.
Uniform and accurate data
Streamlined animal intake form
Clearer pictures of animals
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.
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
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
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.
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
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.
Typography
Source Sans Pro
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
.png)
Empty shelter intake form
.png)
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.