Following our customers’ intuition: The evolution of our visual workflow builder 

Sophisticated campaigns, driven by data, personalized to each customer at any scale: that’s the promise of messaging automation. Customer.io is built to deliver on that promise, and one of the most important ways we enable it is with our visual workflow builder. We designed it to make the power of messaging automation accessible—and even enjoyable—for everyone.

Creating our visual workflow builder has been a journey, from both a product and engineering perspective. In the beginning, “visual” wasn’t even part of the equation. We had a highly functional builder for creating automated messaging campaigns, but we felt something was missing. So we asked a crucial question: How could we empower marketers to create better automations, with less effort, and without technical expertise?

To answer it, we had to get into our customers’ minds—and then totally reimagine how a workflow builder can function. Let’s walk through how it happened.

Our very first workflow builder was linear and static—essentially a list of sequential actions with conditions applied to them. And while the functionality was solid, it wasn't very intuitive to use. Customers had to sketch out the whole journey of a campaign separately (like on a whiteboard) and then translate that into the workflow builder’s linear framework.

This linear format was also a bit clunky. Moving an action to a different spot in the workflow took several clicks. To personalize how various people moved through the campaign, customers had to place conditions on each step.

Perhaps the biggest drawback: it was hard to envision the broader context of the workflow all at once. Customers had to expand an individual action to edit it, making it impossible to see the campaign holistically while editing—especially with larger workflows. And branching wasn’t even on the radar in this early incarnation. Customers had to figure out which messages should be skipped in various scenarios and then set up conditions on individual steps within the linear format.

We knew we needed to evolve our workflow builder, and customer feedback pointed us toward the actual pain points we had to solve. People weren’t complaining about the functionality. They were asking for something easier to understand and more intuitive to use. Our next iteration had to address the underlying disconnect between how people envision a workflow and how they build it in our product. That is what would create an intuitive experience.

Our aha moment came when we looked closely at how customers think about workflows in the first place—their mental models. A mental model is how someone imagines a particular concept. It’s not how we’d represent that concept in computer science; it reflects how human brains translate abstract ideas into a concrete picture. The more closely a product's model matches up to a person’s mental model, the less cognitive load it takes to use that product.

Source: How mirroring people’s mental models unleashes superpowers, by Madeline Pickering

Customers usually drew up their workflows as a flow diagram on a physical or digital whiteboard. So our builder needed to be visual as well—allowing them to map out the workflow according to their mental model while actually building it at the same time!

Aligning our builder to customers’ mental model would reduce the time and energy needed to understand the tool. We don’t want people thinking about how our builder works. The tool should free them up to think about their goals, strategy, and content. So our mission was clear: replace the old linear structure with a visual workflow builder reflecting how people actually envision their workflows.

Our vision for the visual workflow builder was a blank canvas where anyone could easily build out any automation they might dream up—as simple or as complex as they like—with no limit other than their imagination. To make that a reality, we settled on some core characteristics for the reimagined builder:

• Approachable: Customers can build their dream automation without having to know a lot of technical stuff or wrestle with an overloaded UI. Simple automations feel simple. Complexity and power grow as a customer’s strategies increase in complexity.
• Empowering: The builder helps customers grow in their marketing abilities as they see their strategies come to life in the tool.
• Holistic: People can view the entire workflow and how everything relates, with action editing in a sidebar so they can see how actions connect while editing them.
• Unambiguous: Everything you can do is immediately apparent and readily available—no massive lists of controls, drop-downs, and inputs.
• Intuitive: The tool matches the customer’s mental model, so they don’t have to spend mental energy to understand it. Instead, they can direct all their cognition to creativity and strategic decisions.

With these principles in place, we built the first incarnation of our visual workflow builder: an intuitive, drag-and-drop interface that makes creating sophisticated campaigns straightforward, natural, and even fun.

Our first step was to add drag-and-drop capabilities to our segment builder. That moment unlocked our creativity and inspired us to tackle more complex questions: What if we brought drag-and-drop to the workflow items? What if the builder felt more like a design canvas? What if we could enable multiple decision and exit points?

Customer input was also crucial to our development. We got feedback throughout the process to inform decisions around layout structure, workflow direction, and color coding. This ensured that our improvements were based on what customers were asking for.

