Appcues Flow Builder

Appcues Flow Builder

Appcues Flow Builder

Appcues
Flow Builder

The core of Appcues' product, the Flow Builder—where users build and style content to insert into their web apps—was restrictive, slow, confusing, lackluster, and designed into a corner. It needed to be fundamentally rethought to enable users to build beautiful content, faster.

The core of Appcues' product, the Flow Builder—where users build and style content to insert into their web apps—was restrictive, slow, confusing, lackluster, and designed into a corner. It needed to be fundamentally rethought to enable users to build beautiful content, faster.

The core of Appcues' product, the Flow Builder—where users build and style content to insert into their web apps—was restrictive, slow, confusing, lackluster, and designed into a corner. It needed to be fundamentally rethought to enable users to build beautiful content, faster.

The core of Appcues' product, the Flow Builder—where users build and style content to insert into their web apps—was restrictive, slow, confusing, lackluster, and designed into a corner. It needed to be fundamentally rethought to enable users to build beautiful content, faster.

The core of Appcues' product, the Flow Builder—where users build and style content to insert into their web apps—was restrictive, slow, confusing, lackluster, and designed into a corner. It needed to be fundamentally rethought to enable users to build beautiful content, faster.

My goal was to redesign the Flow Builder. Collecting and synthesizing both macro and micro user issues, I assembled a new vision for the product.

February 2019 - present

My goal was to redesign the Flow Builder. Collecting and synthesizing both macro and micro user issues, I assembled a new vision for the product.

February 2019 - present
My goal was to redesign the Flow Builder. Collecting and synthesizing both macro and micro user issues, I assembled a new vision for the product.
February 2019 - present
My goal was to redesign the Flow Builder. Collecting and synthesizing both macro and micro user issues, I assembled a new vision for the product.
February 2019 - present

ABOUT THE ORG

Appcues is an experience layer within your product that enables you to build customizable, targeted, and measurable onboarding, feature adoption, and surveying experiences in order to better engage your users and grow your business. In more concrete terms, it means you can insert modals, tooltips, checklists and Net Promoter Surveys (NPS) into your app, code-free.

Problem

Problem

Problem

Non-technical users come to our product to build and release targeted content to users in their web apps, but the tool we provided to do that, the Flow Builder, besides being slow and buggy, did not provide the tools necessary to make great experiences. Imagine you're trying to build the perfect presentation slide, but the tool is so confusing and limited in what it can do that you end up just filling in a boring template the software comes with and creating a presentation that lacks polish. That's how building in our tool felt—users couldn't create beautiful and truly native-looking content, and given that we won deals because of our customizability and ease of building, we knew we couldn't keep letting those principles slide.

GOAL

Redesign the Builder to enable users to build beautiful content, faster.

Provide a focus and solid design foundation for the mobile team's MVP.

Solution

Solution

Research
Firsthand observations of users' frustration in the Builder and a steady influx of feedback through sales and support channels gave me a solid foundation of research to support a sweeping redesign. Working with product management, I identified core problems in workflows and UI to be solved, pulling in competitive/comparative design inspiration wherever relevant.

Redesign
With so many small issues peppered throughout the UI, combined with larger workflow ones, we ultimately would end up redesigning every aspect of the Builder.

Challenges

Challenges

Shifting priorities
Start-ups always come with the risk of shifting priorities and loss of resources. Our team needed to turn their time away from our core mission of improving the Builder, and instead to other cross-team initiatives, including a massive back-end Firebase migration. All in all, this meant that we shipped only a small fraction of what we had planned over the better part of an entire year. Additionally, I had to straddle two other main projects after losing fellow designers.

Confusing codebase
As our dev team worked on the migration and looked under the Builder hood, they saw how confusing the codebase had been written. Proposed updates to one part of the product might have unwanted consequences in another, and even the smallest of proposed changes required extra investigation on the part of our dev team, with extra testing before being shipped.

The pain of building—
death by a thousand cuts

The pain of building—
death by a thousand cuts

The pain of building—
death by a thousand cuts

To get at the heart of why building content was so frustrating and the output lackluster, we talked to users and combed through feedback. For many, it was the sum of parts that was frustrating—building took too long and content could not truly be customized to suit users' design standards and brands.

To get at the heart of why building content was so frustrating and the output lackluster, we talked to users and combed through feedback. For many, it was the sum of parts that was frustrating—building took too long and content could not truly be customized to suit users' design standards and brands.

