Making Your Design Easy to Understand and Test

Flowcharts have traditionally relied on color-coding and differently shaped blocks to represent the elements of a conversational interface, such as user inputs, system outputs, and decision points. While this approach can be effective for small and simple conversational interfaces, there are a few disadvantages:

• the system of what each colour and shape represents in a flowchart can vary from team to team, making it harder to maintain complete cross-functional understanding
• the functionality of different blocks and steps cannot be fully documented and tested without a higher-fidelity prototype due to the static nature of flowcharts
• a flowchart's linear depiction of conversation flows increases exponentially in visual complexity as the assistant grows, leading to confusion or errors when creating and reviewing designs

Functional Blocks in Voiceflow

Voiceflow offers a modular approach to conversational design, using functional blocks to represent  specific actions and logical behaviour. These blocks are designed to be flexible and adaptable, allowing designers to easily create, modify, and reuse them as needed.

• Voiceflow's built-in library (sidebar) of functional steps allow designers to focus on the functionality of each step rather than the visual representation.
• These blocks are designed specifically for conversation design, including built-in integrations with chat platforms like WhatsApp and voice assistants like Alexa, natural language understanding (NLU) and large language model (LLM) tools, and real-time collaborative environments.
• After a design is initially completed, Voiceflow can automatically create a testing environment to simulate the assistant design in a chat scenario (without any development), using the functional blocks to generate assistant logic. 
  

Tips for the Transition

Use Color-Coding and Block Titles for Highlighting Important Blocks

Developers often need to navigate through complex flows and understand how blocks are connected. By using colouring to distinguish between different types of blocks, developers can quickly identify key elements of the conversation flow that require additional coding.

You can make color-coding blocks faster by using the library to create block templates for your team that adhere to a consistent colour scheme. 

Apart from using colours, you can also add a title to blocks to indicate important stakeholder-relevant information, such as responseIDs or sample utterances.

Add Canvas Markup and Comments for Context

Even with Voiceflow's built-in functional blocks, more context may be needed to understand the expected user behaviour or assistant logic. Use text markup to indicate notes or other information that provides additional context to the flow and image markup to add arrows or other objects to highlight new items on the canvas (Voiceflow even offers a resource pack for helpful image assets). 

Additionally, teams can document all discussions about an assistant design within the canvas itself by using the Commenting feature. Team members can tag each other in comment threads, highlight specific areas in the canvas, and collaborate synchronously on Voiceflow. 

Explore the Step Sidebar

Voiceflow's step sidebar on the assistant canvas offers a wide variety of functional steps to achieve conversation-design specific tasks. An introduction to what are steps and blocks provides a summary of the steps and their applications. 

Test and Prototype the Assistant

One of the magical qualities of Voiceflow is the ability to transform a conversation flow on the design canvas into a working chat simulation between you and the assistant. No flowchart can fully simulate the user experience of conversing with the assistant, since Voiceflow's functional blocks actually translate to fully-fledged, logical procedures in an assistant. 

By testing your assistant, you can run the simulation within Voiceflow and converse with the assistant while concurrently evaluating performance statistics like intent confidence scores. The visualization of the assistant conversation enables streamlined troubleshooting and improved debugging strategies. 

By prototyping your assistant, you can quickly generate a working prototype based off of your conversation designs to share outside of the Voiceflow canvas. You can use this shareable prototype to gather feedback from external stakeholders, run unmoderated user testing, and gather conversation transcripts of interactions between users and the assistant to continuously iterate on your designs. 

Learn more about running usability testing on Voiceflow by using prototypes here.