Core editor

Zapier

I joined Zapier as Product Design Lead on the Core Editor team, which is responsible for the main interface that users utilize to construct their Zaps. During my tenure, I designed various improvements to enhance our users’ ability to build Zaps.

Redesigned step picker

Zapier offers numerous native apps for triggering Zaps and processing data. These utilities are crucial to solving certain automation needs. However, these apps were not easily discoverable; users needed to know of their existence to utilize them.

I redesigned the step picker to highlight native apps like Schedule, Webhook, Filter, Path, and Format. This helped surface functionality critical to constructing many Zaps.

Additionally, I used this opportunity to refine the experience with external apps. The new design first showcases broadly popular apps. Over time, it adapts to display the apps most frequently used by the user or their team.

Curated triggers
Curated triggers

Curated actions
Curated actions

Task estimate

Zapier’s billing model is based on tasks executed. When opening a Zap, however, it’s not obvious how many tasks will be used. A small intervention in the header helps clarify this.

States of the task estimate
States of the task estimate

Explaining mapping

Many of Zapier’s users do not have programming background. Our research showed that variable passing was an unfamiliar concept, yet it is crucial for building most Zaps. To flatten this learning curve, I designed an educational intervention to teach this concept the moment it’s needed.

Tourtip explaining new concepts in the moment
Tourtip explaining new concepts in the moment

Users seeking further information could access our Guide in the side panel, where they could learn more and watch tutorials without leaving their workflow.

Relevant fields

APIs often include numerous fields that are seldom used, which can frustrate users who typically seek only the essentials. Since we do not control the APIs, altering or reordering these fields was not feasible.

However, by analyzing usage data, we managed to identify and conceal fields that are rarely used. Progressive disclosure allows users to reveal these fields if necessary.

Although this was a simple design change, the effects are significant. In my mind, it underscores the principle that user experience encompasses more than just the user interface.

Fields collapsed
Fields collapsed

Fields expanded
Fields expanded

Draft & Publish

Working on a Zap, especially one that’s actively running, is a harrowing task. It’s too easy to accidentally break things. For some customers, any downtime can result in lost leads, unsent emails, or lost revenue. In user interviews, I noticed people hacking version control into their Zaps, albeit ineffectively. I felt this was a clear signal for a purpose-built feature.

Editing a running Zap creates a Draft copy
Editing a running Zap creates a Draft copy

I was worried about creating too complex a system for version management. A multibranch model, like git, would require handling merge conflicts and other side effects, I planned a single-branch model. Running Zaps could be edited as a Draft while the original continues to run. When the user is ready, they can Publish the Zap, which replaces the running one.

A state diagram describes the versioning model
A state diagram describes the versioning model

Visual Editor

Zapier was originally designed as a single execution path. Based on a triggering condition, a sequence of actions is executed. This works for simple Zaps, but those containing many steps and conditional logic are hard to visualize. The former editor was designed around simpler Zaps and had trouble accommodating the automations users needed to create.

With that in mind, I created concepts for a visual editor. This node-based experience allowed the user to more easily express the logic of their Zap. The zoomable, infinite canvas scaled better to Zaps with many steps. I also uses a Canvas-Inspector pattern to progressively disclose configuration details for each.

Composing on an infinite canvas
Composing on an infinite canvas

Debugging running Zaps is a critical part of the user journey. The same visual canvas supports a time-traveling debugger. A user can click on a failed run and see which step failed.

Seeing where a Zap failed
Seeing where a Zap failed

Impact

With a complex tool like Zapier, there is often no single point of improvement. Talking to users and observing their behavior helped us identify the most significant drop-offs in the funnel. By deploying incremental improvements at friction points, we were able to improve success rates when creating Zaps. It also helps us avoid disrupting users with large changes.