A dashboard that turns incident response from a five-tab scavenger hunt into one screen.
End-to-end: research, flow architecture, high-fidelity UI, design system contribution.
Composable Widget Architecture
5: Research Sessions
Scope, Constraints & Reality
Built on an existing MAIA data platform. Telemetry, APIs, and the data model were fixed, so the job was the layer operators actually look at, not re-architecting what feeds it.
Two defaults, one product. Security and compliance teams live in dark mode on SOC monitors; finance and reporting stakeholders print and annotate light-mode exports. Both had to be first-class, not one themed after the other.
Tablet-in-the-field was a hard requirement, not a stretch goal. Worse lighting, less screen real estate, and no assumption of a desktop-sized layout to fall back on.
A 14-week SOW with room to work. Enough runway for a real discovery phase, the five operations-lead interviews included, before anything got built, and no schedule renegotiation mid-project. One of the more comfortably scoped engagements on this list.
Operators were reconstructing system health by hand, across fragmented tooling. No single surface held the whole state.
Three choices that shaped how operators read the platform: composable widget architecture, severity-driven visual grammar, and layered information hierarchy.
Five modules, eight categories, one canvas: Main Dashboard, Asset Overview, Patching Compliance, Security Overview, and Cost Recommendation.
Signal first, detail on demand: KPI cards, then charts, then the data table, with one severity scale used consistently across every surface.
Built for density, speed and operator clarity: core palette, semantic severity colours, and a type scale tuned for dark-first, light-at-parity use.
Design Decisions
Composable Widget Architecture
One fixed layout serving ops, finance, and security at once meant compromise for all three, or three separate products to maintain. Letting each team assemble their own view meant one codebase instead of three.
Severity-Driven Visual Grammar
Critical, High, Medium, and Low read identically whether it's a table badge, a chart segment, or a KPI accent. The point underneath it: an operator glancing at a tablet across a room should be able to tell if something's bad without reading a word.
Layered Triage Architecture
KPI cards, then charts, then the data table. It's structured so the first five seconds on screen answer how bad, where, and raw log-level detail only shows up after a deliberate drill-down, because reaching for raw data first is how response time gets wasted mid-incident.
Impact
Interviews with operations leads to understand monitoring mental models and where existing tools broke down.
Component library covering dark mode (primary) and light mode, accessible and consistent across both.
Designed for field operators accessing real-time data away from desktop, prioritizing the highest-priority views.