The redesign of forms for law enforcement aimed to enhance usability in challenging environments, such as inside patrol cars with non-responsive touchscreens and limited space for user input. By incorporating visual cues like red asterisks and borders for required fields, as well as client-side validation for date entry, phone numbers, and conditional logic, we ensured that officers could efficiently complete forms with minimal errors. These changes not only improved the speed and accuracy of data entry but also reduced frustration, ensuring that law enforcement personnel could rely on the system to capture valid information while maintaining safety and focus on the job at hand.

My Role

My role in this 8-year project involved designing the entire design system and coding the front-end for 30+ law enforcement applications, including over 130 inquiries interfacing with the FBI and national law enforcement agencies. I also served as scrum master and project manager, overseeing the migration from a mainframe environment to a modern stack using HTML, CSS, JavaScript, Bootstrap, and a C# and WebService back end. The project ensured compliance with CJIS requirements and federal restrictions while improving system performance and usability.

Original Design

When time is essential, officers must know which fields are required for submission; however, as you can see, required fields are difficult to identify on this screen.  Now imagine this screen on a small 600×800 pixel screen in a police car, and you have to try to tap each field to enter the data (hence the large checkboxes).

A form showing fields that are nearly impossible to tell that they are required.

The Redesigned Form

On the redesigned form, officers can quickly scan and tell which fields are required so they can enter exactly what’s needed accurately and efficiently.

Form that can easily be scanned to see fields that need to be completed.

Required Field States

Visually showing users when a field is required and no longer needs attention ensures law enforcement officers can efficiently scan the forms and complete all necessary fields quickly and accurately.

A required field with nothing in it shows a thick red bar on the left, upon focus the bar changes to a teal and the field is outlined, then when there is data in the field the outline is gone and the bar on the left is removed.

Field Masking

Field masks ensure users can enter valid data and don’t need to worry about formatting. If they type anything other than numbers into the phone field for example, additional characters are ignored and only the numbers are captured ensuring perfect entry every time. The date field ensures that only valid dates can be entered, no accidental February 30 entries.

Mask examples of DOB date, Phone Number, and Zip code 9 digit.

Conclusion

Ensuring accurate and rapid form entry for law enforcement officers while in cars is critical, as they often work under duress and need to input precise information for the legal process. These records are not only vital for immediate police work but are also used in jails, courts, and attorneys, where accuracy and timeliness can impact legal outcomes. With sub-1-second response times, the redesigned forms empower officers to focus on tasks without delays or errors, ensuring that the information entered is reliable and seamlessly integrated into the broader legal system.

Return to Case Studies

Skills

  • Accessibility
    • Auditing
    • Remediation
    • Remediation Documentation
  • Agile Leadership
    • SAFe
    • Scrum
  • Content Writing
  • Design
    • Bootstrap
    • Responsive Design
    • UI Design
  • Development
    • C#
    • CSS
    • HTML
    • Javascript
    • jQuery
    • Prototyping
    • Web Services (WSS)
  • Information Architecture
  • Product
    • Documentation
    • Confluence
    • Jira
    • Management
    • Roadmapping
  • User Experience (UX)
    • Research
    • User Journeys
    • User Testing