National Police Index

Making a Million Police Records Accessible to Everyone

Year 2025
Client Invisible Institute, Chicago
My Role UX/UI Designer
Tools Figma · FigmaJam · Miro · ClickUp
Status Live at national.cpdp.co ↗
Services
UX Research User Journey Mapping Information Architecture Prototyping UI Design Accessibility (WCAG AA)
National Police Index — product screenshot

Mission

The Invisible Institute, a Chicago-based investigative journalism nonprofit, set out to build a national database of police employment history. The goal: make it possible for anyone to search whether a police officer with a history of misconduct simply moved to another department. The data existed. What didn’t exist was a way for real people to actually use it.

My Contribution

I led the full UX/UI design of the National Police Index from scratch, working in close co-creation with the Invisible Institute team. Together we shaped the product vision, while I owned the design process end to end: user research and user journey mapping for four distinct audiences, ideation sessions to explore information architecture, paper wireframes, Figma prototyping, structured feedback rounds, and a card-based design system built for accessibility and mobile from day one.

Impact

18 pages
per visit and 8 min 43 sec average session
+157%
traffic growth month over month (Feb → Mar 2026)
10,800+
visits in March 2026, and growing

Context

A ‘wandering officer’ is a police officer who leaves one department, often after misconduct, and gets hired by another, sometimes in a different state, with no accountability trail following them. Most people have no idea this happens. Most journalists can’t track it without months of public records requests.

The Invisible Institute, alongside a coalition of more than 20 journalism and legal organizations, spent over two years filing public records requests across the country to obtain police employment history data, state by state. The result: a dataset covering 24 states and more than a million officers. The data existed. The problem was that nobody had designed a way for real people to actually use it.

The Challenge

The dataset had three distinct layers of depth, and each one had its own complexity.

  • State: 24 states, each with different amounts and quality of data, visualized on a map.
  • Officers: Once you select a state, every officer in that state’s database appears, sortable by start date, end date, or agency.
  • Profile: Each individual profile shows badge number, agency, employment period, and in some cases, disciplinary records.

The challenge wasn’t just organizing this data. It was figuring out the right order to present it so a user could find what they were looking for without feeling fatigued by the volume. The hierarchy might seem obvious now. Before we worked through it, it wasn’t.

Before the Redesign

This was the user flow a journalist had to navigate to find an officer’s employment history, before the redesign.

Journalist needs to find
an officer’s employment history
Screen 1 — Homepage
Lands on site
Sees U.S. map with color-coded states
+ grid of state buttons
Full Data · Some Data · Coming Soon · No Data
Must know in advance which state the officer worked in. No cross-state search available.
Does the journalist know
which state to look in?
NO
Dead End
No way to search
across states
YES
Screen 2 — State Data Table
Clicks state button
Raw table loads: UID · First Name · Last Name
Agency · Start Date · End Date
Thousands of rows, no context
No name search. Only column sorting (A→Z, newest first). Must scroll manually through all rows.
Finds the officer — but
Same officer appears in multiple rows
No indication these are the same person across different employment periods
No unified officer profile. No history view. Data requires manual interpretation.
Dead End
No profile page. No further navigation possible.
Downloads entire CSV
Continues research manually in Excel or spreadsheet tool

Understanding the Users

The National Police Index was designed for four audiences, each with different goals:

  • Residents: looking up a specific officer or their local department
  • Journalists: tracking patterns and cross-referencing names across states
  • Attorneys: verifying employment history for legal cases

We created a user journey for each type, identifying where they enter the tool, what they’re looking for, and where they might get lost. That research directly shaped every information architecture decision: one interface had to serve all four audiences without requiring training to use it.

Scroll horizontally to see the full journey map

Structuring the Data

Early versions of the filter and sort system had too many options visible at once. The relationship between layers — state → officer list → profile — wasn’t immediately clear, and users didn’t know where to start.

Through ideation and collaborative iteration, we landed on a progressive disclosure model: start with the map (pick a state), then see the officer list (sort by agency, start date, or end date), and only when you open a profile do you get the full detail. Each layer surfaces only the information relevant to that step.

The sort options also evolved. Early versions made sense to us internally but didn’t match how users actually searched, most were asking ‘Who has worked at this agency?’ or ‘Who has been here the longest?’ We reorganized everything around those real questions.

After the Redesign

The same journalist. Three steps, no dead ends.

