eCitation
eCitation
A brand-new mobile citation system for law-enforcement officers — logo, design language and the full multi-platform app, taken from a blank canvas to a field-ready product.
A 40-year-old public-safety company needed its first true mobile-native product.
CIS has built mission-critical software for police departments, sheriff's offices and national parks since 1985 — dispatch, records, jail and mobile systems that agencies run every hour of every day. eCitation was a clean-sheet addition to that suite: a phone-first tool for officers to issue, document and submit citations in the field, then route them to a supervisor for review. I owned it end to end — the name mark, the colour system, the design language, and every screen.
Three problems that shaped every decision.
Design for the field, not the desk
Officers use this standing roadside — in sun, rain, and often one-handed. Every screen had to stay legible and tappable under real pressure, not just on a designer's monitor.
Earn an institution's trust
CIS is infrastructure agencies have relied on for decades. A new mark and palette had to read as authoritative and current — modern without abandoning the seriousness of the parent brand.
One system, many devices
The app ships to phones and tablets from a single .NET MAUI codebase. The design system had to flex across form factors without the product having to be redrawn for each one.
Ground the new product in the world it actually lives in.
Before drawing a screen, I anchored the work in CIS's reality: a deep, integrated public-safety ecosystem with a demanding, high-stakes user. eCitation isn't a standalone app — it's a new front door into a suite officers already trust.
Field-first
High-contrast dark UI and large targets, built to be read at arm's length in bright light.
Authoritative
Restrained, official, zero decoration. The interface carries weight, not flourish.
Unambiguous
Every citation, fine and status is spelled out. No guesswork on a legal record.
Multi-platform
One coherent system that holds from a phone screen to a dispatch tablet.
A mark built to sit on a badge.
The product needed an identity of its own that still belonged to CIS. I shaped the eCitation emblem into a shield silhouette — the visual grammar of duty and authority — and cut a single live cyan bar across it to signal a connected, real-time system. That cyan became the spine of the whole product.
Colour DARK-FIRST
An obsidian base built for low-glare field use, with CIS signal-cyan as the one bright voice. Steel for hierarchy, ice for content, and a restrained alert red reserved only for the "submit for review" gate.
Type 3 ROLES
The whole job, from the curb to the supervisor's desk.
The core loop is short and high-stakes: an officer signs in, opens an issued citation, writes the event narrative, and submits it for review. I designed that path to be fast and unmistakable. Step through the real screens.
Sign in
A single, calm entry point — the mark, one action, and a build stamp. Authentication stays out of the officer's way.
Home
The officer lands on a clear dashboard: current date, time and location up top, a citation status count (draft, pending, submitted), quick actions to scan a QR code or start a new citation, and their recent citations below.
Document the event
Each citation card carries the offender, vehicle, location and fine. The officer adds an event narrative inline — the account that makes the record stand up.
Submit for review
A confirm gate reads back every field and checks the narrative is included before the citation is routed to a supervisor. No accidental submissions.
Monospace codes
Event and citation IDs are set in IBM Plex Mono so an officer can scan EVT-/CITN- strings at a glance and read them aloud without error.
Dark-first legibility
A near-black canvas with cyan signalling cuts glare on a bright roadside and keeps the battery honest on long shifts.
A deliberate submission gate
The confirm modal restates offender, location, date/time and verifies the narrative — turning "submit" into a reviewed, accountable action.
Structured capture
Offender, vehicle (year · make · plate), location and total fine each have a fixed place, so every record is complete and comparable.
The full design, in detail.
The key surfaces of the shipped app. Tap any screen to view it full size.
What I'd test and build next.
A field tool is never finished at launch. Honest next steps for the product:
Test it in real conditions
Usability sessions with officers in sunlight, rain and gloves — the only true measure of a field interface, and the fastest way to find what the studio can't see.
Offline-first capture
Citations get written where signal drops. The next milestone is local capture with reliable background sync the moment connectivity returns.
Accessibility under stress
Push contrast, target size and one-handed reach further, and validate against the realities of high-adrenaline, low-attention use.
Live prototype
Wire the connected Figma flow so the submission gate and narrative editing can be walked end to end before the next build.