To get at the heart of why building content was so frustrating and the output lackluster, we talked to users and combed through feedback. For many, it was the sum of parts that was frustrating—building took too long and content could not truly be customized to suit users' design standards and brands.

To get at the heart of why building content was so frustrating and the output lackluster, we talked to users and combed through feedback. For many, it was the sum of parts that was frustrating—building took too long and content could not truly be customized to suit users' design standards and brands.

PROBLEM

PROBLEM

Limited styling

Limited styling

Limited styling

Limited styling

Content blocks—text, images, buttons, videos, etc.—were styled in the Builder via a WYSIWYG ("what you see is what you get") editor, but styling was pretty limited. Even text underlining was impossible. For hero images, text could be overlaid, but without being able to set a layer of color between text and image, it was unlikely to be readable. Buttons could not easily be swapped between primary / secondary / tertiary styles, so a hierarchy of actions in content could not be specified. We provided the barest of styling basics, and it showed. Additionally, certain options we did provide, like bolding and italicizing, just didn't work in the way expected.

Content blocks—text, images, buttons, videos, etc.—were styled in the Builder via a WYSIWYG ("what you see is what you get") editor, but styling was pretty limited. Even text underlining was impossible. For hero images, text could be overlaid, but without being able to set a layer of color between text and image, it was unlikely to be readable. Buttons could not easily be swapped between primary / secondary / tertiary styles, so a hierarchy of actions in content could not be specified. We provided the barest of styling basics, and it showed. Additionally, certain options we did provide, like bolding and italicizing, just didn't work in the way expected.

Content blocks—text, images, buttons, videos, etc.—were styled in the Builder via a WYSIWYG ("what you see is what you get") editor, but styling was pretty limited. Even text underlining was impossible. For hero images, text could be overlaid, but without being able to set a layer of color between text and image, it was unlikely to be readable. Buttons could not easily be swapped between primary / secondary / tertiary styles, so a hierarchy of actions in content could not be specified. We provided the barest of styling basics, and it showed. Additionally, certain options we did provide, like bolding and italicizing, just didn't work in the way expected.

Content blocks—text, images, buttons, videos, etc.—were styled in the Builder via a WYSIWYG ("what you see is what you get") editor, but styling was pretty limited. Even text underlining was impossible. For hero images, text could be overlaid, but without being able to set a layer of color between text and image, it was unlikely to be readable. Buttons could not easily be swapped between primary / secondary / tertiary styles, so a hierarchy of actions in content could not be specified. We provided the barest of styling basics, and it showed. Additionally, certain options we did provide, like bolding and italicizing, just didn't work in the way expected.

text editor
themes

PROBLEM

PROBLEM

A poor workflow for theming

A poor workflow for theming

A poor workflow for theming

To save time and ensure consistency within and between flows, users could save their style settings in Themes. But, the workflow between Themes, which existed in the Appcues' dashboard, and the Builder, where users built content, made for a slow process. Adjustments to Themes would be made in one tab, out of context of the content and the user's app, then saved, and in another, the Builder would need refreshing to see updates. Themes were great in theory, but frustrating to use in practice.

To save time and ensure consistency within and between flows, users could save their style settings in Themes. But, the workflow between Themes, which existed in the Appcues' dashboard, and the Builder, where users built content, made for a slow process. Adjustments to Themes would be made in one tab, out of context of the content and the user's app, then saved, and in another, the Builder would need refreshing to see updates. Themes were great in theory, but frustrating to use in practice.

To save time and ensure consistency within and between flows, users could save their style settings in Themes. But, the workflow between Themes, which existed in the Appcues' dashboard, and the Builder, where users built content, made for a slow process. Adjustments to Themes would be made in one tab, out of context of the content and the user's app, then saved, and in another, the Builder would need refreshing to see updates. Themes were great in theory, but frustrating to use in practice.

To save time and ensure consistency within and between flows, users could save their style settings in Themes. But, the workflow between Themes, which existed in the Appcues' dashboard, and the Builder, where users built content, made for a slow process. Adjustments to Themes would be made in one tab, out of context of the content and the user's app, then saved, and in another, the Builder would need refreshing to see updates. Themes were great in theory, but frustrating to use in practice.

PROBLEM

PROBLEM

Unruly drag and drop, and no resizing

