Visual Editor

Project

Zapier Core Editor

Role

Product Design Lead

As Zapier users' automations became more complex, our core editor was no longer sufficient for them to easily manipulate and visualize their automations. In response, I envisioned a graph-based visual editor.

Problem

Zapier's early success was attributed to two main factors: a vast array of integrations and a simplified editor, which was optimized for 2-step automations—a trigger paired with an action.

However, as users' needs evolved to require multiple steps and decision logic, it became challenging to effectively display this complexity on-screen. Essentially it was a scalability problem: we needed an interface that could accommodate both simple and complex Zaps.

Solution

I proposed a visual editor designed to improve the display of multiple steps and branching logic. This editor combined an infinite canvas composer with a property inspector. This arrangement enabled users to quickly edit steps in the Zaps of any size without losing context.

Each step could include notes, which are particularly useful for teams collaborating on a single Zap. Notes can be utilized to communicate rationale, prerequisites, or instructions.

Furthermore, the visual editor introduced support for time-traveling debugging. Through the history panel, users can review previous runs to identify where errors occurred. The execution path for each run is displayed on the canvas, enhancing error diagnosis and correction.

The debugger also integrates the version control system described in the Draft & Publish project.

Impact

This vision garnered internal support for redesigning the editor. The visual editor beta was launched in 2022, inspiring Zapier's pre-automation Canvas product.