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.
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.
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.
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.
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.
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.
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.
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.
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.