Configurable Workflow

A system which enables users to design and manage processes that guide data flow through the application. It offers real-time tracking of data, thus providing actionable insights to analyze efficiency, address bottlenecks, and optimize processes.

My Role - UX Designer

Duration - 2 Months

Tools Used - Figma

Workflow builder interface for automating record creation with manual review and conditional steps

What we actually achieved

26.1%

Average processing time per document requiring manual intervention

48.2%

Growth in system adoption among non-technical users

74.2%

Error resolution time per quarter

25%

End-to-End workflow setup time

Relative Contribution to Overall System Impact

A donut chart showing a percentage breakdown into five segments: 31%, 25%, 23%, 16%, and 5%

A doughnut chart depicting percentage share of the impact each key functionality has on the system

Fast error resolution

35%

Improved system adoption

34%

Increased processing efficiency

25%

Enhanced user productivity

Why did this even start?

The system is built to seamlessly process documents through a series of meticulously designed stages, until marked as processed. The entire process was coded into the system, with no user interface to track progress

Diagram of an existing document processing flow showing code execution, branching outcomes, and error logging

Shortcomings

Task status table displaying document IDs with success, in-progress, and failed states

Visibility of only final statuses makes it difficult to track progress

Processes are fixed in the system, leaving no room for customization

Errors are hidden in logs, forcing dependency on tech teams

Identifying the core needs

Enable users to customize document processing flow according to their specific needs and preferences

Provide real-time visibility into processing stages to let users track progress and identify delays

How the solution took shape

Approach 1 - Traditional Grid Layout

This approach follows the standard grid or table layout already used across the product. Each step in the workflow would be configured row by row, with conditions and actions defined in structured fields

Faster to build from an engineering standpoint

Lower learning curve for users already familiar with tables

Difficult to visualize branching or parallel flows

Need to mentally map relationships between rows, increasing cognitive load

Limited flexibility when rearranging steps, therefore hard to manage as workflows grow

Approach 2 - Sequential building using flow charts

In this approach, users can build the workflow one step at a time by extending it from the previous step. The flow grows gradually in a forward direction. Instead of freely placing steps anywhere on the canvas, users keep adding the next step in sequence

Works well for linear processes and feels more guided than a completely open canvas

Reduces error rate of creating disconnected or incomplete flows

Inability to easily rearrange or restructure the workflow once it becomes complex

Branching and parallel paths become harder to manage due to the nature of the system

Modifying earlier decisions may require undoing or rebuilding parts of the flow, increasing friction

Approach 3 - Drag & Drop using flow charts

This approach introduces a visual canvas where users can drag and drop steps, connect them through handles, and define relationships visually. Steps are clearly differentiated, and the entire workflow structure is visible in one view

Matches users’ mental model of process flow

Makes branching and parallel logic visually clear

Easy to rearrange, iterate and scales better for complex workflows

Requires clear validation to prevent misconfiguration

We chose the drag-and-drop approach because it best matched how users naturally think about their processes - as flows, not rows or sequences. While it required stronger validation and thoughtful guardrails, it offered the right balance between clarity and control, making it scalable for both simple and complex workflows

Mapping out the actions

We built the workflow canvas using React Flow, which handled node connections, drag-and-drop behavior, and canvas interactions out of the box. We used custom nodes to represent various actions in the workflow, known as steps, which are categorized into:

Automated Step

Connected to back-end processes and run automatically

Automated Step

Connected to back-end processes and run automatically

Manual Step

Required manual intervention to complete execution

Manual Step

Required manual intervention to complete execution

Control Step

Manage how the process flows from one step to another.

Control Step

Manage how the process flows from one step to another.

Approaching data tracking and observability

We focused on making workflow execution transparent and easy to understand. Each step displays its current status, related data, and any errors directly within the interface, making it easier for users to identify issues early and take appropriate action

Dashboard highlighting a workflow with a selected step, alongside a parameters table and a fields before-and-after table.

A tour of the new workflow

An interactive workflow builder

Automated Step

Manual Step

Control Step

Grid view showing ongoing step with mixed sub-task statuses

Workflow builder with flowchart in center and settings on right

An interactive workflow builder

Workflow builder with ‘Convert to Text’ step selected and settings on right

Details of an automated step

Automated step

Workflow builder with ‘Add to Review’ step selected and task details on right

Details of a manual step

Manual step

Workflow builder with ‘Check for Confidence Score’ step selected and logic editor on right

Details of a control step

Control step

Pausing for a quick feasibility check

While the long-term plan was to offer a dedicated live monitoring screen for real-time workflow tracking, early technical discussions revealed that this would significantly delay delivery. To meet business timelines while still improving user experience, we adopted a traditional grid layout for workflow monitoring in the initial release.

An in-progress step of a workflow

Grid view showing completed step with all sub-tasks done

A completed step of a workflow

Grid view showing failed step with error details on right

A failed step of a workflow

Keeping constraints in mind

Collaborative workflow creation was deferred to prioritize stability and faster delivery

Advanced features like Undo/Redo were deferred due to budget constraints

User-defined parameters were excluded to keep the functionality simple and approachable.

How we’re tracking success and observability

Workflow map showing active step in orange with in-progress status

An in-progress workflow

Workflow map showing all steps completed with green checkmarks

A successful execution of a workflow

Workflow map showing selected step with all sub-tasks completed

A completed step of a workflow

Workflow map showing failed step marked in red with error info

A failed step of a workflow

Workflow UI showing update history with logs and current record values

Update history of a workflow context parameter

Workflow UI showing update history with before-and-after record values

Values of a parameter before and after step execution

Assessing next steps …

Expand the use of the workflow engine to take on more routine and repetitive tasks, reducing manual effort even further

Add flexibility by allowing users to define their own parameters and values, making the system more adaptable to different needs