XCQ: rebuilding a 2005 search tool
XCQ, the Inter-County Query, lets DA staff search people and cases across all Wisconsin counties. It was built in 2005, with no design system, inconsistent layouts, slow results and no accessibility support. I redesigned it on a new Figma design system, built from IBM's Carbon kit with light and dark modes, and validated it with stakeholders before engineering handoff.
Drag to compare
The same search for “Lars” in the 2005 tool and in the redesign. Both screens are recreated for this case study with fictional names.
( ) Search People ( ) Lookup ID
Last Name First Submit
| NAME | DOB | SEX | ALIAS |
|---|---|---|---|
| LARSEN, ERIK J | 03/14/1981 | M | AKA Erik Larssen |
| LARSEN-HOLT, PRIYA A | 11/02/1990 | F | AKA Priya Holt · AKA P. Larsen |
| LARSON, DANA K | 06/27/1975 | F | — |
| LARS, THEO M | 01/09/1968 | M | AKA Ted Lars +2 more |
| LINDQVIST, MAYA R | 08/30/1996 | F | AKA Maya Larsen |
- No design system or reusable components
- Different layouts for search, results and detail pages
- No column sorting
- Every result loaded at once, so large searches were slow
- Failed contrast and keyboard checks
- Fixed width, hard to use on smaller screens
- No documentation, so every update started from scratch
- Design system from IBM Carbon: tokens, type scale and components, in light and dark
- Consistent layouts built from shared components
- Sortable columns with clear indicators and keyboard support
- Pagination with a choice of 10, 25 or 50 per page
- WCAG AA contrast, proper table markup, keyboard navigation
- Layout adapts to monitor size and browser zoom
- The Figma library as the single source of truth
Understanding a tool people relied on daily
I ran discovery sessions with stakeholders, the business analyst and DA staff who use inter-county queries every day, and reviewed customer feedback reports for recurring problems. Direct access to end users was limited, so I also ran proxy sessions where analysts used the prototype in context while I observed.
System first, then screens
Discovery
Sessions with stakeholders, the BA and DA staff; feedback reports; pain points mapped to business goals and technical limits.
Design system
Started from IBM's Carbon Figma kit: tokens, type scale, buttons, inputs, tables, badges and spacing, restyled with the PROTECT brand in light and dark modes.
Sketching
Rough layouts in Draw.io. Three directions explored; a single-page search beat a tabbed one for lower mental effort.
Prototype & refine
Interactive Figma prototypes reviewed by stakeholders, then two more rounds of refinement before handoff.
Where the hard parts were
Modern CSS vs. older supported browsers
Some advanced CSS wasn't available in the supported browser versions, so the design had to degrade gracefully.
All results vs. pagination
Paging solved performance without forcing people to change how they scan results.
Brand new look vs. PROTECT continuity
Staff move between the desktop app and XCQ, so the two should feel like one product.
Formal testing vs. proxy testing
Institutional limits blocked direct sessions. Proxy observation kept the work moving, and the decision tracker recorded what still needed confirming.
Legacy reference, new screens and the component library
The legacy screen traced as a reference, then search and results screens assembled entirely from component instances inside auto layout frames, a dark-mode version of the results, and the library alongside. Click any layer to inspect its auto layout, variants and variables. Names shown are fictional.
( ) Search People ( ) Lookup ID
Last Name First Submit
| NAME | DOB | SEX | ALIAS |
|---|---|---|---|
| LARSEN, ERIK J | 03/14/1981 | M | AKA Erik Larssen |
| LARSEN-HOLT, PRIYA A | 11/02/1990 | F | AKA Priya Holt · AKA P. Larsen |
| LARSON, DANA K | 06/27/1975 | F | — |
| LARS, THEO M | 01/09/1968 | M | AKA Ted Lars +2 more |
| LINDQVIST, MAYA R | 08/30/1996 | F | AKA Maya Larsen |
Search people across all counties
Last name is required. Add more fields to narrow results.Results include aliases (AKA) so you can match a person across counties. Partial last names work: “Lars” finds Larsen and Larson.
Frame
Frame
Auto layout⋮⋮
Auto layout⋮⋮
Variables applied⬡
Auto layout⋮⋮
Card❖
Auto layout⋮⋮
Input❖
Variables applied⬡
Button❖
Text style
Frame
Auto layout⋮⋮
Auto layout⋮⋮
Data table❖
Pagination❖
Frame
Frame
Button · component set❖
Auto layout⋮⋮
Input · component set❖
Table header❖
Alignment was harder than aesthetics
“Applying patterns to our XCQ design is one of your real strengths.”Jenn MacainagProject Lead, PROTECT
- Legacy systems hide requirements that only appear in design review, so plan for iteration.
- A design system is the most useful first deliverable in a legacy redesign; it creates agreement before any screen exists.
- For legal staff, density, accuracy and speed matter more than minimalism.