Three visualizations. One vision: giving process a body.
Each experiment targeted a different dimension of the observability problem: the history of a single item, the map of a single process, and the relationships between processes.
01 — Card Timeline
The history of an item
The problem: A card in Pipefy can pass through dozens of phases, be moved by automations, have fields filled by AI agents, receive comments, emails, and approvals — all mixed in an unstructured feed. For an auditor, making sense of the narrative was nearly impossible.
What we built: A visual, chronological timeline of a card's entire life, divided into three parallel lanes: human actions, automations, and AI agents. Each process phase is a visual anchor — you navigate the card's history phase by phase, seeing who did what, when, and why.
Why it matters: Customers who use Pipefy as an audit system — especially in regulated sectors like financial and healthcare — got real traceability. The question "what happened to this process?" gained a visual answer, not a log to parse.
Key decision: We launched as a modal — not integrated into the existing activity tab — to maximize validation speed. Modal placement got the feature into users' hands faster. Integration depth is a second-phase decision, not a day-1 constraint.
02 — Process Flow
The start of a control plan view
The problem: Process admins who manage complex pipes — dozens of phases, hundreds of automations, multiple integrations — had no way to see the whole thing. Every configuration lived in a separate menu. Understanding the impact of a change was intuitive or required external documentation.
What we built: An interactive canvas where each phase is a node, connections between phases are edges, and automations and integrations appear in the exact context where they act. Three view modes: Flow (process as a graph), Matrix (swimlanes for side-by-side comparison), and Layers (automation logic isolated). The canvas also surfaces process mining data — real frequency of each path cards take — and AI-generated summaries per phase.
Key decision: Keeping data transformation strictly separated from rendering. On a canvas, the temptation is to mix everything. That separation made the code testable, the feature extensible, and allowed us to cover critical paths with unit tests from day one.
03 — Workflow Visualization
How processes relate to each other
The problem: Large companies run multiple connected pipes — a procurement process connected to financial approval connected to contracts. There was no way to see those connections. Each pipe was an island.
What we built: A relationship graph showing all processes connected to a given pipe — connections by field references (when a card in one pipe references another) and by automation (when an automation in one pipe creates or moves items in another). Circular relationships are detected and represented correctly.
Why it matters: Operations managers gained a systemic view that didn't exist in the product before. It's the first step toward understanding the impact of a change at multi-process scale.