Unruly drag and drop, and no resizing

Unruly drag and drop, and no resizing

Moving content blocks around a step was a nightmare. Something as simple as dragging a block to the top-most row was tricky. Should a user want to reorder an entire row, they could grab a tab that appeared on the left and drag it to a new position, although this tab would sometimes just not appear. And if, say, an image next to text needed to be sized down a bit, it could not easily be done.

Moving content blocks around a step was a nightmare. Something as simple as dragging a block to the top-most row was tricky. Should a user want to reorder an entire row, they could grab a tab that appeared on the left and drag it to a new position, although this tab would sometimes just not appear. And if, say, an image next to text needed to be sized down a bit, it could not easily be done.

Moving content blocks around a step was a nightmare. Something as simple as dragging a block to the top-most row was tricky. Should a user want to reorder an entire row, they could grab a tab that appeared on the left and drag it to a new position, although this tab would sometimes just not appear. And if, say, an image next to text needed to be sized down a bit, it could not easily be done.

Moving content blocks around a step was a nightmare. Something as simple as dragging a block to the top-most row was tricky. Should a user want to reorder an entire row, they could grab a tab that appeared on the left and drag it to a new position, although this tab would sometimes just not appear. And if, say, an image next to text needed to be sized down a bit, it could not easily be done.

Understand – dragging
Create flow

PROBLEM

PROBLEM

Lackluster templates

Lackluster templates

The templates we provided to help users, especially first-time users, get started with great defaults were poorly designed, and data showed that some were not being used at all. Besides refreshing the copy and visual design, we aimed to add more, inspiring users with more variety of use cases and layouts.

The templates we provided to help users, especially first-time users, get started with great defaults were poorly designed, and data showed that some were not being used at all. Besides refreshing the copy and visual design, we aimed to add more, inspiring users with more variety of use cases and layouts.

The templates we provided to help users, especially first-time users, get started with great defaults were poorly designed, and data showed that some were not being used at all. Besides refreshing the copy and visual design, we aimed to add more, inspiring users with more variety of use cases and layouts.

The templates we provided to help users, especially first-time users, get started with great defaults were poorly designed, and data showed that some were not being used at all. Besides refreshing the copy and visual design, we aimed to add more, inspiring users with more variety of use cases and layouts.

PROBLEM

PROBLEM

No visualization of the flow

No visualization of the flow

The Builder had a lot of unnecessary chrome, with redundant actions and menus, and remaining real estate had not been maximized for a key need—easily finding any given step in the flow for editing. Steps were displayed in the bottom bar as a row of icons by their type (modal, tooltip, slideout, hotspot). But this required users to remember what content was in each step, and was especially vexing when there were multiple steps of a single type in a row. In order to find the right step to edit, users had to click into, and load, each one. To use the presentation analogy once more, it was like having no visualization of all your slides, and being forced to click through each to find your place. Completely unnecessary friction that slowed building down.

The Builder had a lot of unnecessary chrome, with redundant actions and menus, and remaining real estate had not been maximized for a key need—easily finding any given step in the flow for editing. Steps were displayed in the bottom bar as a row of icons by their type (modal, tooltip, slideout, hotspot). But this required users to remember what content was in each step, and was especially vexing when there were multiple steps of a single type in a row. In order to find the right step to edit, users had to click into, and load, each one. To use the presentation analogy once more, it was like having no visualization of all your slides, and being forced to click through each to find your place. Completely unnecessary friction that slowed building down.

The Builder had a lot of unnecessary chrome, with redundant actions and menus, and remaining real estate had not been maximized for a key need—easily finding any given step in the flow for editing. Steps were displayed in the bottom bar as a row of icons by their type (modal, tooltip, slideout, hotspot). But this required users to remember what content was in each step, and was especially vexing when there were multiple steps of a single type in a row. In order to find the right step to edit, users had to click into, and load, each one. To use the presentation analogy once more, it was like having no visualization of all your slides, and being forced to click through each to find your place. Completely unnecessary friction that slowed building down.

The Builder had a lot of unnecessary chrome, with redundant actions and menus, and remaining real estate had not been maximized for a key need—easily finding any given step in the flow for editing. Steps were displayed in the bottom bar as a row of icons by their type (modal, tooltip, slideout, hotspot). But this required users to remember what content was in each step, and was especially vexing when there were multiple steps of a single type in a row. In order to find the right step to edit, users had to click into, and load, each one. To use the presentation analogy once more, it was like having no visualization of all your slides, and being forced to click through each to find your place. Completely unnecessary friction that slowed building down.

