Three canvases.
Each better than the last.
None reconciled.
over.vu is an internal civil engineering project management application used company-wide to manage client work. Three of its features are canvas-based: Automation Builder, People Selection, and Status Gating.
Each canvas was built sequentially, and each improved on the one before it. But none of them was ever brought back in line with the others. The result was an inconsistent experience across all three, and a backlog of user support tickets for each.
The canvases didn’t just look different, they behaved differently. Duplicating a node wasn’t possible on any of them. Multiple conditions per node worked in People Selection and Status Gating, but not in Automations. Deleting a connection on its own worked in People Selection, worked differently in Status Gating, and wasn’t possible in Automations, where removing a connection meant deleting a node.
As Lead Product Designer, I inherited the inconsistency. My job was to unify the three without making users relearn everything they already knew.
Before · Automation Builder
Before · People Selection
Before · Status Gating
Audit. Unify.
Improve.
How might we bring three canvas features into one consistent experience, while resolving the pain points users had already reported, and raising the bar on all of them? People Selection was the strongest of the three, so it became the baseline, though its experience still had plenty of room to improve. The goal was to beat it, not just copy it.
The research told us
what not to blow up.
I sent a survey to 8 power users across all three features, and 5 of 8 responded. The results were surprisingly positive overall. The frustrations that did come up lined up directly with tickets we already knew about, rather than surfacing anything new.
- The known tickets represented the real pain points
- The experience was still learnable, despite the inconsistency across canvases
- No hidden problems were waiting to be found
A positive result isn't a null result. It told us where not to intervene, and that signal shaped a conservative, focused approach: fix what users named, and leave what they'd already learned.
Document everything.
Design within what's buildable.
I audited each canvas end to end, documenting screens, nodes, conditions, actions, and interactions. I referenced the React Flow library throughout, so every design change stayed technically feasible.
The audit board: screens, nodes, conditions and actions across all three canvases
Three working relationships kept the project aligned from start to finish:
- Dev leads: regular syncs to validate feasibility as designs evolved
- PM: coverage check to make sure every addressable pain point was in scope
- Other designers: coordination wherever their work intersected with the canvas
The guiding rule was to simplify the visuals, preserve the flows. Condition and action flows stayed as they were, so users kept the muscle memory they'd already built.
Node exploration
The first direction kept the existing node styling with only slight modifications. It stood out too much on the canvas, and the colors didn’t work well together.
The general action of the node becomes the text, with the node type shown as a badge. The limit: it breaks down when a condition node holds multiple conditions.
One canvas language,
three features.
The redesign pulled the strongest ideas from across the three canvases into one shared system. It didn’t just copy People Selection’s best interactions into the other two canvases: for each one, I looked for what could be better, then applied the improved version everywhere.
