I work in a campus police department. Some time ago, the administrators realized they needed a severe command center UX overhaul (they didn’t call it that in so many words at the time, but that’s exactly what they meant). This project was one of many such overhauls I’ve been working on during my time here.

For years, officers have written crime reports on Microsoft Access, which, while okay, isn’t particularly suited to the task.  It can only be used on one computer at a time and is needlessly complicated for the straightforward information typically collected in a report. This was the chief complaint of the officers (frequent crashes, not having a clear “save” button, and having to return to the command center to submit a report were among their other pain points). My job was to discover the easily-fixable pain points and come up with a design for a simplified system that would be usable by multiple officers simultaneously, and which would also be accessible from many locations, possibly even outside of the main command center.  Also important to this particular project were accessibility standards; many officers complained of headaches related to eye strain after spending significant time in front of a bright monitor (the MS Access system used a white background with black text).

The first step was to sit down with a few officers and listen to them describe common reports and things they didn’t like about the MS Access system.  Once I had enough to go on, we moved on to several iterations of paper prototyping. Basically, I drew screens on graph paper and had the officers walk through submitting a report by pointing on the paper screens to what they’d do or click. If you’re curious, here’s one set of screens that we used for this:

After several rounds, we eventually decided that the first design was too “screen-happy.” Rather than presenting a main menu after an officer logged in, we decided that it would be more efficient to immediately display the list of recent reports and include a link somewhere to add a new report. I did a quick sketch of the high-level screens in Balsamiq:

I used Balsamiq’s click-through capabilities to make an interactive version, and then tested the flow by having the officers sit in front of it and submit a fake report. Everything checked out — in fact, it was a smash hit!

From here, it was relatively easy to implement a PHP-based solution.  I wasn’t in charge of coding the production version — police report systems have cryptographic requirements that are beyond me — but I did create a simple prototype in PHP to outline the functionality and give the developers a visual framework. The final design uses a darker blue/gray/green color scheme, which is easier on the officers’ eyes.  Editable text fields are highlighted by thick green rectangles upon mouseover. The report list includes a CSS style to highlight an entire record based on the cursor’s vertical position.  On the writing portion of the interface, the “submit report” button is huge and unmistakeable (a frequent complaint about the MS Access system).  You can click through the prototype here (lacks some functionality, like form validation).