Jennifer Maggio
Create Flow.jpg

Appcues Flow Creation

 

 

 

 

 

Building better Flows, faster

How can we enable users to quickly create beautiful and meaningful product experiences?

 

overview

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.

 

MY ROLE

Senior Product Designer | Appcues

Research, concepting, testing, visual and interaction design

Feb 2019 - present

Appcues.png
 
 
 
Some terminology

Some terminology

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

Comparing the old and new workflows, from hitting “Create Flow” in the dashboard through the first step in that flow being built.  Documented in   Whimsical

Comparing the old and new workflows, from hitting “Create Flow” in the dashboard through the first step in that flow being built.
Documented in Whimsical

 

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.

Pattern Path

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.

 

Our findings

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

 
Multiple layouts were always available to users whenever they created a new step of any pattern type.

Multiple layouts were always available to users whenever they created a new step of any pattern type.

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.

Old modals had [Insert Text] everywhere, rather than real content that looked great, ready for publishing

Old modals had [Insert Text] everywhere, rather than real content that looked great, ready for publishing

 
Simply Text,   Image Centric  and  Iconic  were new templates we added for modals and tooltips

Simply Text, Image Centric and Iconic were new templates we added for modals and tooltips

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

 

—— results

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!

 
- Lily Rosenbloom, a Customer Success Manager, on how customers who previously had ugly content were now publishing “good lookin flows”

- Lily Rosenbloom, a Customer Success Manager, on how customers who previously had ugly content were now publishing “good lookin flows”

 
- Okello Carter, a Customer Success Manager, on a new user able to build his first flow more quickly!

- Okello Carter, a Customer Success Manager, on a new user able to build his first flow more quickly!

 

—— just one more update!

We consolidated the two create flow dialogs into one and made it a brand moment

Create Flow Modal.jpg

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.

A new “Get Inspired” section now appeared in users’ dashboard. Four pre-built flows, catered to different use cases like promoting a webinar or releasing a new feature, were offered, each intended for different end-users.

A new “Get Inspired” section now appeared in users’ dashboard. Four pre-built flows, catered to different use cases like promoting a webinar or releasing a new feature, were offered, each intended for different end-users.

 

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