The other vital aspect of our approach was an experimental mindset. We had a group of passionate people willing to tackle hard stuff, even in the face of many unknowns. So, instead of saying no to ideas that sounded difficult, we looked at everything through a research-and-development lens—spinning up quick prototypes to see how (not just if!) we could make various things happen. Meeting every idea with curiosity allowed us to break through mental barriers, iterate quickly, and implement the vision we’d laid out.

Once we launched the first iteration of our visual workflow builder, we had a “we can do anything” mentality. So, we immediately set about enhancing it, adding more action types, refining the feel and function of interactions, and introducing more nuanced scrolling controls.

Perhaps the most important improvement we made was the addition of branching. Branching is a game-changer for campaigns. It allows you to set up multiple, ultra-specific conditions to get the most effective messages to your customers. It wasn’t possible with our old static builder, but once the visual builder was up and running, we could finally implement it. With true/false, multi-split, and random cohort branches, customers can easily personalize each audience member’s journey according to various conditions.

Branching proved to be one of the most valuable functions for our customers—so much so that after a while, we noticed that the visual workflow builder was acting a bit sluggish with particularly large workflows containing multiple branches. That was our next big engineering lift: a fairly substantial rewrite of how and where we place actions within the canvas to make it more scalable for more items. There were some interesting computer science problems to solve there. Again, an experimental outlook was in order, like writing proofs-of-concept for ideas that occurred to us at 3:00 in the morning and then testing them out. Some of the best solutions came from those middle-of-the-night lightbulb moments (and many of them are still a core part of the layout algorithm!).

Ultimately, that rewrite enabled the builder to support workflows ten times larger than before without slowing down the browser. The new layout actually looked better, rendering more compact workflows with less empty space and making them easier to follow.

Our first visual workflow builder really increased the value customers were getting from our product. But our team’s “we can do anything” ethos means we’re never finished innovating!

For the latest revamp of the visual workflow builder, we had one central goal: reduce the time it takes for customers to see what's possible with automated campaigns. That meant we needed to eliminate the number of steps and lower the barrier of entry into the workflow builder. Dropping people into the canvas as fast as possible would quickly illuminate the possibilities and empower them to move rapidly into action.

Previously, there were several set-up steps required before you could start building out your workflow. Our challenge was to bring all of that—including the trigger, goal, and settings—into the canvas itself without cluttering up the UI. Transforming four pages of content and functionality into a seamless experience within the UX was tricky! But the end result is exciting: an even more intuitive, holistic experience where customers can visualize the entirety of their campaign, from trigger to goal, in one view.

Some of the new benefits we’re most excited about:

• It takes fewer steps and less time to move into the workflow canvas. That makes it easier to visualize your strategy and play around with it right inside the canvas.
• The trigger is now defined right inside the workflow, and you can adjust the automation more easily.
• You can modify campaign settings right in the workflow builder, so the process of envisioning and setting up a campaign is now more holistic.
• Review is now part of the canvas, so we can surface warnings and suggestions before people finish building a campaign—and right in the place where they can take action on them.

The visual workflow builder is a core part of our platform that will continually evolve. We have a great base that we can keep extending with more tooling, and our next improvements will focus on increasing usability and accessibility. There’s a lot that customers can do in the tool with things like webhooks, sending events, and updating people. We want to ensure that powerful functionality is accessible to all, regardless of technical experience, so we’ll continue to help people understand and use those features through UI enhancements.

In addition to making things easier and more intuitive, we’ll keep adding support for more scenarios our customers want to build—new action types, better testing/experimentation, and more robust metrics and analysis. In the years since we first launched the visual workflow builder, we’ve seen customers create incredibly sophisticated and creative campaigns. Their innovation is really the inspiration for our development; it leads us to the improvements that will add genuine value.

Ultimately, we want to keep making it easier for people to start building workflows and try stuff out. Sometimes, you might have just the spark of an idea, and the visual workflow builder can become a place where people can go from initial inspiration all the way through execution. At the end of the day, we want the experience to be a delight.

If you’re not using Customer.io yet, we invite you to take the visual workflow builder for a spin. No need to sign up for anything—you can play with it in your browser right now! Try mapping out a campaign idea, building a better version of a campaign you’re already running, or just hopping in to see what you can create.

And if you want to discover everything you can do with our customer engagement platform, sign up for a 14-day free trial.