Metro Signal
A data-rich operations dashboard that turns noisy updates into a clear, scannable workflow for internal teams.
Role
Lead frontend engineer
Stack
Next.js, TypeScript, Charting, Design system
Problem
Teams needed a way to understand fast-moving operational data without opening a wall of charts and tables.
Problem
Teams needed a way to understand fast-moving operational data without opening a wall of charts and tables.
Constraints
- Dense information had to stay readable on laptops and smaller displays.
- The interface needed to support quick filtering and glanceable detail.
- The system had to remain extensible as more data sources were added.
Approach
Created a layered hierarchy with summary cards at the top and deeper detail below.
Built reusable components for filters, status states, and insight panels.
Kept motion subtle and reserved it for state changes rather than decoration.
Technical decisions
Organized the interface around scan-friendly cards so the page could answer common questions quickly.
Kept the visual hierarchy calm and repeatable so new data modules could slot in easily.
Left room for future charting and detail panels without redesigning the shell.
Outcomes
Made dense operational updates easier to scan and act on.
Created a reusable dashboard structure for future data modules.
Improved readability without sacrificing information density.
Problem
Teams were bouncing between multiple tools to understand the state of their work. The challenge was to make dense information easy to scan without losing the details needed for action.
Approach
I organized the interface around a few high-signal summary cards, then layered deeper detail underneath. Reusable filters, status states, and insight panels kept the experience consistent as the dashboard grew.
Outcome
The final shape made the page feel calmer and faster to read. It also created a structure that could absorb new data sources without needing a redesign.