Modernizing Data Security Manager

Problem

DSM's dashboard was dense and flat — every card carried the same visual weight, which meant admins had to read closely just to tell what needed attention.

• Text-heavy layout with minimal visual hierarchy between primary and secondary information

• Card designs were nearly identical to one another regardless of what they represented, so nothing stood out as more urgent or more important

• Slowed comprehension — reading the dashboard meant parsing every card individually instead of scanning it

Solution

The redesign focused on making complex security data easier to understand at a glance by improving information hierarchy and introducing more meaningful visualizations.

Key improvements

• Converted Active Apps into a pie chart to visualize key distribution instead of displaying a simple fraction.

• Consolidated operational metrics into a summary bar for Operations, Token Status, and Projects.

• Color-coded usage graphs to improve differentiation between metrics and reduce visual ambiguity.

• Refined layouts, spacing, and typography to create a more balanced and scannable dashboard.

Challenges

Adding color without losing accessibility

• Dashboard was already built on a dark background, so any new color had to read clearly against it

• Every color pairing needed to meet WCAG contrast requirements, not just look good

• Too little color risked falling back into the same flat, monochrome problem we were fixing

• Too much color (or the wrong pairings) risked failing accessibility outright

Designing around a legacy system

• DSM was a legacy dashboard — the redesign couldn't require re-architecting or overriding the existing codebase

• Every fix (pie chart, summary bar, color-coding) had to work as a layer on top of what already existed

• Ruled out solutions that would've required rebuilding components from scratch, even when they'd have been simpler to design