Understand – no thumbnail preview

Designing fresh

Designing fresh

Designing fresh

Designing fresh

We redesigned the Appcues Flow Builder to make everyone a power user. With a clean UI that got out of the user's way, new and beautiful out-of-the-box templates, and more and better styling powers right in the Builder, users can build beautiful content faster and more flexibly than ever.

We redesigned the Appcues Flow Builder to make everyone a power user. With a clean UI that got out of the user's way, new and beautiful out-of-the-box templates, and more and better styling powers right in the Builder, users can build beautiful content faster and more flexibly than ever.

We redesigned the Appcues Flow Builder to make everyone a power user. With a clean UI that got out of the user's way, new and beautiful out-of-the-box templates, and more and better styling powers right in the Builder, users can build beautiful content faster and more flexibly than ever.

We redesigned the Appcues Flow Builder to make everyone a power user. With a clean UI that got out of the user's way, new and beautiful out-of-the-box templates, and more and better styling powers right in the Builder, users can build beautiful content faster and more flexibly than ever.

SOLUTION

SOLUTION

A powerful inline editor

Powerful inline editor

We zeroed in on the "minibar", where settings are applied to content blocks, as being the critical piece to get right to create a flexible and fast designing experience. We added many more styling options to each content block. We wanted people to feel empowered to be creative, but we also not overwhelmed by choice—as such, we leveraged toggles wherever possible, and submenus for everything else. Overall, our aim was to keep the minibar compact and the options clear and flexible.

We zeroed in on the "minibar", where settings are applied to content blocks, as being the critical piece to get right to create a flexible and fast designing experience. We added many more styling options to each content block. We wanted people to feel empowered to be creative, but we also not overwhelmed by choice—as such, we leveraged toggles wherever possible, and submenus for everything else. Overall, our aim was to keep the minibar compact and the options clear and flexible.

We zeroed in on the "minibar", where settings are applied to content blocks, as being the critical piece to get right to create a flexible and fast designing experience. We added many more styling options to each content block. We wanted people to feel empowered to be creative, but we also not overwhelmed by choice—as such, we leveraged toggles wherever possible, and submenus for everything else. Overall, our aim was to keep the minibar compact and the options clear and flexible.

We zeroed in on the "minibar", where settings are applied to content blocks, as being the critical piece to get right to create a flexible and fast designing experience. We added many more styling options to each content block. We wanted people to feel empowered to be creative, but we also not overwhelmed by choice—as such, we leveraged toggles wherever possible, and submenus for everything else. Overall, our aim was to keep the minibar compact and the options clear and flexible.

minibar
updating theme, button

SOLUTION

SOLUTION

Easy theming

Easy theming

Before, setting and saving styles for reuse could only occur in a separate part of the app, away from building. Now, users can adjust type, a border radius, or shadow right from the Builder, see it true to form with their content, and with the click of a button, save it to a Theme.

This streamlined workflow not only benefits seasoned builders, but first-time users, who often jump straight into the Builder and assess Appcues' value from it. Whereas before, their enthusiasm deflated once they realized they needed to create this thing called a Theme and do that elsewhere, they can now experiment all they want in their first Builder session, come away with on-brand content and a positive first impression, all the while iteratively building their very first Theme with ease.

Before, setting and saving styles for reuse could only occur in a separate part of the app, away from building. Now, users can adjust type, a border radius, or shadow right from the Builder, see it true to form with their content, and with the click of a button, save it to a Theme.

This streamlined workflow not only benefits seasoned builders, but first-time users, who often jump straight into the Builder and assess Appcues' value from it. Whereas before, their enthusiasm deflated once they realized they needed to create this thing called a Theme and do that elsewhere, they can now experiment all they want in their first Builder session, come away with on-brand content and a positive first impression, all the while iteratively building their very first Theme with ease.

Before, setting and saving styles for reuse could only occur in a separate part of the app, away from building. Now, users can adjust type, a border radius, or shadow right from the Builder, see it true to form with their content, and with the click of a button, save it to a Theme.