Journalist needs to find an officer’s employment history
Screen 1 — Homepage
Lands on site
Sees U.S. map with color-coded states and clear availability legend
Full Data · Some Data · Coming Soon · No Data
Color-coded map answers “does my state have data?” instantly — no reading required.
Does the journalist know which state to look in?
NO
Explores the map
Hovers over states to see availability. Understands which have data and picks one.
YES
Screen 2 — Officer List
Clicks state on map
Searchable list: Name · Agency · Employment dates
Search by name · Filter by agency · Sort by date
Types officer’s name — result appears in seconds. No scrolling through thousands of rows.
Screen 3 — Officer Profile
Clicks officer card
Full employment timeline — all agencies unified
Name · UID · All agencies · Dates · Disciplinary records
All employment rows unified into one profile. No manual cross-referencing needed.
Story filed. Data verified in 3 steps.
Optional: download CSV directly from the officer list

The Experience After

Three audiences. One interface that works for all of them.

From Paper to Figma

The process started with ideation on paper. Sketching by hand let me generate and discard ideas quickly, without getting attached to any visual direction too early.

Once the structure felt right, I moved into Figma to prototype, running user flow validations with the team at each stage. From there: structured feedback rounds, wireframe revisions, and only then into UI design. The process wasn’t linear, some feedback sent us back to the architecture level, rethinking how the layers connected. That’s where the real design thinking happened.

Hand-drawn paper wireframes for the National Police Index
Wireframes sketched on paper, ideas generated and discarded quickly before committing to any direction.
Digital wireframes built in Figma for the National Police Index
Wireframes rebuilt in Figma, structure validated with the team before moving into UI design.

The Map

The entry point for every user type is the map. Before anything is clicked, color communicates what matters most: does my state have data?

The five-status color system — Full Data, Some Data, Coming Soon, No Data (Technical Barrier), and No Data (Legal Barrier) — was designed to:

  • Answer the user’s first question without requiring any reading
  • Communicate honestly about limitations, not hide them
  • Work for all four audiences simultaneously, regardless of technical background

Color isn’t decoration here. It’s the information architecture.

The Card System

The core UI element that makes the National Police Index scannable is the officer card. Each card shows the essential information at a glance, name, agency, employment period, without overwhelming the user. The card system was designed to:

  • Work equally well on desktop and mobile
  • Scale across datasets of very different sizes, some states have hundreds of officers, others have hundreds of thousands
  • Stay visually consistent even when some fields are empty, not all states provide the same data, and that needed to be communicated honestly rather than hidden
Officer card design examples for the National Police Index

Accessibility From Day One

Because the National Police Index is a public accountability tool, built for everyone, not just technically savvy journalists, accessibility wasn’t optional. We achieved WCAG AA compliance across the platform. That shaped every detail: typography sizes large enough to read at a glance, color contrast ratios that hold up across different screens and lighting conditions, and interactive elements sized for touch. It wasn’t a checklist at the end of the process, it was a constraint we designed within from the start.

A tool about public accountability needed to actually be publicly accessible.

Color System
Brand — Primary Greens
#122823
Deep Forest
#2F5E50
Mid Green
#4F8C7E
Sage
#A1D1C1
Teal Tag
Map Status Colors
#D7F4CE
Full Data Available
#FFF5CC
Data Coming Soon
#A1D1C1
Some Data Available
#FFE1C7
No Data — Technical
#FAD2D2
No Data — Legal
Neutral Palette
#FFFFFF
White — Cards
#F3F3F3
Page Background
#F5F5F5
Card Background
#EBEBEB
Hover State
Contrast Ratios — WCAG 2.1
Keyboard Focus States
Primary Button
Search Officers
3px outline · #4F8C7E · 3px offset. Visible on any background.
Officer Card
Barry J Smith · UID 100
3px outline · #122823 · 2px offset. High contrast on gray card background.
Text Link
View full profile →
2px outline · #4F8C7E · 2px offset. Persistent underline for extra visibility.
WCAG 2.1 Compliance
All primary text passes AA or AAA. Map status colors use #122823 — the darkest brand tone — ensuring legibility on every tinted background. Neutrals are validated for both normal and large text thresholds. No color is used as the only way to convey information: each map status label includes text alongside color.

The Result

The National Police Index is live at national.cpdp.co. It’s used daily by residents, journalists, researchers, and attorneys across the United States. The data that two-plus years of coalition work produced is now reachable by anyone with a search bar.

National Police Index live product

Let's connect! Got a project, a question, or just want to talk design? I'd love to hear from you.