How to migrate any conversation design project into Voiceflow

Convert Your Existing Designs Into Voiceflow Projects

Converting your designs into Voiceflow projects can be done in a few different ways. Because the conversation design landscape is relatively new and simultaneously outdated, standardizing your projects can help the import process move as smoothly as possible.

Bulk Import of Utterances

If you’re using spreadsheets, flowcharts or multiple conversation design tools, chances are you have your NLU model saved somewhere. Your NLU model will include utterances, intents, and entities that you want your conversational assistant to be able to recognize.

You can re-build your NLU model in Voiceflow, quite fast, by bulk importing your interaction model.

Learn more about how to bulk import utterances here.

Navigating The Voiceflow Canvas

Once you’ve imported your project into Voiceflow, you’ll be able to access the Voiceflow canvas. If you’ve been designing in spreadsheets or flowchart tools, the canvas will be a bit of a change. Understanding how to navigate, build, and iterate on the Voiceflow canvas will help you get up to speed faster.

Move Type

Each tool has a way of navigating the canvas. In Voiceflow, choosing your Move Type can be done when you open your project. Easily move around the canvas based on whatever move type makes you the most comfortable.

💡 If you ever get lost on the canvas, you can go right back to the Start block by hitting the “S” key on your keyboard.

Colour Coding In Voiceflow

On traditional designs like flowcharts, you need colour coding or design keys to be able to differentiate the types of conversation used within a flow. On Voiceflow, this has been simplified as each step/block has a specific icon on them that makes it very easy for user to identify the conversation type by the first look.

Learn more about steps and where to use them, here.

Building Flows In Voiceflow

Conversation Design teams are often building large and complex flows designed on one canvas conversation.

That can become messy to navigate, hard to follow, and easy to duplicate work.

Within Voiceflow, projects can be organized on the topic level and on a component level.

Split up your project into different views based on global intents with Topics, create reusable components for frequently used paths referenced across your project with, and reduce the overall noise on your canvas

Using Different Blocks

Different platforms will call inputs and outputs different terms - in Voiceflow, you create your designs by dragging blocks from the Steps menu on the left hand side of your Voiceflow canvas.

The blocks are organized by function - starting with all the possibilities of outputs your assistant could use from speak blocks to images. Moving into user inputs, these change depending on what kind of project you’re working on. Chat projects will have chat specific user inputs, as will voice projects. Get a full breakdown of all user inputs here.

But a conversation isn’t just user inputs and assistant outputs. That’s where the logic blocks come in. From setting variables to creating conditional experiences based on responses, logic blocks help you create a more tailored, personalized conversational experience. Get an overview of how to best use logic steps here.

Lastly, you’ll have your integration steps. If you are designing conversational experiences that can also perform actions, you can use your Voiceflow canvas to ensure that your conversation design is as high fidelity as possible with integration steps. These steps allow you to send and receive data from external sources and build in custom functionality into Voiceflow. Get an overview of integration steps here.

Voice To Chat Project Convertor

If you have a project that you want to live on different channels and don’t want to replicate the project inside of Voiceflow, not to worry! We have a project converting tool that your team can use to easily transform your Voice designs into Chat designs and vice versa.

💡 You can find the Voiceflow Converter Tool here!

How To Use The Voiceflow Converter Tool

Export your project file by hovering over to the Share button **on the top right corner of your canvas
Select Export As > Project Content > Project file(JSON)
Hit Export and download the project file

Select the dowloaded .vf file and upload to the convertor tool
Download the new file and import it to your workspace using the Import button on the top right corner

💡 Note: The new imported project will appear on the top of the Default list on your workspace.

Collaborate on the Canvas

Voiceflow is a collaborative conversation design tool designed to help teams create one source of truth to get conversational experiences from design, to prototype, to launch faster. We made it easy for users to communicate through the canvas itself, by offering Real time collaboration, canvas markup, and commenting features.

Real Time Collaboration

You know when you and your whole team are in a google doc together and you can see each other working in real time? That’s what you can do with Voiceflow. With real time collaboration, conversation designers can be working in one canvas together at one time.

Voiceflow not only allows for this collaboration, but also allows teams to see how the project has changed through versioning, previewing older versions of your project, and the ability to restore past versions as well.

Canvas Markup

Canvas markup gives conversation designers the power to contextualize their designs, decisions, and workflows by adding text to the canvas that explains parts of the design. For team members who aren’t as familiar with a conversational experience or are focused on a single part of your design, canvas markup adds clarity to the design process for any and all stakeholders.

Learn how to add markups, here.

Explore all templates to see examples of markups on the canvas, here.

Download the Sticker pack, here and use them to build more context into your project.

Commenting

You can use comments to collaborate on projects with workspace teammates. To post a comment, click the message icon on the project’s top menu.

Once you’ve entered commenting mode, you can click a spot on the canvas to leave your comment. You can affix a comment anywhere on the canvas, including blocks and steps.

Learn more about Commenting, here.

Share Your Project

Whether you are looking to facilitate User Testing through a project prototype, inviting collaborators with different permissions to the canvas, or exporting your project content to upload into a different system, this can all be accomplished through the Share menu on the top right corner of the canvas.

Facilitate User Testing Easily

Testing your chat or voice experience represents an essential step when designing conversations. You can evaluate your design from different angles, pinpoint flaws and inefficiencies, and determine whether it functions as intended. Whether you're running user testing with customers or reviews with stakeholders, frequent testing gives you a clearer sense of your design's direction and scalability and ensures the reliability of the application you are building.

Prototyping in Voiceflow allows you insight into how users will engage with your experience once it’s live.

Find more information on how to generate and share a prototype link, here.

Invite Collaborators

Conversation Design is a group sport. Add collaborators and viewers to your project, adjust user permissions, and collaborate together in one project file.

Find more information on how to invite collaborators and the difference between roles, here.

Content Exports

Although your Voiceflow canvas acts as the artifact for the production experience your team is building, the content of your design within Voiceflow can be exported to different channels. If you use a platform for your NLU management, you can export any updated NLU models you’ve built into Voiceflow to maintain consistency across all platforms.

You can also export your entire project in different formats:

Project file (.JSON) - all your project content in JSON

Dialogs (.CSV) - your project’s response content

PDF

PNG image

Find more information on available Exports, here.

Custom UI Prototypes

If you have a chat project and are looking to get a preview of your bot, and see what the experience would look like to your users, check out this simulator built by the Voiceflow team.

Here is how:

Copy the project API Key from the Integrations tab on the left hand menu on your project

In the simulator tool, paste the API Key in the first box (Your Project API Key)
Hit Preview HTML

💡 For more advanced customizations, you can add the version ID to the second box (Your version ID) in order to get access to the custom CSS box.

Migrate Your Conversation Designs To Voiceflow, Easily

Making the process of switching platforms for your conversation design team can feel easier said than done. Using the tips provided in this guide, we hope that your migration can happen easier, faster, and with more collaboration from the stakeholders that help get your conversational experiences from design, to prototype, to launch.

If you are looking to hear other’s experiences, here is a great customer story about moving from Flowcharts to Voiceflow and the impacts of this transition!

‍