This streamlined workflow not only benefits seasoned builders, but first-time users, who often jump straight into the Builder and assess Appcues' value from it. Whereas before, their enthusiasm deflated once they realized they needed to create this thing called a Theme and do that elsewhere, they can now experiment all they want in their first Builder session, come away with on-brand content and a positive first impression, all the while iteratively building their very first Theme with ease.

Before, setting and saving styles for reuse could only occur in a separate part of the app, away from building. Now, users can adjust type, a border radius, or shadow right from the Builder, see it true to form with their content, and with the click of a button, save it to a Theme.

This streamlined workflow not only benefits seasoned builders, but first-time users, who often jump straight into the Builder and assess Appcues' value from it. Whereas before, their enthusiasm deflated once they realized they needed to create this thing called a Theme and do that elsewhere, they can now experiment all they want in their first Builder session, come away with on-brand content and a positive first impression, all the while iteratively building their very first Theme with ease.

SOLUTION

SOLUTION

Gorgeous templates

Gorgeous templates

If users don't have their own designs planned out, they can instead start with one of ours! With strong designs that support common use cases, like a first welcome to the app or a feature tour, a beautiful experience is quickly within reach. We freshened up the starter imagery, copy, layouts, and overall design of the templates we already offered, while adding a few more into the suite.

If users don't have their own designs planned out, they can instead start with one of ours! With strong designs that support common use cases, like a first welcome to the app or a feature tour, a beautiful experience is quickly within reach. We freshened up the starter imagery, copy, layouts, and overall design of the templates we already offered, while adding a few more into the suite.

If users don't have their own designs planned out, they can instead start with one of ours! With strong designs that support common use cases, like a first welcome to the app or a feature tour, a beautiful experience is quickly within reach. We freshened up the starter imagery, copy, layouts, and overall design of the templates we already offered, while adding a few more into the suite.

If users don't have their own designs planned out, they can instead start with one of ours! With strong designs that support common use cases, like a first welcome to the app or a feature tour, a beautiful experience is quickly within reach. We freshened up the starter imagery, copy, layouts, and overall design of the templates we already offered, while adding a few more into the suite.

Gorgeous templates
keyboard shortcuts

SOLUTION

SOLUTION

Shortcuts for the win!

Shortcuts for the win!

For those of us who love the extra time savings and ease of use that keyboard shortcuts provide, we created a set of commands. Beyond the standard Esc to cancel and ⌘Z to undo, we added commands for actions specific to the Builder, like ⌘⇧P for Preview.

People can use these commands to swiftly navigate and craft their flows, all without lifting their fingers from the keyboard. The time between thinking and doing becomes even shorter.

For those of us who love the extra time savings and ease of use that keyboard shortcuts provide, we created a set of commands. Beyond the standard Esc to cancel and ⌘Z to undo, we added commands for actions specific to the Builder, like ⌘⇧P for Preview.

People can use these commands to swiftly navigate and craft their flows, all without lifting their fingers from the keyboard. The time between thinking and doing becomes even shorter.

For those of us who love the extra time savings and ease of use that keyboard shortcuts provide, we created a set of commands. Beyond the standard Esc to cancel and ⌘Z to undo, we added commands for actions specific to the Builder, like ⌘⇧P for Preview.

People can use these commands to swiftly navigate and craft their flows, all without lifting their fingers from the keyboard. The time between thinking and doing becomes even shorter.

For those of us who love the extra time savings and ease of use that keyboard shortcuts provide, we created a set of commands. Beyond the standard Esc to cancel and ⌘Z to undo, we added commands for actions specific to the Builder, like ⌘⇧P for Preview.

People can use these commands to swiftly navigate and craft their flows, all without lifting their fingers from the keyboard. The time between thinking and doing becomes even shorter.

SOLUTION

SOLUTION

Flexible resizing

Flexible resizing

So much of good design comes down to spacing.

Simply being able to resize blocks to be shorter or taller, narrower, or wider, within the canvas of a step unlocked fresh design potential, all in an intuitive way.

So much of good design comes down to spacing.

Simply being able to resize blocks to be shorter or taller, narrower, or wider, within the canvas of a step unlocked fresh design potential, all in an intuitive way.

So much of good design comes down to spacing.

Simply being able to resize blocks to be shorter or taller, narrower, or wider, within the canvas of a step unlocked fresh design potential, all in an intuitive way.

So much of good design comes down to spacing.

Simply being able to resize blocks to be shorter or taller, narrower, or wider, within the canvas of a step unlocked fresh design potential, all in an intuitive way.

