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

Year - 2023

Tools Used - Figma

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

How the current system operates

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

The product is designed to revolutionize the way document extraction and processing is handled. The system is built to seamlessly process documents through a series of meticulously designed stages, until marked as processed.

How it works: The entire process is coded into the system, with no user interface for tracking progress

Where it falls short

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

Absence of real time feedback makes it difficult to track progress

Code editor showing a document processing function with text extraction and step execution

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

Console log output showing workflow execution steps with info, debug, and error messages

Errors are hidden in logs, forcing dependency on tech teams

Understanding the people behind the process

Our system needs to balance the needs of three distinct groups: internal experts like developers, internal teams such as managers, and external clients. Observing their daily work and listening to their frustrations revealed distinct needs:

Power Users: Want greater control and customization to fine-tune processes

Business Users: Need a simple, visual interface to track progress easily

External Clients: Sought flexible workflows they could adapt to their own processes

From these insights, two key opportunities emerged:

Enable flexible customization so both internal teams and external clients can adapt the system to their needs
Provide real-time visibility into every stage so progress is transparent, delays are visible early, and errors can be addressed without depending solely on technical support

Shaping the solution

To address the gaps identified, we explored multiple ways the system could give users more control, visibility, and independence in managing workflows. After testing options and gathering feedback, five key decisions shaped the final direction:

Flowcharts for workflow visualization

Explored: Lists/tables vs. process maps/flowcharts
Decision: Chose flowcharts for a more intuitive and visual representation of workflows
Why it matters: Makes complex processes easier to understand at a glance for all user groups

Drag-and-drop workflow builder over assisted step creation

Explored: Step-by-step guided creation vs. free-form drag-and-drop
Decision: Chose drag-and-drop for greater flexibility and faster rearrangement during frequent process changes
Why it matters: Reduces effort for users while allowing quicker adjustments when processes evolve

Three workflow step types: automated, manual, and control

Explored: Single generic step type vs. categorization
Decision: Chose three clear types to help users instantly identify the nature of each step, improving clarity and reducing errors
Why it matters: Offers a balance between flexibility and clarity, helping users avoid confusion

Real-time progress and data on a separate screen

Explored: Inline progress tracking on the same flow vs. dedicated monitoring view
Decision: Chose a separate live dashboard to keep the building view uncluttered while still offering stage-wise, real-time visibility
Why it matters: Prevents information overload during setup while still enabling detailed monitoring when needed

Multiple triggers per workflow to avoid repetition

Explored: One trigger per workflow vs. multiple triggers
Decision: Chose multiple triggers to reduce duplicated flows and save setup time, especially for similar processes
Why it matters: Saves time and reduces maintenance overhead, especially for recurring or similar processes

Laying out the basics of a workflow builder

Low-fidelity wireframe of a workflow builder with central flowchart, actions on the left, and settings on the right

Canvas with steps on the left and properties on the right

Low-fidelity workflow wireframe showing the ‘Convert to text’ step selected, with configuration panel on the right for details, triggers, parameters, and ports

Details of an Automated Step

Low-fidelity workflow wireframe showing the ‘Add to review’ step selected, with configuration panel on the right for details, task info, duration, parameters, and ports

Details of a Manual Step

Low-fidelity workflow wireframe showing the ‘Condition’ step selected, with configuration panel on the right for details, ports, and condition logic

Details of a Control Step

Canvas with steps on the left and properties on the right

Details of an Automated Step

Details of a Manual Step

Details of a Control Step

Canvas with steps on the left and properties on the right

Details of an Automated Step

Details of a Manual Step

Details of a Control Step

Canvas with steps on the left and properties on the right

Details of an Automated Step

Details of a Manual Step

Details of a Control Step

Balancing design vision with feasibility

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.