Wave Dashboard is a Grafana-based tool that visualizes load testing metrics for service monitoring and test result analysis.
Screenshot
My Role
Sole UX Designer
Team Composition
1 Product Manager
3 Web Programmers
6 Back-end Developers
2 Testers
Project Duration
2019 - Now
In load testing scenarios, engineers frequently compare performance data across test cycles (e.g., pre/post updates, configuration changes) to detect regressions or optimizations. Currently, users must manually switch between dashboard tabs for visual comparison, leading to missed critical metrics due to divided attention and inability to quickly pinpoint core issues (e.g., CPU spikes, latency degradation)
User Story:
"As a load test engineer, I need to compare the current test dashboard with historical ones side-by-side to rapidly identify performance variances. However, manually syncing scroll positions across browser tabs often causes misaligned axis readings."
Design Goals: Eliminate view switching through side-by-side comparison to enable instant identification of core metric variances (CPU/Latency/Error Rate).
Key Decisions:
| Conflict Point | Decision | Rationale |
|---|---|---|
| Comparison Granularity | Test-level comparison (vs. query/snapshot) | User interviews show 85% of scenarios require full dashboard comparison |
| Visual Allocation | Embedded comparison sub-chart (vs. split-screen/popup) | In-context display reduces cognitive load |
https://www.figma.com/proto/AI3W2fOkAIvkXQetJPsnea/-HUG--Redesign-Dashboard-With-EGG?page-id=1%3A3&node-id=51631-111695&viewport=484%2C587%2C0.07&t=0m1huEwEbOBHzN7Y-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=51631%3A109715
Toolbar switch for comparison mode