resizing, buttons
Builder, flow panel

SOLUTION

SOLUTION

Your flow, visualized

Your flow, visualized

Have a flow with many steps? Not to worry. A panel from the bottom displays the entire flow as thumbnails, so you can find your place and click into whichever step needs editing.

Have a flow with many steps? Not to worry. A panel from the bottom displays the entire flow as thumbnails, so you can find your place and click into whichever step needs editing.

Have a flow with many steps? Not to worry. A panel from the bottom displays the entire flow as thumbnails, so you can find your place and click into whichever step needs editing.

Have a flow with many steps? Not to worry. A panel from the bottom displays the entire flow as thumbnails, so you can find your place and click into whichever step needs editing.

SOLUTION

SOLUTION

Clean, stateful UI

Clean, stateful UI

Eliminating redundant buttons and consolidating menus amounted to drastically reducing the Builder's chrome. Instead of cluttering the interface and drawing attention away from the user's content and underlying app, the new Builder shows only what is needed, and only when it is needed.

When editing a step, the UI switches from displaying the entire flow to displaying content blocks available to add. When creating a page change, only the central question of where and how that change should happen is front and center. The UI moves with the user, focusing them only on what matters most in that moment.

Eliminating redundant buttons and consolidating menus amounted to drastically reducing the Builder's chrome. Instead of cluttering the interface and drawing attention away from the user's content and underlying app, the new Builder shows only what is needed, and only when it is needed.

When editing a step, the UI switches from displaying the entire flow to displaying content blocks available to add. When creating a page change, only the central question of where and how that change should happen is front and center. The UI moves with the user, focusing them only on what matters most in that moment.

Eliminating redundant buttons and consolidating menus amounted to drastically reducing the Builder's chrome. Instead of cluttering the interface and drawing attention away from the user's content and underlying app, the new Builder shows only what is needed, and only when it is needed.

When editing a step, the UI switches from displaying the entire flow to displaying content blocks available to add. When creating a page change, only the central question of where and how that change should happen is front and center. The UI moves with the user, focusing them only on what matters most in that moment.

Eliminating redundant buttons and consolidating menus amounted to drastically reducing the Builder's chrome. Instead of cluttering the interface and drawing attention away from the user's content and underlying app, the new Builder shows only what is needed, and only when it is needed.

When editing a step, the UI switches from displaying the entire flow to displaying content blocks available to add. When creating a page change, only the central question of where and how that change should happen is front and center. The UI moves with the user, focusing them only on what matters most in that moment.

builder states

ADDED BONUS

ADDED BONUS

Evolving the Builder's look and feel

Evolving the Builder's
look and feel

Since we were already hard at work transforming the Builder's functionality, workflow, and layout, we thought, why not freshen up the look and feel too? Long after Appcues rebranded in 2018, the Builder still retained all the old styling. In the refresh, we wanted to strike a healthy balance of the tool's practicality with an energetic vibe that mimicked the playfulness we hoped to inspire. Ultimately, we would add just a touch of flair with some gradients and custom iconography, while still keeping the Builder clean and unassuming overall.

Since we were already hard at work transforming the Builder's functionality, workflow, and layout, we thought, why not freshen up the look and feel too? Long after Appcues rebranded in 2018, the Builder still retained all the old styling. In the refresh, we wanted to strike a healthy balance of the tool's practicality with an energetic vibe that mimicked the playfulness we hoped to inspire. Ultimately, we would add just a touch of flair with some gradients and custom iconography, while still keeping the Builder clean and unassuming overall.

Since we were already hard at work transforming the Builder's functionality, workflow, and layout, we thought, why not freshen up the look and feel too? Long after Appcues rebranded in 2018, the Builder still retained all the old styling. In the refresh, we wanted to strike a healthy balance of the tool's practicality with an energetic vibe that mimicked the playfulness we hoped to inspire. Ultimately, we would add just a touch of flair with some gradients and custom iconography, while still keeping the Builder clean and unassuming overall.

Since we were already hard at work transforming the Builder's functionality, workflow, and layout, we thought, why not freshen up the look and feel too? Long after Appcues rebranded in 2018, the Builder still retained all the old styling. In the refresh, we wanted to strike a healthy balance of the tool's practicality with an energetic vibe that mimicked the playfulness we hoped to inspire. Ultimately, we would add just a touch of flair with some gradients and custom iconography, while still keeping the Builder clean and unassuming overall.

