From Excel tables to jaw-dropping interactive visualization – get to know DRUID AI story

From Excel tables to jaw-dropping interactive visualization – get to know DRUID AI story

Wojciech Gąciarz

|
14 min
|
From Excel tables to jaw-dropping interactive visualization – get to know DRUID AI story

Chatbots have become an everydayness for Internet users therefore conversational platforms creators need to make their products easy to manage and more effective. DRUID – one of the fastest-growing AI companies, decided to team up and entrust this challenge to Synergy Codes – a leader in interactive data visualization. Have a look at the case study that describes the cooperation and get to know the results of this exciting project.    

DRUID – a short introduction 

DRUID is a leader in conversational AI technology with over 25 years of experience in building enterprise-grade software solutions. Founded in 2018 the organization gathers more and more top software engineers and business consultants That makes DRUID one of the fastest-growing AI companies in Central and Eastern Europe, which vital mission is to make chatbots more accessible for both – end-users and creators.   

The main product – DRUID’s Enterprise AI chatbot authoring Platform – enables and simplifies the process of designing, developing, and deploying chatbots. The NLU engine can read users’ intents, sentiments, and system entities accurately. Get to know DRUIDS’s chatbot platform’s potential and functionalities in the medical industry’s field. 

DRUID Healthcare AI Virtual Assistant – conversational automation for clinics and hospitals 

DRUID is on its way to becoming a significant player in the global conversational AI landscape, cooperating with such top companies as Microsoft, UilPath, KPMG, or Deloitte.  

Paramount goal – making AI chatbots accessible for users and creators through interactive visualizations 

Because of dynamically growth of the DRUID’S platform, it has faced the necessity of implementing solutions and improvements that aim at:    

  1. simplifying depiction of complex tables by converting them into interactive visualization,   
  1. improving users’ productivity,   
  1. decreasing customer service workload.   

The crucial intention for the whole operation was to enhance both sides’ experience with using the platform. End-users could get more accurate and valuable answers to become more self-reliant as the solution enables reducing the number of answers direct to customer service. The creators, on the other hand, are in charge of managing the platform.   
 
To achieve these challenging goals, DRUID decided to trust interactive diagrams and GoJS diagramming library (see the complete guide to GoJS library), which were expected to provide a simplified interface and unrivaled user experience.   
 
Apart from that, DRUID is expected to make the platform more accessible for non-tech users to design, develop and deploy chatbots effortlessly.   
 
That was the plan, but how did it turn into reality and make DRUID’s chatbot platform more valuable and accessible?   

The power of interactive data visualization 

Synergy Codes is a trusted and reliable data visualization company and premium GoJS consultant. We are a partner for Northwood Software – a founder of the GoJS library, which converts data into clear diagrams, charts, graphs, and other visual forms. That’s why the vendor selection process ended with choosing our company to help achieve DRUID’s goals.

We assigned two equivalent teams that involved skillful developers and designers, and divided workflow into fields, which determined two groups of solutions:   

  1. interactive diagrams that visualize chatbot’s operations,   
  1. features for bots and end-users.  

Interactive diagrams that visualize AI chatbot’s operations 

The urgent DRUID’s need was to convert complex tables with data into easy-to-read diagrams to visualize the processes performed through a conversational platform. Taking it into account, the project team prepared a set of custom diagrams.

Bot diagram    

The bot diagram was a crucial part of the project because it enabled the creation of the tool’s core. You can say that a diagram is a graphic visualization of the flows and allows the full view of the flow structure. Among other features, diagram:   

  • depicts interrelations between flows within the selected Bot,    
  • identifies welcome flow,   
  • explores the primary conversation paths,   
  • discovers the possible routes for flows,   
  • detects the inconsistent flows and enables viewing inconsistency zones that require attention.     

The last feature is especially beneficial because it enables users to follow the possible missing flow elements and correct the issue immediately and effortlessly.    
 
What is more, the diagram integrates all available features and, in this way, becomes a virtual assistant for business and tech-users. It means that each conversation designer can quickly create flows and links between them within a diagram. 

Low-code chatbot design for processes automation
Low-code chatbot design for processes automation

Flow diagram 

Flow represents different conversation paths between the end-user and the chatbot in a graphical depiction of a tree structure. Consequently, conversation designers can easily manage conversation paths considering context, actions, or user input. And exactly this is a flow diagram – a tree structure consists of the intention (tree crown – that is a start phase) and dialogues (tree branches). The main benefit is that chatbot’s authoring quality and relevance increase, and consequently, customers are more satisfied getting more accurate answers for their questions.   

