Designing a canvas you can think in
A workflow builder is a strange thing to design. It's a canvas, a code editor, and a document all at once. People come to it to do something logical and precise, but they arrive with a fuzzy idea in their head and need the tool to help them sharpen it. Get the design wrong and every workflow feels like a fight. Get it right and the tool disappears, and people just think about their work. That disappearing act is the entire goal, and here is how we've been chasing it.
Start from the question the person is actually asking
When someone opens a workflow, they're rarely asking "what does this software do?" They're asking a question about their own process. What happens after the invoice comes in? Why did this run take the wrong branch? Our job is to make the interface answer that question faster than they can finish asking it.
So the first principle is legibility over density. A workflow should be scannable at a glance. Steps show real application names and icons instead of opaque node identifiers. Dates render as readable strings rather than raw timestamps. Variable references and quoted values appear as inline chips right inside the step text, so your eye catches "the vendor name flows into here" without decoding any syntax. Each of those choices is small on its own. Together they're the difference between reading a workflow and deciphering one.
Make the canvas feel like a place, not a diagram
People carry strong, mostly unconscious expectations about how a canvas should behave, and tools like Figma have set them. Zoom should track your cursor. Panning should feel smooth. The view should fit itself to whatever you're looking at. When a canvas breaks those expectations it feels broken, even when every feature technically works.
So we rebuilt the builder canvas to behave the way people already expect a canvas to behave: Figma-like zoom and pan, automatic fit-to-view, and scroll boundaries so you can't accidentally fling yourself into empty space and lose your workflow. Loops and branches got clearer connectors. Adding a step shows a ghost preview of where it will land before you commit. None of this is novel for novelty's sake. It's all in service of one thing, which is that the canvas should never be the thing you're thinking about.
Structure you can see
Logic has shape, and the design should show it. A step inside a loop is doing something fundamentally different from a step in the main sequence, and the interface should make that obvious without anyone tracing connectors by hand. So loops and branches indent their contents, and nested branches render with enough hierarchy that you can read the structure like an outline. On a run, the path that actually executed is highlighted, so you see which branch was really taken and what each loop iteration did, not an idealized diagram of the workflow but the real thing that happened. Structure you can see is structure you can trust, and for the people who want to go a level deeper, a JSON editor is right there to read or edit the workflow directly.
Sweat the moment of adding a step
There's one interaction a workflow builder lives or dies by, and it's adding a step. It happens more than anything else, and it's the moment a fuzzy intention has to become a concrete choice, so we've spent more design time here than anywhere else in the product.
The add-step picker is organized into clear sections, so you're choosing from a map rather than a wall. There's a recently used section, because people reach for the same handful of steps over and over. Parameters carry example chips and inline descriptions, so you can tell what a field wants without leaving to go read docs. Navigating back preserves your scroll position, because losing your place is a tiny betrayal that adds up over a long build. Small frictions here get multiplied by every step in every workflow, which is exactly why they earn the attention.
Design for the second look, and for the dark
Automation is something you return to. You build a workflow once and then read it dozens of times while debugging, reviewing, or handing it off, so we design as much for the second look as the first. Run pages, logs, and workflow details all got reworked so a returning glance is productive, with cards, badges, and layouts that surface state instead of burying it. And because people sit in this tool for hours, we treated dark mode as a first-class surface rather than an inverted afterthought. Provider logos stay legible against dark backgrounds. Contrast holds up. The app is comfortable to live in all day, which, for the people who run their operations on Lodol, is exactly how long they live in it. You can even set your own accent color, so the place you spend your day looks a little like yours.
The idea underneath
If there's a single thread under all of this, it's that clarity is a feature, and it's never finished. Automation is inherently about precision and logic, and the design's job is to make precision feel approachable instead of intimidating. Every polish pass, every relabeled field, every smoother pan serves the same outcome: the person in front of the canvas stops thinking about the canvas and starts thinking about the work. When that happens we've done our job, and then we go find the next place the tool is still in the way.
Want to feel the difference a well-designed canvas makes?
Build a workflow in Lodol and notice how quickly you stop noticing the tool.