Builder
builder, validation

"Please build this!"

- everyone who saw designs

"Please build this!"

- everyone who saw designs

"Please build this!"

- everyone who saw designs

"Please build this!"

- everyone who saw designs

🤓

Final thoughts

🤓

Final thoughts

🤓

Final thoughts

🤓

Final thoughts

The Appcues Flow Builder is designed to turn anyone into an experience designer. While our aim is to help people make something their users love, it's also to have them love the process.

Evolving the Appcues Flow Builder was a very fun project. It's cool and "meta" to design a user experience tool, and as a designer, I felt like I could easily just ask myself what I would need in order to make my best work. There was and still is a lot that can be added and finessed, since products and how we engage users in them, never stops changing. Planning features and fussing over the details is what I love to do, and there were plenty of details over which to fuss.

With that said, unfortunately, much of this work is still not built but planned, as engineers were pulled onto backend work for the majority of 2019. Additionally, in March 2020, the Covid-19 crisis disrupted our company, leading to layoffs and the loss of more velocity.  I continue to dream up more improvements though and look forward to when many of these new features ship! 

The Appcues Flow Builder is designed to turn anyone into an experience designer. While our aim is to help people make something their users love, it's also to have them love the process.

Evolving the Appcues Flow Builder was a very fun project. It's cool and "meta" to design a user experience tool, and as a designer, I felt like I could easily just ask myself what I would need in order to make my best work. There was and still is a lot that can be added and finessed, since products and how we engage users in them, never stops changing. Planning features and fussing over the details is what I love to do, and there were plenty of details over which to fuss.

With that said, unfortunately, much of this work is still not built but planned, as engineers were pulled onto backend work for the majority of 2019. Additionally, in March 2020, the Covid-19 crisis disrupted our company, leading to layoffs and the loss of more velocity.  I continue to dream up more improvements though and look forward to when many of these new features ship! 


We can now proudly look forward, though, to releasing Appcues for mobile in early 2020!

The Appcues Flow Builder is designed to turn anyone into an experience designer. While our aim is to help people make something their users love, it's also to have them love the process.

Evolving the Appcues Flow Builder was a very fun project. It's cool and "meta" to design a user experience tool, and as a designer, I felt like I could easily just ask myself what I would need in order to make my best work. There was and still is a lot that can be added and finessed, since products and how we engage users in them, never stops changing. Planning features and fussing over the details is what I love to do, and there were plenty of details over which to fuss.

With that said, unfortunately, much of this work is still not built but planned, as engineers were pulled onto backend work for the majority of 2019. Additionally, in March 2020, the Covid-19 crisis disrupted our company, leading to layoffs and the loss of more velocity.  I continue to dream up more improvements though and look forward to when many of these new features ship! 

The Appcues Flow Builder is designed to turn anyone into an experience designer. While our aim is to help people make something their users love, it's also to have them love the process.

Evolving the Appcues Flow Builder was a very fun project. It's cool and "meta" to design a user experience tool, and as a designer, I felt like I could easily just ask myself what I would need in order to make my best work. There was and still is a lot that can be added and finessed, since products and how we engage users in them, never stops changing. Planning features and fussing over the details is what I love to do, and there were plenty of details over which to fuss.

With that said, unfortunately, much of this work is still not built but planned, as engineers were pulled onto backend work for the majority of 2019. Additionally, in March 2020, the Covid-19 crisis disrupted our company, leading to layoffs and the loss of more velocity.  I continue to dream up more improvements though and look forward to when many of these new features ship! 

The Appcues Flow Builder is designed to turn anyone into an experience designer. While our aim is to help people make something their users love, it's also to have them love the process.

Evolving the Appcues Flow Builder was a very fun project. It's cool and "meta" to design a user experience tool, and as a designer, I felt like I could easily just ask myself what I would need in order to make my best work. There was and still is a lot that can be added and finessed, since products and how we engage users in them, never stops changing. Planning features and fussing over the details is what I love to do, and there were plenty of details over which to fuss.

With that said, unfortunately, much of this work is still not built but planned, as engineers were pulled onto backend work for the majority of 2019. Additionally, in March 2020, the Covid-19 crisis disrupted our company, leading to layoffs and the loss of more velocity.  I continue to dream up more improvements though and look forward to when many of these new features ship!