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

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

My Role:

Ideation

Ideation, Design, Usability Testing, Design Handoff

Design

Usability Testing

Design Handoff

Duration:

2 Months

Team:

1 Product Manager

1 Product Manager, 1 UX Designer, 4 Software Developers

1 UX Designer

4 Software Developers

Tools Used:

Figma

Figma, ReactFlow

ReactFlow

What we achieved

25%

End-to-end setup time of a process

25%

End-to-end setup time of a process

48.2%

Adoption growth among non-technical users

48.2%

Adoption growth among non-technical users

74.2%

Error resolution time per quarter

74.2%

Error resolution time per quarter

How system used to work

The existing system was built to seamlessly process documents through a series of meticulously designed steps, 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

Addressing the problem

Limited visibility and no control over document processing steps

While the system was designed to handle processing efficiently in the background, it creates several challenges for users interacting with it

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 setup document processing flow according to their specific needs and preferences

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

Designing for user-controlled process setup

Approach 1 - Step-by-Step configuration in a table

This approach follows the standard grid or table layout already used across the product. Each step in the process 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 - Step-by-Step flowchart builder

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 - Freeform flowchart builder

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

Finalizing the approach

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

Mapping out the actions

I built the workflow canvas using React Flow, which handled node connections, drag-and-drop behavior, and canvas interactions out of the box. I 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.

A tour of the new workflow builder

An interactive 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

Approaching data tracking and observability

I 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.

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, I 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

Visual canvas for monitoring & tracking

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

Constraints and limitations

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.

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