02 — Desktop Feature Redesign

PROTECT
Details Pane

Eliminating multi-tab friction in the PROTECT desktop application. A collapsible, context-aware pane that surfaces synced case data inline — fewer clicks, faster lookups, better legal workflows.

Client
SOW – DOA
Role
Sr. UI/UX Designer
Year
2024–2025
⚠ The ProblemUsers had to click through several tabs to view synced data, creating repeated friction in active legal workflows and slowing case lookups.
✓ The SolutionA collapsible, context-aware Details Pane that surfaces synced case information inline — no tab switching, no workflow disruption.
Overview

What is the
Details Pane?

The Details Pane is a feature within the PROTECT Case Management System desktop application. It allows users to quickly access synced desktop data at the bottom of the screen, without navigating through multiple tabs. This improves visibility and reduces time spent finding and comparing case information across multiple records.

✕ Before — Old Experience
🔄 Users clicked through multiple tabs to view a single record's synced data
⏱ High time cost for routine lookups — repeated interruption of legal workflows
🧩 No structure or modern UI patterns — users memorized tab locations
📱 Pane did not adapt to window size or context
😤 Expressed frustration at time lost on multi-step information retrieval
✓ After — New Design
⚡ Inline details surface instantly — no tab switching required
📂 Collapsible sections organize grouped data without overwhelming the UI
🔄 Context-aware updates — pane syncs to the selected grid row
📐 Fixed pane with responsive behavior for different monitor setups
✅ User-tested with real DA workflows before developer handoff
Design Objectives

Four Goals That
Guided Every Decision

👁
Make details instantly visible
All key case data viewable in one place without leaving the current screen or triggering any navigation action.
📑
Introduce collapsible sections
Flexible grouped sections to manage information overload for records with many data points across multiple case categories.
🖥
Align with desktop standards
Maintain alignment with desktop design standards and government system restrictions, including Windows-specific rendering constraints.
🧠
Improve visual clarity
Reduce cognitive load through logical, scannable organization — clear headings, consistent spacing, and a strong visual hierarchy throughout.
Design Process

How I
Approached It

01
Ideation — Understanding the User
Began by analyzing user behaviors and identifying key issues with the current design through stakeholder inputs and reviewing the existing user journey inside the PROTECT desktop tool.
Introduced collapsible sections for grouped data to reduce visual clutter
Kept the pane fixed and context-aware — it updates on selection without a page reload
Highlighted key information upfront, reducing the need to scroll through dense lists
Aligned the redesign with real user needs while respecting technical limitations of the Windows desktop environment
02
Prototyping in Figma
Moved to low-fidelity wireframes, then high-fidelity prototypes. The wireframes explored different layout and information hierarchies. After multiple feedback rounds, prototypes showed collapsible windows in action and demonstrated data syncing from the selected grid row.
Applied modern UI elements — tooltips, icons, structured spacing — to enhance usability
Interactive prototypes shared with the team for feedback and minor refinements before developer handoff
03
Wireframe Iteration & Delivery
The final Details Pane design shows data inline at the bottom of the screen, organized by collapsible sections. The context-aware pane updates when the user selects a different row — eliminating the need to open a new view entirely.
PROTECT Desktop — Details Pane (New Design Concept)
Case List Grid
Details Pane — Selected Record
▼
Case Info
▼
Defendant
▶
Charges
▶
Hearing Dates
Collapsible sections update dynamically based on the selected grid row — no tab switching required
Details Pane Old Screens
Details Pane Wireframes
Details Pane New Design
Challenges

What Made This
Difficult

Technical Constraint
Designing web-style UI patterns within a Windows desktop application came with strict limitations. Many modern interaction patterns — animated transitions, hover states, dynamic layouts — were restricted by the rendering environment.
Structural Limits
Components had to adapt to the legacy system's behavior, which limited the use of advanced UI interactions. Every proposed element had to be confirmed technically feasible before inclusion in the final design.
Consistency Balance
Maintaining visual consistency with the legacy application's look and feel — while introducing clearly improved elements — required careful calibration between "feels familiar" and "feels upgraded."
Validation Process
Testing restrictions required extra planning — constant testing, close observation, and collaboration with developers to ensure designs could be implemented as intended without breaking functionality.
Design Solutions

Five Changes That
Fixed the Problem

01
Collapsible panels for progressive disclosure
Let users hide or expand data sections easily. Grouping related fields into collapsible panels dramatically reduced visible complexity without removing access to any data.
02
Reorganized column logic for better data scanning
Reorganized the pane column layout for clarity and faster scanning. Fields are ordered by how often they're referenced during active case review, not alphabetically.
03
Dynamic context syncing from the data grid
The Details Pane updates dynamically with metrics like jurisdiction, case type, and completion state — pulled from the data grid without requiring a new page load or tab switch.
04
Standardized spacing, headers, and grouped content
Structured spacing, clear headers, and grouped content to create a visual hierarchy — making the pane scannable within two seconds for experienced legal staff.
05
Responsive layout for the desktop environment
Created a responsive layout tested at multiple window sizes to confirm correct behavior across the different monitor setups used across Wisconsin DA offices.
Impact & Takeaway
This redesign allowed users to access important data with fewer clicks and without switching tabs — greatly improving their daily workflow.
Key Learnings
Designing modern UX within older, limited desktop interfaces requires deep engineering collaboration from day one
Clear communication with developers and the BA is essential when working with platform constraints
Designing user-focused solutions under technical real-world constraints produces the most durable improvements
Collapsible UI patterns are highly effective for data-dense government tools where screen real estate is limited and fixed