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
Desktop Web Embed Feature
Figma, Miro, Zoom, Jira, Pen + Paper
Director of Software Engineering
2 UX Designers
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.
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
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.
California animal shelters
use similar (but inconsistent)
Shelter staff prioritize inputting animal breed, rather than SCENT
Shelter staff use tablets or mobile devices to take pictures of animals
Shelter staff like to be able to edit information on the intake form
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:
However, shelter staff tend to prioritize accurately 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 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.
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.
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
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:
A way to capture uniform + accurate data
A way to streamline the animal intake process
A way to help users take nicer or clearer pictures of animals
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.
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:
Grouped similar form fields together
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
Due to the limited time for this project, I turned to design colleagues for feedback, and then made the following iterations:
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
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
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:
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.
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.