Flow map diagram with expandable chat details
Flow map diagram with expandable chat details

Entity diagram   

Chatbots need collections of information used in a conversation to perform one. These collections are called entities and determine a specific context for the intention and direction of the conversation. The entity diagram presents a relationship between entities and indicates their interrelations and loops. Consequently, it depicts the entity configurations, further enhancing the platform’s versatility and effortlessly deploying complex use-cases.

Flow diagram describing the conversation paths
Flow diagram describing the conversation paths

Features for AI bots and users 

Apart from interactive diagrams, our project team has developed solutions that enhanced bots’ effectiveness and users‘ (including creators) satisfaction.    

The Annotation Tool   

The Annotation tool is a set of features that allow users to train and test bots, for instance, teach them a bunch of phrases that source comes from end-users or authors. Thanks to that, the creator can improve bots functioning considering business assumptions and end-users needs. The four main functionalities of this solution are:    

  • training set,    
  • testing set,   
  • conversation functionalities,   
  • word cloud.   

Product Tour   

Product Tour is a helpful functionality that guides users through the tool and exposes its main features. Collaterally to it, Help Bot works, which primary duty is to answer each question and suggest important links and correct tabs.     

The Dashboard Concept   

The Dashboard Concept aims to select the appropriate data visualization graphs or tables. Its role is to optimize tracking and analyzing critical metrics of the content.   

DRUID’s solution templates library  

DRUID offers its library of solution templates that accelerate bot development time by providing multiple conversation elements and diagrams. Library eliminates time-consuming actions because it gives creators ready-to-use solution templates: from DRUID Starter or User Authentication to more advanced end-to-end HR or financial services solutions.    

Work process – side-by-side partnership

Equipped with the knowledge about the client’s requirements we could go on to choosing work and management methodology in parallel with selecting accurate technologies. 

Agile cooperation

To satisfy all DRUID’s needs, we engaged a group of specialists with varied skills from the Software Developing, User Interface, and User Experience fields. Our Team Project work side-by-side with client, sharing duties simultaneously with DRUID’s specialists and engaging them in the whole operation.    
 
We decided to implement agile project management and divided workflow steps into two-week sprints to stay effective. It enabled us to watch every detail and add every necessary correction immediately.   
 
An inherent part of the project was workshop meetings. Apart from collecting feedback from DRUID, our developers and designers took the initiative and proposed various visual, technical, and functional solutions. As a result, the work team hammered out a list of features to build later.   

GoJS and others – what technology have we used? 

After brainstorming ideas and preparing a list of features, we chose framework technologies and methodologies tailored to DRUID’s expectations, that is:   

  1. GoJS – which we know backward and forward, therefore we could use advanced objects, collapsible panels, and increased interactivity to create intelligent and valuable diagrams.    
  1. DagreJS – which we used to create more advanced types of interactive diagrams. DagreJS can position diagram elements better and accelerate work compared to layouts built into GoJS.   
  1. Lodash FP – we also needed an auxiliary technology to help us perform operations on data structures, and Lodash FP was just perfect for achieving it.   

Apart from these leading technologies, we took advantage of Lerna, Docker, Terraform, and Bitbucket Pipelines.  Check out our blog if you want to get more valuable information about GoJS and other front-end technologies.  

Results – what is it all for? 

Cooperation between DRUID and Synergy Codes has been lasting for over a year, bringing tools that accelerate the client’s platform development cycle. Results are awe-inspiring and include:   

  1. user experience simplification by creating clear and short user flow that enables building interactive diagrams,    
  1. acceleration and refinement of conversation’s creators work that boosted their productivity,   
  1. possibility to implement a great amount of data at once without harm to the tool’s overall appearance,   
  1. increase the tool’s responsiveness and intuitiveness,   
  1. performance growth originated in 300+ nodes with drill-down, expand, and collapse options.   

What is more, our talented designers simultaneously worked on a style guide that fits the client’s needs and UX requirements.  Watch the results of our cooperation! 

DRUID Chatbot Platform – Conversational Flow Designer 

The project for the DRUID AI company is a demanding development and design undertaking. The cooperation is still ongoing, which will result in the further development of new functionalities in the future.   
 
Suppose you want to visualize your data into clear, readable, and easy-to-maintain diagrams tailored to your organization’s specific environment and customize-friendly. In that case, we are here to help you