04 — Web Application Redesign

PROTECT XCQ
Inter-County
Query

A ground-up redesign of a legacy web application originally built in 2005 — modernized with a proper design system, improved UX, and a performant data grid built for legal search workflows across all Wisconsin counties.

Client
SOW – DOA
Role
Sr. UI/UX Designer
Legacy Age
~20 Years
Year
2024–2025
2005
Original build year
The XCQ was built nearly 20 years ago with no design system, inconsistent layouts, poor performance on large result sets, and no accessibility considerations.
✓ Redesigned 2024
Modern design system, consistent component library, improved search UX, new data grid, and stakeholder-validated high-fidelity prototypes — all built in Figma before engineering handoff.
Objective

Redesigning a
20-Year-Old App

The goal was to redesign the XCQ Inter-County Query web application to improve its appearance and performance. The original process was developed back in 2005 — before modern UX standards, accessible design, or responsive web practices existed.

🔎
Discovery
User research, stakeholder sessions, pain point mapping
🎨
Design System
Color palette, typography, component library in Figma
✏️
Ideation
Sketches and low-fidelity wireframes exploring layouts
🖥
Prototyping
High-fidelity prototypes reviewed by stakeholders
🚀
Handoff
Developer specs, component docs, and final review
Design System

Built a System
From Scratch

The XCQ had no design system — no defined color palette, no typography scale, no reusable components. My first step was to establish a consistent foundation that distributors PROTECT's visual identity and could scale across all future updates.

Color Palette
Navy
Mid
Gold
Light
Pale
Created a consistent, and non-repeating color palette using CSS variables. Primary blue for structure and authority; gold as the accent for interactive elements and key actions.
Typography Scale
H1 Heading28px / Fraunces
H2 Heading20px / Fraunces
Body text14px / DM Sans
Mono label12px / DM Mono
Component Library
Search field
Search
Reusable form inputs, data grid with sortable headers, status badges, and pagination — all built to spec for developer handoff
Data Grid Design
Full Name ↕
DOB ↕
County
Akbar, Aubreyona R 07/25/1997 Dane
Allen, Chad R 07/30/1973 Milwaukee
Arp, Troy J 02/04/1968 Waukesha
Design Process

Step by Step
Through the Redesign

01
Discovery & Stakeholder Alignment
Conducted structured discovery sessions with key stakeholders, the Business Analyst, and end-users — primarily DA staff who run inter-county queries daily. Reviewed customer feedback reports to understand real pain points and performance bottlenecks in the legacy application.
Identified key pain points: slow load times on large result sets, confusing layout that hadn't changed in 20 years, no column sorting, and no mobile consideration
Reviewed business goals and aligned the redesign to both UX improvements and technical constraints from the development team
02
Design System Creation
Before any wireframes, I established a comprehensive Design System Blueprint in Figma — a first for the XCQ product. This included color tokens, typography scale, component specs (buttons, inputs, tables, badges), and spacing rules derived from PROTECT's established brand standards.
Used Figma's component architecture to ensure all elements were consistent and reusable across screens
Simplified the update process — future changes cascade automatically across all instances
03
Ideation & Sketching
Started with rough sketches using Draw.io and Jam.jam to explore multiple approaches to the search interface, results grid, and filtering patterns. Sketches were kept loose to encourage iteration — we explored three distinct layout directions before converging on the most usable structure for legal professionals.
Explored tab-based vs. single-page search flows — single page won for its lower cognitive overhead
Tested different approaches to displaying county data — inline column vs. filtered views
04
High-Fidelity Prototyping
Built high-fidelity, interactive prototypes in Figma using the new design system. Shared with stakeholders and end-users for structured feedback rounds, then iterated through two more rounds of refinement before finalizing the component specs and developer handoff package.
Added sorting, filtering, and column-level controls to the data grid — features the legacy app completely lacked
Accessibility improvements: proper color contrast ratios, keyboard-navigable table, screen-reader-compatible headers
Old vs New

Before and After
Side by Side

⬛ Legacy XCQ — Original Design
🏚Built in 2005 — no modern design system or components
🔀Inconsistent layouts across search, results, and detail pages
⛔No column sorting — users couldn't reorder results
🐌Poor performance on large query results — no pagination strategy
♿No accessibility consideration — failed contrast and keyboard nav
📱Fixed-width layout — not usable on smaller screens
🔄No design documentation — every update required re-design from scratch
✦ Redesigned XCQ — New Design
✅Full design system — color tokens, type scale, component library
✅Consistent layouts governed by reusable Figma components
✅Sortable columns with clear visual indicators and keyboard support
✅Improved data grid with pagination — handles 5,000+ records without degradation
✅WCAG AA contrast, proper table semantics, keyboard-navigable
✅Responsive layout that adapts to monitor sizes and browser zoom
✅Figma component library as single source of truth for all future updates
Old XCQ Interface
New XCQ Interface
New Interface

The Redesigned
XCQ Experience

PROTECT XCQ — Inter-County Query (New Design)
XCQ Search Person Lookup Case Search Reports
Search People — All Counties
Last Name
First Name
Date of Birth
County
Search ↗
Showing results for Last = wood 5,003 results found across 72 counties · Sorted by: Name A→Z
Full Name ↕
DOB ↕
Gender
Race
Alias Details
Akbar, Aubreyona Renee07/25/1997FBAKA Aubreyona Woodley
Allen, Chad R07/30/1973MWAKA Chad Russell Allen · AKA Chad Woodford
Arp, Troy J02/04/1968MWAKA Troy Jay Woods · AKA Troy Jay Arp
Ballesteros, Diana Renee10/05/1967FIAKA D. Wood · AKA Diana Renee Wood +3
Carlson, Michael—MWAKA Mike Woodfield
Page 1 of 501 · 10 results per page · ← Prev 1 2 3 … 501 Next →
XCQ Wireframes
XCQ Design System
Challenges & Solutions

Obstacles and How
I Solved Them

Challenges
Designing web-style UI within older browser constraints — some advanced CSS features were unavailable in the supported browser versions
Maintaining visual consistency with the existing PROTECT desktop application while building something fundamentally more modern
Performance concerns — the legacy grid rendered all results at once; the new design needed pagination without disrupting existing user workflows
Stakeholder alignment across IT, legal staff, and business analysts who each had different priorities for the redesign
Validating design decisions without traditional usability testing — institutional constraints limited direct access to end-users
Solutions
Used progressive enhancement — designed for modern browsers first, then tested and adjusted fallbacks for constrained environments
Derived the XCQ design from the PROTECT brand system, using the same navy/gold palette and typographic approach for visual continuity
Introduced pagination with configurable page size — users can set 10, 25, or 50 results per page based on their workflow preference
Created a structured review cadence with stakeholders — bi-weekly check-ins with decision trackers to document all approved and pending design choices
Compensated with proxy testing — observed BA staff using the prototype in context and incorporated their behavioral observations into final revisions
Takeaway
Redesigning legacy government applications requires as much organizational skill as design skill — the hardest part is alignment, not aesthetics.
Key Learnings
Legacy systems often have undocumented requirements that only emerge during design review — building in iteration cycles is essential
A design system is the most impactful first deliverable for any legacy redesign project — it creates alignment before a single screen is designed
Designing for legal professionals means prioritizing data density, accuracy, and speed over minimalism — the "clean" solution is often the wrong one
Government projects also taught me about redesigning municipal websites — the importance of clear layout, clean visual design, and feature focus for public-facing tools