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. We wondered how we 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.
We wondered how we might reduce friction in the field mapping process. How might we 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 we 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 we recognized find and replace functionality as a common pattern (think Google Sheets, Microsoft Word, etc.), we 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.
We 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, we were only concerned with static text and dynamic values. However, we 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
We 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. We knew this interaction would be critical to include in our 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 3: Compact menu with inline controls
Option 2: Compact menu with search metadata
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
Elevating critical issues to address
Compact overview of search results
Contextual toolbar as an additional entry point
Ultimately, we realized the best 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
We recognized that one of the primary use cases for this feature was to identify disconnected data values and quickly update them. We 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.
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
Contextual toolbar above a broken give.
Highlighting a dynamic value in a field
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. We 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. We’ve also included the ability to copy and paste the selection from this toolbar.
Default contextual toolbar and various selected states.
Next steps
Crafting a new universal, foundational 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.