The details pane: ending tab-hopping in the desktop app
In the PROTECT Windows desktop app, staff had to click through several tabs to see synced data for one case, then come back to the grid and repeat it for the next row. I designed a collapsible details pane that sits under the grid and follows the selected row.
Drag to compare
The old way of checking one case, and the new pane under the grid. Both screens are recreated for this case study with fictional names.
| Case # | Defendant | County | Status |
|---|---|---|---|
| 2024CF001180 | Larsen, Erik J | Dane | Open |
| 2024CF001181 | Larsen-Holt, Priya A | Brown | Open |
| 2024CF001182 | Larson, Dana K | Eau Claire | Open |
| 2024CF001183 | Lars, Theo M | Marathon | Open |
- Several tab clicks to see one record's synced data
- The same detour repeated for every row in the grid
- No grouping; people memorized which tab held what
- The area didn't adapt to window or monitor size
- Details appear under the grid, no tab switching
- The pane updates when a different row is selected
- Collapsible sections group related fields
- Layout tested at the window sizes DA offices use
- Reviewed against real DA workflows before handoff
Watching the detour
I worked from stakeholder input and from walking through the existing desktop journey with the business analyst. I counted the clicks needed to answer everyday questions about a case and noted where people lost their place.
Four goals
Details instantly visible
Everything key in one place, with no navigation.
Collapsible sections
Manage information overload for data-heavy records.
Fit desktop standards
Respect Windows and government system limits.
Visual clarity
Clear headings, spacing and hierarchy.
Modern UX inside a legacy desktop app
Animated drawer vs. static sections
The Windows rendering environment restricted animation and hover states, so every interaction had to work without them. I followed Microsoft Fluent UI for the desktop app and designed with the Telerik and ComponentOne controls the developers used.
New look vs. familiar look
The pane had to feel like part of the app people already knew, just clearly better.
Design first, check later vs. check every element
Legacy components limited what could be built. Checking early meant nothing approved had to be cut.
Formal usability tests vs. close observation
Testing access was restricted, so I tested often in smaller ways and planned validation carefully.
Before, wireframe, after
I went from low-fidelity wireframes that explored layouts and hierarchy to high-fidelity prototypes showing sections collapsing and data syncing from the selected row. Each section is one component with an Expanded property, so every state sits side by side for the BA and developers.
| Case # | Defendant | County | Status |
|---|---|---|---|
| 2024CF001180 | Larsen, Erik J | Dane | Open |
| 2024CF001181 | Larsen-Holt, Priya A | Brown | Open |
| 2024CF001182 | Larson, Dana K | Eau Claire | Open |
| 2024CF001183 | Lars, Theo M | Marathon | Open |
Frame
Frame
Frame
Auto layout⋮⋮
Data table❖
Auto layout⋮⋮
Details pane❖
Section❖
Auto layout⋮⋮
Section❖
Section❖
Section❖
Five changes that fixed it
- Collapsible panels hide or expand groups, reducing visible complexity without removing any data.
- Fields ordered by use, so the most-referenced information comes first.
- Context sync from the grid: jurisdiction, case type and status update when a row is selected.
- Consistent spacing, headers and grouping so the pane can be scanned quickly.
- Resizable layout tested at the window sizes and monitor setups used in DA offices.
Fewer clicks, no tab switching
Staff can now see important case data without leaving the grid. The pane was built, went through QA testing with the BAs, and is live in the desktop app.
- Modern UX in a legacy desktop app needs developers involved from day one.
- Clear communication with the BA is essential when platform limits shape the design.
- Collapsible patterns work well in data-dense government tools with fixed screen space.