Designing a Scalable Executions Workspace for a QA Platform
Overview
The Executions tab was redesigned as a scalable operational workspace for monitoring and managing automated QA executions across multiple projects, workflows, devices, and execution types.
The original interface was heavily focused on raw data exposure, but lacked hierarchy, interaction clarity, and operational ergonomics. Critical controls competed visually with table content, contextual actions were difficult to discover, and the overall experience became overwhelming during long monitoring sessions.
The redesign focused on transforming the view into a structured enterprise workspace optimized for:
- live monitoring,
- contextual interactions,
- large datasets,
- and repetitive operational workflows.
The Problem
The legacy system suffered from several structural UX issues:
- table interactions lacked hierarchy,
- operational actions polluted the visual space,
- filtering and monitoring behaviors were mixed together,
- sticky behaviors were missing or inconsistent,
- wide datasets became difficult to navigate horizontally,
- and frequently repeated actions required too many clicks.
The platform was used daily by testers, QA specialists, and operational teams working with large execution datasets for extended periods of time.
This required a redesign focused not only on visuals, but primarily on usability at scale.
My Role
I was responsible for:
- UX architecture,
- interaction design,
- workflow optimization,
- operational hierarchy,
- contextual interaction patterns,
- table behavior redesign,
- and high-fidelity prototyping.
The work included redesigning both:
- the execution launch flow,
- and the executions monitoring workspace.
Design Goals
The redesign focused on several key principles:
1. Prioritize operational clarity
The interface needed to support continuous monitoring without overwhelming the user with controls.
2. Reduce interaction noise
Actions should appear contextually instead of being permanently visible across the table.
3. Improve large-scale table usability
The platform required:
- sticky columns,
- dynamic scrolling,
- contextual menus,
- and scalable data density.
4. Support repetitive workflows
Common actions such as:
- copying values,
- filtering,
- reviewing logs,
- restarting executions,
- or inspecting execution details
needed to become significantly faster.
Rethinking the Table Architecture
The executions view was redesigned around a dynamic operational table.
Key improvements included:
- sticky checkbox column,
- sticky execution ID column,
- horizontal and vertical scrolling,
- contextual row actions,
- column-level interaction menus,
- fixed pagination/footer,
- and live execution updates.
The sticky ID column became one of the most important structural decisions in the redesign. While navigating horizontally through large datasets, users always retain row context and execution identity.
The table was intentionally designed with high data density while preserving readability and scanning speed.
Contextual Interaction Model
One of the biggest redesign decisions was separating interactions into three clear levels:
Column-level interactions
Table headers contain contextual menus for:
- sorting,
- filtering,
- resizing,
- and column management.
This keeps structural table interactions separated from execution actions.
Row-level interactions
Execution actions were moved into contextual row menus located inside the sticky ID column.
These actions include:
- opening execution details,
- restarting executions,
- downloading logs,
- copying row data,
- and execution management actions.
Actions only appear on hover or selection, significantly reducing visual clutter across the table.
Cell-level interactions
The redesign introduced micro interactions for individual table values.
Users can copy cell content with a single click directly from the hovered value.
Instead of using intrusive notifications, the interaction uses lightweight inline feedback and icon transitions to keep the experience fast and operationally focused.
This became especially useful for:
- release names,
- revisions,
- workflow names,
- device identifiers,
- and execution IDs frequently shared between teams.
Operational Monitoring
The top section of the workspace was redesigned to support live operational awareness without turning the interface into a dashboard-heavy environment.
The final structure includes:
- refresh controls,
- execution summaries,
- quick operational indicators,
- and advanced filtering entry points.
The refresh system supports:
- manual refresh,
- automatic intervals,
- and system-disabled refresh states.
This created a more predictable experience for long-running operational monitoring sessions.
Prototype
Since the interaction model heavily depends on:
- scrolling behavior,
- contextual visibility,
- sticky columns,
- and micro interactions,
- a static presentation was not sufficient for documenting the experience.
The interactive prototype demonstrates:
- contextual table interactions,
- operational filtering,
- sticky behaviors,
- row actions,
- refresh states,
- and copy microinteractions.
View the interactive prototype in Figma:
Outcome
The redesign transformed the executions tab from a dense developer-oriented table into a scalable operational workspace designed for continuous daily use.
The final experience improved:
- operational readability,
- contextual discoverability,
- workflow efficiency,
- and interaction consistency across large datasets.
The project also established reusable interaction patterns later applied across other enterprise modules inside the platform.
© Zofia Szuca 2024
Brand and product designer