Low-code automation · Sole designer · 2021
From the first block to a live workflow
DataFlow lets bank operations analysts build automations by connecting blocks. I designed block discovery, canvas interactions, and publishing. The central challenge was to make the flow understandable while keeping edits separate from the version already running.
Shipped product work
DataFlow and client names are anonymized. Interface text is translated into English.
Support browsing and comparison
Analysts needed to find a block without always knowing its name. They also needed to compare blocks and add several to a project.
I separated the catalog from the project library and gave it two views: cards for browsing, and a table for comparison. Bulk actions let analysts select several blocks before adding or removing them.
Keep the state of the flow visible
Each block shows its current status in the header and its last-run summary below. The library sits beside the canvas, grouped by what blocks do: sources, transforms, and channels.
The toolbar changes with the selection. This puts the available actions in a consistent place when an analyst selects a block, a connection, or several blocks.
Separate editing from publishing
Analysts edit a draft, then publish it as a numbered version. The published version is what runs; saving a draft does not replace it.
Published versions open in view mode, with an explanatory banner and disabled editing controls. This makes the distinction between inspecting and changing a flow visible in the interface.
What shipped
The catalog views, canvas interactions, and draft/published-version model shipped. They use the shared components documented in the design-system case.
To evaluate the design, I would check whether analysts can find the right block, identify a failed step, and update a flow without changing the wrong version.