Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Go to Haptik Website
  • Contact Us
  • Home
  • Conversation Design
  • Design Guides

How to set up a flowchart tool?

Written by Medha Anand

Updated on October 29th, 2021

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Build Deploy Analyse Manage Account Bot Deactivation
  • Bot Building
    Essentials Smart Skills Steps User Messages Bot Responses Entities Connections Customisations User feedback collection Testing Whatsapp Bots NLU Bot Maintenance
  • Smart Agent Chat
    Set up Admin Settings MyChats Section (Agent Inbox) Live Traffic Section Teams Section Archives Section Analytics Plans on Smart Agent Chat
  • Conversation Design
    Design Basics Design Guides Designing for Platforms Designing WhatsApp Bots
  • Developer Guides
    Code Step Integration Static Step Integration Shopify Integration SETU Integration Exotel Integration CIBIL integration Freshdesk KMS Integration PayU Integration Zendesk Guide Integration Twilio Integration Razorpay Integration LeadSquared Integration USU(Unymira) Integration Helo(VivaConnect) Integration Salesforce KMS Integration Stripe Integration PayPal Integration CleverTap Integration Fynd Integration HubSpot Integration Magento Integration WooCommerce Integration Microsoft Dynamics 365 Integration
  • Deployment
    Web SDK WhatsApp Facebook Instagram Sunshine Conversation LINE Google Business Messages Telegram MS Teams Bot as an API iOS SDK Android SDK
  • External Agent Tool Setup
    Zendesk Chat Salesforce Service Cloud Freshchat Zoho NICE CXOne Gorgias
  • Analytics & Reporting
    Intelligent Analytics
  • Notifications
    SMS Notifications Success Measurement
  • Commerce Plus
    Catalog Integration Bot Building Guide Channel Deployments Unified ML Pipeline Documentation
  • Troubleshooting Guides
    Error Messages FAQs
  • Release Notes
+ More

Table of Contents

Why do you need a flowchart tool?What we do at Haptik?UI Elements on LucidCreating Flowcharts on LucidPublishing Flowcharts on LucidHow to use the Haptik elements library on any other tool?What to put into a flowchart?Other things to keep in mind

This is the most important tool in the Conversation Designer’s arsenal to design conversational flows and user journeys.

Why do you need a flowchart tool?

  • A flowchart helps you craft your conversational journey before you invest in building the bot. It provides a fully flexible canvas to modify and play around with ideas at an early stage.
  • A flowchart is a great way to brainstorm on all possibilities and chalk out edge cases atop your ideal user journey. This makes your solution a lot more comprehensive and long-lasting.
  • A flowchart is ideal for all the stakeholders of your product to visualize the user journey, provide feedback at an early stage.
  • A flowchart helps you create a clear benchmark for your product before you go into development. It gives your QA engineer a reference point while testing the virtual assistant.

What we do at Haptik?

Over the years, we’ve experimented with several bot design tools — Spreadsheets, Bot Society, Xmind... you name it, and we’ve probably tried it. We finally landed on Lucidchart as our Conversation Design tool of choice.

We started using Lucid at the start of 2019 and put it through its paces, only to realize that we needed a central library of elements to ensure that Haptik’s IVA designs looked consistent, no matter who designed them.

UI Elements on Lucid

Our platform’s users now have access to a central Haptik Library of over 20 Haptik specific UI elements that can be used to design bot flows.

Here’s a chart of the elements which we have imported in the Haptik Lucid accounts. In the below sections we have explained how you can enable it for your Lucid account or any other flowchart design tool. This library is constantly being updated with new elements and is maintained by the Haptik Design and Solutions team.

Creating Flowcharts on Lucid

While Lucid is a great tool, it hasn’t been built to design user journeys for chatbots in mind. Which is why we’ve had to modify certain things to fit our way of working.

