Jeff Paul / Product Designer & Researcher

Building robust find and replace functionality in the Editor

Find & Replace menu in various states

Role

Product Designer. Responsible for designing the feature end-to-end. Worked closely with product and engineering counterparts for shaping and delivery.

Team

Product Manager and Engineering Manager (core EPD), as well as 5 Front-end/Full-stack Engineers.

Timeline

2024-25. Early-mid Q4 for design. End of Q4 through early Q1 for development.

Context

Increasingly complex automations lead to more tedious maintenance

Automation workflows, or Zaps, are created using a number of building blocks. These include third-party apps, built-in tools, trigger and action events, and authentications, to name a few. These building blocks are often used over and over again across multiple steps in a Zap. However, Zapier doesn’t provide an easy way to reuse these building blocks, which leads the user to manage a lot of manual processes.

Scalability proved to be a persistent problem for users building in Zapier’s Editor. Users noted that as they built larger and more complex Zaps, maintaining their automation became a burden. As a general theme, our team aimed to build functionality that would better serve power users who scaled their usage and were building more advanced automations. I wondered how I might make it easier for users to manage, update, and reuse particular components.

A large Zap with a number of steps

Problem

We needed to provide users with a way to quickly find and replace values

As Zaps connect apps together and reference information among them, one of the most essential building blocks are “gives,” or data values mapped from fields in previous steps. These values often need to be updated, especially when an integration breaks. This could occur when duplicating a Zap, copy and pasting a step, reordering or deleting a step, or upgrading the app version used.

Currently, the process is tedious. Users must go step-by-step, field-by-field, scanning for the previously mapped values. What’s worse, each value then needs to be updated one at a time.

I wondered how I might reduce friction in the field mapping process. How might I craft an intuitive way for users to quickly access these values? How might users navigate searching these values across an array of steps in a Zap? How might they replace (or even bulk replace) these values if needed? How might I better highlight broken integrations that need to be replaced?

Closeup of a step details panel with the field mapping menu open. A number of fields here have broken gives that need to be replaced

Approach

Familiar patterns augmented for our unique requirements

Though I recognized find and replace functionality as a common pattern (think Google Sheets, Microsoft Word, etc.), I had unique constraints based on the structure of the steps in the Editor and logic of these mapped data values. For instance, users can only use these data values in a linear fashion, as in, from a previous step to a subsequent step.

Other examples of find and replace functionality: Google Docs, Google Sheets, Figma, Microsoft Word, Microsoft Excel

I also had to grapple with the variety of text and values within the Editor. There were three main types:

  • Static text: text a user types into a field, which remains the same every time a Zap runs

  • Static value: selection a user makes from a list of options, which remains the same every time a Zap runs

  • Dynamic value: placeholder value selected from field mapping that represents a variable output from a previous step, which changes each time a Zap runs (also referred to a “give”)

For this feature, I was only concerned with static text and dynamic values. However, I still had to think of how all the permutations of these inputs might be searched for and updated: static text for static text, dynamic value for dynamic value, static text for dynamic value, dynamic value for static text, as well as multiple gives and combinations of static text and dynamic values together.

Static text

Dynamic values

I also recently updated the pattern that enables field mapping as part of our Editor redesign. A plus button appears on the right inside applicable fields that allows users to insert data values. These dynamic values display as clickable tokens between text in a field. I knew this interaction would be critical to include in the new designs.

With that in mind, I crafted a number of divergent explorations. I first imagined a large split-column modal, one that would allow users to see all their mapped values alongside the step and field in which they lived. Replicating the interface here felt a bit cumbersome. I then considered a more condensed view, which felt like the right direction, but lacked the context afforded by the first design. I also considered a number of entry points, including general and contextual options.

Option 1: Split column large modal

Option 2: Compact menu with search metadata

Option 3: Compact menu with inline controls

Option 4: Swingout menu of search results

After a few more iterations (and rounds of stakeholder feedback, user testing, and a design critique), I arrived at a final design.

Solution

A find and replace feature bespoke for complex workflow automations

Ultimately, I realized the best mental model was one in which users could summon a small menu to be used in conjunction with their step details panel on the right. Doing so would disable the canvas space, leaving only the surfaces of concern in focus. This search bar in the subnavigation would persist as a general entry point to the feature.

Full screen of the Editor with the Find & Replace menu and step details sidebar in focus

Users would see two fields, one for “Find value” and another for “Replace value with.” Each field allows for static text input as well as dynamic values via field mapping when clicking the plus button. This configuration allows users to simply find, or find and then replace, any arrangement of values. The buttons below the “Replace value with” field allows the user to further decide if they want to replace a single instance or all instances of a particular value.

Default Find & Replace menu

Field mapping menu open for the “Find value” field

Elevating critical issues to address

I recognized that one of the primary use cases for this feature was to identify disconnected data values and quickly update them. I therefore wanted to highlight those broken mappings in a separate section towards the top of the menu for easy access and visibility.

Broken mappings section default, opened, and selected

Compact overview of search results

This compact menu appears when surfacing search results, incorporating the app icon, step event, and field name where each instance was located. Users can toggle between search results sequentially with the up and down arrows, or quickly navigate the full list of instances by scrolling. Clicking on a result in the menu prompts the step details sidebar on the right to display the result in context to the step and field.

Three variations of search results: 1 result (min height), 2-4 results, and 5+ results (max height)

Highlighting static text in a field

Highlighting a dynamic value in a field

Contextual toolbar as an additional entry point

While the subnavigation (and ⌘ + F shortcut) provide a persistent entry into the Find & Replace experience, we recognized the need for an additional point of access. I devised a contextual toolbar, one that appears when a user highlights static text or clicks a dynamic value in a field. The toolbar displays an option to Find & Replace, which opens the menu and populates the “Find value” field with the value selected. I also included the ability to copy and paste the selection from this toolbar.

Contextual toolbar above a broken give

Default contextual toolbar and various selected states

Impact

Adoption of the feature and its ease of use were noticeable

Early signals have been promising of this initiatives’ success. Despite being a fairly advanced feature, over 10% of users have used the feature to replace a value of all users engaging with basic search functionality in the Editor. Monitoring Fullstory sessions also provided confidence that users understood how to navigate this feature with ease.

Next steps

Crafting a new universal pattern

The contextual toolbar proved to be an invaluable pattern, with applications beyond this Find & Replace feature. I’ve worked with other designers to imagine additional uses, including AI actions, augmenting testing data, and inline formatting.

Conceptual mockups of what AI tooling and inline formatting might look like