Topics and Components: Design Complex Conversations With Better Organization

Conversation design isn’t just about getting users from point A to point B; it’s about designing for natural, human interactions – not just decision trees.

Designing truly conversational experiences hinges on a growing number of dependencies, scopes, and response content that can be hard to organize on a graphic user interface (GUI). Conversation Designers need the right toolset to design and navigate their complex conversations, especially as the complexity of a Bot expands throughout a design journey.

Introducing Topics and Components, a brand new way to organize, repurpose, and connect elements within your canvas.

Breaking Down Topics And Components

What Are Topics?

Topics can be used to define your project’s different subjects, domains, or topics.

Conversations will not always follow the happy path, rather, your users could ask questions out of context and your conversational experience needs to be able to account for those out-of-turn questions.

Think of topics as sub-folders in your conversation designs, where you can better organize the design experience by isolating different parts of your design and placing them into separate sections - or topics.

The topics list and the associated intents beneath allows designers and teams to see the “topics” that are covered within the project and dive directly into their isolated experiences.

There are a few ways to add topics within your project:

1. Pressing plus from within your topics & components panel
2. Dragging the topics step onto the canvas
3. Converting a component to a topic

For a more in depth view on how to create a topic, check out this clip in our tutorial video here.

Topics give you the flexibility to break down what might be thousands of elements in your project into multiple canvases. It also makes navigating to different parts of your project a breeze, by scrolling through your topic list and the associated intents found within each.

Note: In order to create a topic, it needs to have an intent due to the way you navigate between topics - by trigger the intent listed on the topic.

What Are Components?

Components are a collection of reusable strings of steps or turns that help designers design faster, and standardize their experiences. Similar to symbols in tools like Figma or Sketch, components allow designers the flexibility to create reusable steps that can applied across their project. This helps to standardize their experiences and cut down on repeatable flows for their overall organization.

Say goodbye to copy and pasting sets of steps across projects, with components we make it easy to organize, and reuse collection of steps in a single click.

Pro-Tip: Components can be used both for functional conversational streams and back-end operations, i.e. API protocols, data pulls, or a collection of reusable prompts & entities.

You can create reusable components for API calls to your internal databases or to standardize language used when a customer asks about a certain product, service, or promotion you offer.

Creating your first component is as easy as selecting your desired steps and clicking on the components icon on your canvas.  You will be able to name your component and it will show in the Components section of your Layers sidebar.

For a more in depth view of how to create a component, check out this clip in the topics and components tutorial.

What Does This Mean For The Design Process?

The design process differs across every project. People expect complex conversational interfaces that are alive, connected, and always improving.

At Voiceflow, we recognize that great conversations come with a balance of innovation and quality assurance. To design at scale, organizations need to create standards within their designs and leave more room for creativity and complexity. With topics & components, we’re making strides toward promoting this behaviour – allowing teams to create a standard for their internal designs while freeing more time for teams to focus on engagement, customization and the designs themselves. Designing systematically shouldn’t slow down you or your team - it should allow you to design with complexity, faster.

When thinking about what makes an excellent conversation, topics and components fit into a design system that acts as the single source of truth for each engagement a user has with your company Bots.

Organize Complex Designs

Linking intents and designing bots that mimics a conversational journey natural to humans used to require extreme organization on the Voiceflow canvas.

With Topics, you can create a navigation structure throughout your conversation designs that make it easier to understand the different paths users can go down in your assistants, as well as understanding which intents are being used for different parts of your conversations.

Speed Up The Design Process

Reusable components reduce the amount of manual work conversation design teams need to do to have complex, contextual, and consistent conversations across different contexts your visitors could take when interacting with your assistants.

They can also help your conversation design team scale and train new members of your team to understand your company’s positioning, brand voice, and internal logic.

Get some ideas on how to best use Topics and Components here! 

What’s Changed?

When you open a new Voiceflow project, you’ll notice that the sidebar has two tabs that have your Layers and your Steps. You’ll no longer have “Flows” in your sidebar, instead you’ll see a space for your Topics and Components.

Projects created before this change that have ‘Flows’ can be converted to include topics and components by duplicating your projects from the main dashboard. The duplicated project will be automatically converted to the new project structure. Once converted, you’ll see your Home flow under the Topics menu. All other flows will be converted as Components.

You can then convert a Component into a Topic by right-clicking on the Component and select the ‘Convert to Topic’ option in the menu.

You can apply a component to your design by:

1. Dragging in an existing Component from the Layers menu onto the canvas
2. Dragging in a Component step from the Steps menu

💡 Read more about using topics here, and using components here. For a more interactive guide, check out our Topics and Components tutorial here!

‍