Designing a Flexible Dashboard for a QA Platform
Overview & Add Widget System
The dashboard is the place where the system becomes real.
After onboarding introduces the structure and possibilities, this is where users actually start working — monitoring executions, analyzing results, and making decisions.
This case focuses on the Overview (dashboard) and the Add Widget system, designed to support flexible, role-based workflows in a complex QA environment.
→ Onboarding case study: [LINK]
Problem
The platform aggregates data from multiple sources:
- automated executions
- manual testing workflows
- reports and system-level insights
Different users need different perspectives:
- testers focus on execution results
- developers focus on failures and fixes
- managers need aggregated insights
A static dashboard would fail immediately.
The challenge was to design a system that:
- adapts to different roles
- supports real-time decision making
- does not overwhelm users with data
Approach
Instead of designing a fixed layout, I treated the dashboard as:
a configurable workspace, not a predefined screen
This led to two key decisions:
- Widget-based architecture
- Progressive dashboard building (via Add Widget)
Overview — Dashboard Structure
1. System Snapshot (Top Layer)
Quick metrics provide immediate context:
- total executions
- active / pending
- passed / failed / blocked
This layer answers:
What is happening in the system right now?
2. Insights & Trends (Middle Layer)
Visual components support analysis:
- distribution of results
- execution trends over time
This layer answers:
Is the system stable? Are there patterns?
3. Operational Context (Bottom Layer)
Task-oriented widgets:
- Assigned to Me
- Recently Viewed Executions
This layer answers:
What do I need to do next?
From System View to Personal Context
A key design goal was to connect:
- global system state (overview metrics)
with
- individual responsibility (assigned work)
Example:
- Execution Overview → shows overall stability
- Assigned to Me → shows what the user must act on
This creates a natural flow:
observe → understand → act
Add Widget — Expanding the Dashboard
Instead of forcing users into a predefined layout, the system allows them to build their own dashboard.
The Add Widget module is designed as:
a decision layer, not a visual catalog
Interaction Model
- User clicks Add widget
- Selects a category (e.g. Activity, Executions, Reports)
- Browses a list of widgets (title + short value description)
- Optionally opens detailed view
- Adds widget to dashboard
Design Decisions
No preview in the list
Widget previews were intentionally removed from the list view.
Why?
- reduced visual noise
- faster decision making
- focus on purpose, not appearance
Preview is only shown in the detailed view, where context matters.
Clear value-based descriptions
Each widget answers:
- what it shows
- why it matters
Example:
“View items that require your attention”
instead of
“Displays assigned executions”
Progressive disclosure
Information is layered:
- list → quick decision
- details → deeper understanding
- dashboard → real usage
Feedback Loop (Built-in)
The system includes a lightweight feedback mechanism:
- suggest improvements
- request new widgets
This turns the dashboard into an evolving system, not a finished product.
Behavior After Adding a Widget
Once a widget is added:
- it appears immediately on the dashboard
- layout updates dynamically
- user receives confirmation feedback
The system transitions from:
configuration → real usage
without additional steps.
Outcome
The result is a dashboard that:
- adapts to different user roles
- supports both monitoring and action
- scales with system complexity
- allows users to build their own workflow
Instead of teaching the system, it allows users to shape it.
Context
This dashboard is part of a larger system — a distributed QA platform combining automated and manual testing workflows.
The full product design, including system architecture, navigation, and interaction patterns, is available in Figma: [LINK]
© Zofia Szuca 2024
Brand and product designer