Here is the process to create a bot flow document. Make sure that you implement all the following stages to avoid errors later.

  • Create a new document and import the Haptik Library if it isn’t already present in the sidebar.
  • Pull in the Document Name element. Name the document after the client and the tab after sub use case for best results.
  • Adjust your Document and Canvas size. Turn off Auto tiling.
  • Pull in the Connector element.
  • Pull in your task box, User messages or any other element you need to start the bot flow with.
  • Edit copies and keep pulling other elements to complete your bot flows.
  • The task box element should ideally be edited as per your brand color and personality. Make sure you add the relevant copy to make it interesting.

Publishing Flowcharts on Lucid

Here is the process to publish your lucid flowcharts for any of your team members or stakeholders to view the design.

Go to File>Publish>Tap on the Full document URL option > Copy the link and share it.

Here’s an article that gives you more information about publishing flowcharts on Lucid.

This link does not require the viewer to create a Lucid account and comments will not be allowed in this view only lucid chart link.

How to use the Haptik elements library on any other tool?

  1. Haptik will provide a downloadable file format that works for your tool - .vsdx, .vsd or .csv.
  2. Upload the file to your tool
  3. Drag and drop elements to design your conversations

What to put into a flowchart?

Your flowchart can be structured as follows:

  • The user journey for all scenarios with the dialogue. This includes everything we explain in the Chat Initiation, Chat Middle, Chat End section including the ways to initiate the chat, provide a solution to the user’s query, and complete the user journey.
  • The correct elements to be used depend on the platform
  • Any clarifications or questions you have for the team
  • Anything else that is relevant to the journey that the bot builder must know!

Other things to keep in mind

Here’s what your flowchart should contain apart from your basic chat flow design described above

  1. API calls whenever you need to fetch or send any information from within the bot to another system. Illustrated below
  1. Entities - Use a placeholder like %name to highlight dynamic values. You may also use actual sample values like John Doe but highlight these in some color so that bot builders know that these are dynamic. As shown below —
  1. You may use the clarifications box to highlight content options and open questions. Once a clarification is closed, make sure that no important notes are lost — we recommend adding a Note for any important information.
  1. Bot Prompts are ‘notifications’ sent to users to draw their attention. Make sure you include them in your flowchart if you wish to define user journeys that begin from these prompts. This is explained in detail in the Chat Initiation >> Bot Prompt section below.
  1. Bot Break messages - Users tend to enter unsupported queries or gibberish during the conversation. Always ensure that your design includes a bot break message alongside the taskbox. You can learn more about how to build better bot break experiences in the Bot Breaks section.

Follow this process to ensure that your flowchart is comprehensive and provides an excellent base for the Bot Building team to take over!

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Introduction to Conversation Design
  • What are the basic building blocks of Conversation Design?
  • How to do Content Formatting for IVA?
  • How to end the conversation?

Platform

  • Conversation Studio
  • Smart Skills
  • Advanced NLU
  • Intelligent Analytics
  • Omnichannel
  • Smart Agent Chat
  • Enterprise Security
  • Integrations

Solutions

  • Conversational Commerce
  • Lead Generation
  • Customer Care
  • WhatsApp
  • Conversational IVR
  • Google Business Messages

Industries

  • Retail/ E-Commerce
  • Financial Services
  • Travel & Hospitality
  • Telecom

Knowledge

  • ROI Calculator
  • Reports & Research
  • Case Studies
  • Webinars
  • ISAT
  • Tech Blog
  • Business Blog
  • Resources
  • Haptik v/s Yellow
  • Haptik v/s Liveperson
  • Haptik v/s IBM Watson
  • Haptik v/s Verloop
  • Conversations on AI

Company

  • Why Haptik
  • About Us
  • Careers
  • News & Media
  • Awards & Recognition
  • Contact Us
  • Partnerships
  • Investor Relations

Subscribe

Sign up to recieve the latest updates

Find us on

  • Twitter-footer
  • Linkedin-footer
  • YT-footer
  • Insta-footer
  • G2-footer
  • Facebook-footer

Knowledge Base Software powered by Helpjuice

Copyright © jio Haptik Technology Limited 2021 | Data Security & Privacy Policy | GDPR

North America | Asia Pacific | Africa | enterprise@haptik.ai

Definition by Author

0
0