Data Visualization
Real-Time Energy Analytics Dashboard
A live, accessible analytics platform trusted by 50,000+ monthly users to make sense of their energy usage.
Overview
Utility customers needed to understand consumption, billing, and outages at a glance — but the existing screens were slow, cluttered, and unusable with assistive technology. I led the frontend rebuild into a real-time, WCAG 2.1 AA dashboard that scaled to tens of thousands of concurrent users.
The problem
The legacy dashboard rendered every widget on load, blocking the main thread and taking 6–8 seconds to become interactive on mid-range devices. Utility customers — many of them older or using screen readers — simply gave up.
Charts encoded meaning in color alone, tables were not keyboard operable, and live-updating figures flooded assistive technology with announcements. Accessibility was a compliance risk as much as a usability one.
The approach
Rebuilt the data layer for real time
I moved live metrics onto a WebSocket channel and layered a normalized Redux Toolkit store on top, so a single stream of updates fanned out to every widget without redundant re-renders.
Non-critical panels were code-split and lazy-loaded below the fold, cutting the initial JavaScript payload and getting the dashboard interactive well under the two-second target.
Made accessibility a design constraint, not an afterthought
Every chart pairs color with shape, direct labels, and an equivalent screen-reader table exposing the same data. Contrast was held to 4.5:1 for text and 3:1 for UI.
Live regions were scoped to a single polite summary element rather than every streaming value, so screen-reader users got meaningful updates instead of noise. The entire dashboard became fully keyboard operable with visible focus.
Optimized rendering for large datasets
Time-series charts were downsampled on the client before paint, and expensive aggregations were memoized. Virtualized tables kept scroll smooth even with thousands of rows.
Highlights
- Real-time consumption, billing, and outage views over a single WebSocket stream
- Full WCAG 2.1 AA compliance — keyboard, screen reader, and contrast
- Code-split, lazy-loaded panels for a sub-2s interactive target
- Reusable, themeable chart components adopted by other product teams
Impact
The rebuilt dashboard served 50K+ monthly users reliably and cut the time it took a customer to find the number they came for by roughly 40%.
Achieving WCAG 2.1 AA removed a standing compliance risk and, just as importantly, made the product genuinely usable for every customer — not just the sighted, mouse-using majority.
Have a project like this?
I'm open to roles and collaborations in frontend architecture, microfrontends, and data-heavy products.
Let's work together