Context
Engineers and operators worked daily in a SCADA-oriented dashboard: building layouts, reading charts, switching boards. The product worked, but key flows were fragile — slow interactions, weak feedback, easy to lose state and edits.
The goal was stronger end-to-end UX for building and reading dashboards: drag-and-drop on dense boards, chart analysis tools, clearer widget setup, per-dashboard state, and explicit co-editing rules.
Problem
Not “bad visuals” but operational failures in daily work:
Complex widget setupMany fields, no preview → errors and rework.
Weak dashboard switchingZoom and position reset → re-orientation every time.
Weak chart interactionHard to zoom in, read exact values, change view.
Drag dead endsEmpty zone and workarounds → wasted time on dense boards.
Fragile saveChanges could be lost on leave or switch.
Process
- Mapped scenarios with product and support: where users lose time, recurring questions, critical monitoring states.
- Set a quality bar for mission-critical dashboards: predictable editing, analysis-grade charts, honest state, clear feedback, safe collaboration.
- Designed drag-and-drop, chart reading, feedback taxonomy, and co-editing — with prototypes and specs for engineering.
- Aligned with the team, ran design QA and iterations to release against a delivery checklist.
Solution
Drag without dead ends
On large boards the old model required empty space and triggered heavy grid recalculations.
- Solution
- Drag over the dashboard, dynamic placement, ghost and blue insertion hint.
- Effect
- Board stays responsive with 30+ widgets; the system helps place widgets instead of blocking.
Charts for analysis, not decoration
In monitoring a line is not enough — you need peak, time, and exact value.
- Solution
- Zoom and pan, X/Y tooltips, periods, custom range, fullscreen card.
- Effect
- Chart becomes an analysis tool, not a decorative widget.
Feedback and collaboration
When changes can be lost, feedback needs a clear taxonomy.
- Solution
- Tooltips, toasts, unsaved guard, editor presence in dashboard list.
- Effect
- Less black box; two editors in conflict visible before edits are lost.
Diagram: drag-and-drop on a dense board
Not a final screen but behavior: system finds position, highlights insertion, saves board state.
new widget
position suggested
preview visible
state saved
Result
Board became more predictable daily: faster drag on dense layouts, charts fit for analysis, feedback and co-editing without a black box.
30+
Widgets per board
Drag stays responsive on dense layouts — stress-test scenario for power users the mechanic was designed for.
5
Improvements in release
Chart zoom, state memory, widget preview, simplified setup, unsaved guard.
4
Feedback patterns
Tooltips, toasts, leave warning, editor presence — explicit response taxonomy.
3
Support themes
Save, widgets, drag — recurring tickets in these areas dropped sharply after release.
Smart chart zoomZoom a region and read exact values over time.
Dashboard state memoryScroll and zoom saved per dashboard.
Widget preview before addSee what lands on the board.
Simplified setupGrouped fields, smart defaults, fewer clicks.
Unsaved changes guardRisky exit blocked with a clear warning.
NDA
Anonymized behavioral description without confidential product or client data. I can show materials in interviews without NDA-sensitive details.