Building better Flows, faster
How can we enable users to quickly create beautiful and meaningful product experiences?
Appcues is a user experience platform that enables users to quickly create onboarding, announcement and survey experiences in their products, code-free, and target those experiences to the right end-users. The Builder is where users insert and customize Flows—a series of modals, tooltips, hotspots, and slideouts— throughout their app.
Besides performance issues, it was too difficult and time consuming to actually get to building in the Builder. When users were creating a new flow, there was too much reading, too many decision points and clicks, and the choices felt non-reversible.
My goal was to help users build better flows faster by simplifying decisions and providing better default content.
Senior Product Designer | Appcues
Research, concepting, testing, visual and interaction design
Feb 2019 - present
—— some helpful terms ——
First, what’s a Flow?
A Flow is the experience users make for their end-users, comprised of one or more steps, which can be in different patterns: modals, tooltips, hotspots or slideouts.
—— mapping the creation process
When making a new Flow, 70% of users were following a path that led to them starting with blank content.
We mapped the creation workflow and checked Amplitude. Besides redundant “Create” clicks, which complicated the process unnecessarily (we’ll get to that later), the workflow had a split where users would choose to start building a new flow with a Use Case or with a Pattern.
Use Case Path
This presented a menu of pre-designed single- or multi-step flow templates, in two categories: Onboarding New Users or Announce a New Feature.
This built out a single, blank, modal / slideout / tooltip / hotspot.
—— the question
With pre-designed content at their fingertips, why would 70% of users choose to start blank?
The use case templates were intended to guide users on what to build and why, and make the process easier with pre-designed content. So we wondered why most users were instead choosing to create blank steps.
—— too many clicks
Once users were regulars in the product, they didn’t need the extra guidance, and wouldn’t stomach more clicks to get to templates, even if it meant better content.
Talking to users, we found that use case templates were really only helpful in the beginning of their Appcues journey, when they were first learning the ropes of the tool. After creating a few Flows, they would know what could be done and how—at that point they would think, “I just want a tooltip” and get to building quickly.
Clicking through the extra series of sidebars and buttons to select a template was too much work for most users.
—— what could we save from templates?
When users did use templates, what was the appeal?
We didn’t want to just get rid of templates entirely—after all, we wanted to provide great defaults and guidance for users on what to create—so we wanted to better understand why users used the templates they did (when they did). If we understood the appeal, perhaps we could re-purpose them.
So we looked at all the templates, looking for common patterns and dug a little deeper into the data from Amplitude.
Most templates were 1 step
6 out of the 9 we offered
Most templates were 1 pattern
Only 1 mixed pattern type (a slideout and three tooltips) and it was hardly used
Dynamically-generated content was eye-catching and unique
Our most popular template, “Welcome Message”, was unique—it had dynamically generated content, pulling the app’s logo and SEO description upon creation. It looked great and native by default
Templates reused steps between them
The differences between templates weren’t very meaningful—often it was the same slideout or tooltip that was reused in multiple templates, and so choosing one versus the other didn’t mean much when building.
—— simplifying flow creation
We created a single, pattern-based path for creating flows, and provided multiple templates for each pattern.
Taking together the usage data, workflow mapping and feedback we heard, we revised the workflow to be a single, pattern-based one. But the content of the templates weren’t lost completely—users could select from multiple templates for each pattern type.
The templates that were most popular had been single step and single pattern anyway, and so would fit nicely into this new schema.
A note—we made sure to bring in the Welcome Message that everyone loved and place it as one of the first options in the modal menu.
—— publish-ready content, always
Any new step added would now offer the same menu of templates, with publish-ready copy and design.
In the prior version of the Builder, the first set of steps added with the use case templates had realistic sounding copy, like “Welcome to our App”. But any steps added thereafter would come with a bunch of [Insert Text] placeholders.
Not every product manager is a great visual designer, and not every product designer a wordsmith. When it comes to them having to craft the right modal for their users, it’s easier to edit great content than it is to generate it.
So with that said, we made it a rule that each placeholder would have real sounding copy and design.
—— more templates!
We also added some new templates!
While we were at it, we added some new templates. We scoured through our #customer-content Slack channel— dedicated to top, internally-rated published customer content—for inspiration of what could be made into templates next.
Previously hapless customers were now publishing “good lookin flows” with ease
Users were publishing our defaults, oftentimes word-for-word and with images unchanged. Additionally, we saw a dramatic decline in the creation of blank steps across the board after our updates—all in all, this meant an easier and faster time building for our users and better content for their end-users!
—— just one more update!
We consolidated the two create flow dialogs into one and made it a brand moment
Remember in the workflow diagram earlier how there were extra clicks and two dialogs asking for info? We consolidated those into one. Now users wouldn’t be interrupted while they were building for the info they should have been able to just put in earlier. Some things just make sense like that and are quick to do.
Also, we used this as an opportunity to inject some brand personality with an illustration. Now, creating a flow feels like a more impactful moment.
—— remembering first time users
Guiding first time users on what to make was still important—did we lose that completely?
Our new flow creation required users to think in terms of patterns while building—”do I want to make a modal, tooltip, hotspot or slideout?”. But we didn’t want to forget that some first time users may not even know what those patterns were in order to effectively choose. Granted, the design did make it easy to explore one pattern and its templates vs another, but it still framed the users’ thinking in terms of those patterns.
We kept this in the back of our minds. A couple of months later, when a separate cross-team initiative to reframe Appcues as a product-led growth platform was kicked off, we found an opportunity to better serve these first time users who wanted more assistance.
Enter the “Get Inspired” section on the dashboard, with pre-built flows.
—— expanding the solution
A handful of helpful example flows for our first time users were reinstated on the dashboard.
Most first time users start in the dashboard since the Builder is accessed further down the workflow (and also requires the installation of a Chrome extension). Placing example flows in the dashboard was a nice way to show off the capabilities of our product to our own Evaluators, users who weren’t yet sure of the value we provided and who wanted more information before deciding to move forward.
These example flows helped our users think of their end-users in terms of where they are in a customer lifecycle—Evaluators of the product, Beginners, Regulars or Champions—and therefore what goals and use cases their content could help serve.
So, the use case templates were back, only this time located in a different place in our app, and with a more clearly defined intention. If users started with any one of these, they were brought into the Builder, with the flow already created, tagged and named. And at any time, users could decide to add more steps to their flow, with our revised pattern-based creation process, and select from any of our step templates.
Overall, we had streamlined the workflow for both first timers and regulars of the product, making building better flows faster, all around.