Workflow Builder

Workflow Builder is a no-code automation tool inside HCL BigFix's Resolve suite. It lets IT and security admins set up automated workflows for things like notifications, remediation, software deployments, and approvals, without writing any code.

Before this, admins did all of that by hand, one task at a time. My job was to build the automation into the product itself. It had to be capable enough to be useful and simple enough that a non-technical admin could pick it up on their own.

It runs on React Flow. And because BigFix serves federal customers, keyboard accessibility wasn't optional. It was something I designed around from the start, not a thing I patched in later.

I didn't have access to real users, so I leaned on a few things instead. Competitive analysis of Zapier and n8n, the platform's existing components and conventions, BigFix's accessibility guidelines, and a lot of back-and-forth with another designer.

The biggest call was to keep it simpler than Zapier or n8n. Our workflows are short, usually under 15 steps, and they mostly run one action after another. So I modelled the canvas around a linear flow and saved branching for a few node types like Switch.

Engineering added one rule that shaped everything. A workflow always has to be valid and connected, so you can't leave a broken flow on the canvas. That's why nodes move one step at a time instead of being freely rewired, and why a half-built flow can't be saved.

I started by mapping the two ways someone would build the same workflow. A regular user clicks or drags. A keyboard user moves through insertion points and the action library. Both paths had to converge on the same result, and getting them to line up shaped everything that followed.

A node has to show its name, whether it's configured, and what you can do with it, all inside a small box. I tried coloured nodes, coloured status icons, and a few different connection points. Every one of them fought for attention and made the node feel busy.

So I stripped it back. The node is neutral, with a single “Not configured” state. Delete stays visible because people reach for it often. Everything else, like move up, move down, and duplicate, sits in a More menu opened from the kebab icon, which also works with the keyboard. I dropped the connection dots completely. They added weight and didn't really mean anything.

Before any of this shipped, I had to work out how a keyboard would move through the canvas and what a screen reader would say at each step. Focus runs from Start to End so it follows the workflow itself. Each node's actions are grouped as a labelled toolbar, and a short hint tells you that Alt with the up or down arrow reorders a node. I handed this off to engineering as focus-order notes.

The everyday path: drag a node from the library onto the flow. Each state gives clear feedback so you always know what's about to happen.

The action library sits docked on the left and collapses when you need more room. You can search it or browse by category, and search ranks results by node name first, then category, then description. Start and End are fixed, so you build everything between them. Zoom, fit-to-view, auto-align, and lock keep a bigger workflow readable.

Accessibility shaped the visuals too. The dotted canvas tells you the workspace is editable, and the read-only details page drops the dots. I tuned the dot contrast for light and dark so the grid stays visible without fighting the workflow.

The builder holds up on a smaller, accessible viewport. The same node, library, and configuration patterns adapt to a narrow screen, and adding a step works the same way.

Power users get a second way in: a live JSON editor in a side drawer. The canvas and the JSON stay in sync, so a change in one shows up in the other when you save. You can import a full workflow file or export the current one. Invalid JSON throws an inline error and won't save, so a workflow is always valid and connected.

Drag and drop can't be the only way to build a workflow, so I designed a second path for people who use a keyboard, and treated it as equal rather than a fallback. There's a plus between every pair of nodes, and a “Skip to Action Library” link jumps focus straight to search. Here's that path end to end.

Editing a saved workflow is where the canvas gets busy, with multiple steps and a plus between every pair. The same two paths still apply, and both let you land a node at the exact point you mean.

Once a node is on the canvas, the edits people reach for most are duplicating and deleting. Both live on the node itself and work the same by mouse or keyboard, so a change never breaks the flow.

Underneath all of this is a defined tab order, the spec I handed to engineering. Every interactive element is numbered in the sequence focus moves through it, so the keyboard path is unambiguous to build and to test. Skip links jump focus to the action library or the canvas, the canvas runs Start to End following the workflow itself, and even chart segments take focus.

Workflow Builder shipped as BigFix's first built-in automation tool. Admins finally had a no-code way to replace the manual, repetitive work they'd been doing by hand, with a keyboard path that was built in rather than bolted on.