Workflow Execution Debugger
The interface effectively separates filter controls from results, using clear typography and spacing which supports quick scanning of execution statuses. However, the design could improve by enhancing the visual hierarchy of interactive elements and incorporating more prominent feedback for filters applied, which would aid usability.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast1
Content Readability & Clarity3
Visual Consistency, Imagery & Media2
Navigation & Structure1
Conversion & Actions0
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load3
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
1Critical
5Major
15Moderate
2Minor
No Visible Primary Navigation or Menu
Critical
Navigation & Structure
The Problem
The interface does not show any primary navigation bar or menu to access other main areas of the system. Only a 'Back to designer' button and a small environment indicator are visible on top.
Why it Matters
Users can't easily move to other main sections or modules, which severely limits navigation and may trap users in one view, increasing bounce and frustration.
How to Fix
Add a primary navigation bar or menu with clear, visible options that establish the main sections and allow quick switching.
Issue Highlights
Missing Timezone in Timestamps
Major
Ambiguous Date/Time/Timezone
The Problem
Timestamps such as 'Created at 17/04/2026, 11:04:53' do not specify the timezone, leading to potential confusion about the exact time referenced.
Why it Matters
Users may misunderstand when events occurred if they assume different timezones, impacting scheduling or debugging accuracy.
How to Fix
Add explicit timezone information or indication (e.g., UTC, local time) next to all timestamps.
Issue Highlights
No Clear Page or Section Title for User Orientation
Major
Orientation Missing (Environment/Role/Location)
The Problem
The main content area labeled 'Results' lacks a clear page or section heading that describes the purpose or context of the data displayed. The sidebar search controls also lack an overall heading that situates the user within a particular workflow or debug environment.
Why it Matters
Without clear orientation, users may be uncertain about what part of the app they are in or what the data represents, which increases cognitive load and may cause confusion or errors.
How to Fix
Add descriptive page or section headings for both the search/filter panel and the results display area to provide clear orientation cues.
Issue Highlights
Small date picker close button touch target
Major
Accessibility & Input Ergonomics
The Problem
The close button for the date selector appears quite small, probably less than the recommended 44x44 pixels touch size.
Why it Matters
Small touch targets can cause difficulty for users to accurately tap, increasing error rates and user frustration.
How to Fix
Increase the size of the close button to at least 44x44 pixels or add padding around the clickable area to expand its tap target.
Issue Highlights
No visible loading state when fetching workflow executions
Major
Flow & States Completeness
The Problem
There is no indication that the system is loading after clicking the Fetch button, which can cause uncertainty about whether the request was processed.
Why it Matters
Users may repeatedly click Fetch or think the system is unresponsive, increasing frustration and possible erroneous commands.
How to Fix
Implement a visible loading spinner or progress indicator while data is being fetched.
Issue Highlights
Filter inputs and results area not clearly separated
Major
Strategic Design
The Problem
The left filter panel and right results area appear connected visually with minimal separation, which can make it hard for users to understand these are distinct functional zones.
Why it Matters
Users may be confused about where to input filter criteria versus where filtered results are displayed, potentially leading to usability friction.
How to Fix
Add a more distinct visual divider or background contrast between filter and results sections to clearly communicate their separation.
Issue Highlights
Low contrast for light placeholder text in search input
Moderate
Color & Contrast
The Problem
The placeholder text 'Workflow id...' in the search input uses a light gray color on a white background, likely failing WCAG AA contrast requirement of 4.5:1 for normal text.
Why it Matters
Users with moderate visual impairments or in bright environments may have difficulty reading the placeholder, reducing usability.
How to Fix
Increase the contrast by using a darker gray color for the placeholder text or add a subtle background color behind the input to boost contrast.
Issue Highlights
Misaligned input fields and dropdown in search filter panel
Moderate
Visual Consistency, Imagery & Media
The Problem
In the left panel, the 'workflow_id' input, 'Status' dropdown, 'Limit' input, and 'Created at' date picker appear vertically misaligned with inconsistent horizontal spacing.
Why it Matters
Misalignment can cause a cluttered look and make form fields harder to scan quickly, reducing usability.
How to Fix
Align all input fields and dropdowns to a consistent left margin with uniform spacing in vertical and horizontal directions.
Issue Highlights
Vague CTA label 'Fetch' lacks clarity
Moderate
Conversion & Actions
The Problem
The button labeled 'Fetch' does not clearly describe what action will be performed or what data will be fetched, which can confuse users.
Why it Matters
Users may hesitate or abandon the action because they cannot easily understand the purpose of the button.
How to Fix
Replace the 'Fetch' label with a more descriptive CTA such as 'Fetch Workflow Executions' or 'Load Results'.
Issue Highlights
Workflow and execution IDs shown without explanation
Moderate
Efficiency & Cognitive Load
The Problem
The results list displays workflow and execution IDs as long strings with no context or user-friendly labels, requiring users to remember or externally reference what these IDs mean.
Why it Matters
Users must remember or lookup these cryptic IDs to understand results, increasing cognitive load and reducing efficiency.
How to Fix
Add hover tooltips, inline explanations, or user-friendly labels alongside the IDs to give immediate context.
Issue Highlights
Unclear next action after fetching workflow results
Moderate
Flow & States Completeness
The Problem
After fetching and displaying workflow execution results, there is no clear call-to-action or guidance on what the user should do next (e.g., view details, rerun, export).
Why it Matters
Without guidance, users might be confused about how to proceed or what to do with the displayed results, potentially blocking task completion or workflow analysis.
How to Fix
Add clear next step options such as buttons or links for viewing detailed execution data, rerunning workflows, or exporting results.
Issue Highlights
Results list visually monotonous and lacks emphasis
Moderate
Strategic Design
The Problem
The results section shows multiple entries with identical styling and very similar content layout, causing each result card to blend together without clear visual hierarchy or standout elements.
Why it Matters
Users may struggle to quickly scan for relevant information or differentiate important entries, reducing efficiency when reviewing execution logs.
How to Fix
Introduce more distinct visual cues such as varied background shading for alternating cards, highlight key fields, or add icons/status marks to improve differentiation.
Issue Highlights
Low contrast for text labels in search filters and options
Moderate
Color & Contrast
The Problem
The text labels such as 'Search by', 'workflow_id', 'execution_id', 'query', and 'Status' appear in a medium gray on a white background, with insufficient contrast for WCAG AA standard.
Why it Matters
Insufficient contrast makes it harder for users with low vision or color deficiency to identify form labels and options, potentially causing input errors or slower interactions.
How to Fix
Darken the text color for form labels and radio options to meet at least 4.5:1 contrast ratio against white background.
Issue Highlights
Weak Differentiation Between IDs and Labels
Moderate
Content Readability & Clarity
The Problem
The repeated lines such as 'Execution id', 'Workflow id', and their corresponding long IDs appear visually similar with minimal visual distinction, making it harder to scan and distinguish labels from values.
Why it Matters
Users may struggle to quickly identify which text are labels versus IDs, reducing overall efficiency in using the interface.
How to Fix
Use font weight, color, or spacing to clearly differentiate labels from values or consider grouping data structurally.
Issue Highlights
Unlabeled date picker clear icon
Moderate
Visual Consistency, Imagery & Media
The Problem
The small 'X' icon next to the 'Select dates' date picker input is not labeled or explained, making its function ambiguous.
Why it Matters
Unlabeled icons can confuse users unfamiliar with their purpose, increasing cognitive load.
How to Fix
Add a tooltip or accessible label describing this icon as 'Clear date selection' or similar.
Issue Highlights
Dense Result Rows with Multiple Clickable Items
Moderate
Navigation & Structure
The Problem
Each result row contains several clickable or interactive text identifiers (Execution id, Workflow id, Snapshot id) that are visually similar and closely spaced, creating many competing click targets.
Why it Matters
Users may struggle to clearly identify which elements are clickable or may accidentally click on the wrong item, leading to user errors and decreased efficiency.
How to Fix
Simplify the interactive elements by grouping or visually differentiating clickable items, or consider consolidating actions to reduce clutter.
Issue Highlights
Close button on date picker too close to input field
Moderate
Accessibility & Input Ergonomics
The Problem
The close button 'x' on the date picker is placed closely next to the date input box, with limited spacing between them.
Why it Matters
Closely spaced clickable elements increase the chance of accidental taps and decreased accuracy on touch devices.
How to Fix
Add more horizontal spacing between the close button and the date input field to help users target the correct control.
Issue Highlights
No guidance on how to refine search or when no results show
Moderate
Flow & States Completeness
The Problem
The current UI does not display any message or guidance for users when no results match the search criteria or if the limit is set too low.
Why it Matters
Users may not understand why no results are shown, leading to confusion or repeated unnecessary searches.
How to Fix
Provide a clear empty state message with suggestions such as adjusting the search filters, changing the date range, or increasing the limit to improve results.
Issue Highlights
Small dropdown arrow affordance in Status selector
Moderate
Accessibility & Input Ergonomics
The Problem
The dropdown arrow in the Status select box appears visually small, possibly reducing tap accuracy for mobile users.
Why it Matters
Small clickable areas can increase user frustration and mis-taps, especially on touch devices.
How to Fix
Increase padding around the dropdown arrow or make the entire select box respond to taps to improve usability.
Issue Highlights
Multiple fine-grained filters increase micro-steps
Moderate
Efficiency & Cognitive Load
The Problem
The left panel includes three separate controls for filtering: view type dropdown, status dropdown, and created-at date picker plus a limit input. Each requires a distinct interaction to adjust the results.
Why it Matters
Having multiple separate filtering steps increases user effort to configure search criteria before fetching results, causing potential frustration and slower task completion.
How to Fix
Combine or simplify some filters, e.g., preset date ranges or provide a single advanced filter modal. Enable immediate filtering on change rather than requiring 'Fetch' click.
Issue Highlights
Fetch button label does not reflect filtering action clearly
Moderate
Strategic Design
The Problem
The button at the filter panel bottom says 'Fetch' which is less intuitive compared to typical filtering/filter results labels such as 'Search' or 'Apply filters'.
Why it Matters
Users may hesitate or misinterpret the action of the button, slowing down their interaction or causing confusion about what will happen.
How to Fix
Rename the button to something more descriptive like 'Search', 'Apply filters', or 'Show results' to clarify its function.
Issue Highlights
Manual 'Fetch' action required after filter changes
Minor
Efficiency & Cognitive Load
The Problem
Users must explicitly click the 'Fetch' button after adjusting any filter, adding an additional step.
Why it Matters
Forcing an extra click interrupts flow and adds friction, which increases task time and cognitive load.
How to Fix
Implement automatic fetch on filter change or optionally provide an auto-fetch toggle to reduce unnecessary user actions.
Issue Highlights
Inconsistent padding inside result cards
Minor
Visual Consistency, Imagery & Media
The Problem
Each result card in the right panel shows the label 'EXECUTION_SUCCEEDED' with different amounts of padding around it, causing visual inconsistency.
Why it Matters
Inconsistent padding affects visual harmony and can reduce the perceived quality of the interface.
How to Fix
Apply consistent padding spacing inside all result cards, especially around status labels.
Issue Highlights