Improving Leading Chatbot Platform Design and UX

The image presents improved chatbot paltform design

In the search for a simplified interface and intuitive user experience, DRUID, one of the fastest-growing AI companies, decided to partner with Synergy Codes. By using interactive diagrams based on GoJS, we’ve created an exceptional chatbot platform design and sped up the product development cycle.

About DRUID

DRUID is a leading no-code enterprise conversational AI platform and one of the fastest-growing AI companies in Central Europe. Its mission is to revolutionize the global conversational AI landscape with a low-code chatbot experience.

The world’s top companies like Microsoft, UiPath, KPMG, or Deloitte choose DRUID’s platform to automate their internal and external business processes.

DRUID’s Enterprise AI chatbot authoring Platform allows users to design, develop and deploy chatbots easily in hours instead of days. With the use of a multi-language NLU engine, DRUID’s solution identifies user intents, sentiment, and system entities.

Client AI-powered Conversational Platform

Business need GoJS, UX, UI

Solution data flow editor, dashboard with real-time data presentation

Scope design, UI/UX, frontend, backend

Technology GoJS

Challenge

Improved chatbot platform design - interactive dashboard

Making Chatbot Platform UX Simple and Accessible

From its beginnings in 2018, the DRUID platform has been dynamically growing. As the number of users and created chatbots grows exponentially, it needed to implement solutions that aim at:

turning complex tables into an interactive visualization

improving chatbot users’ productivity

reducing company customer service workload

To do that, DRUID decided to convert conversational software into something more simple and accessible than ever before. The goal was to provide a simplified interface and unrivaled user experience based on interactive diagrams. It would shorten the learning curve and allow non-technical users to design, develop and deploy chatbots effortlessly. In consequence, it would also result in a reduction of customer support workload.

DRUID found GoJS to be the perfect diagramming library to incorporate within their product. To speed up the product development cycle, they were looking for a perfect partner with charts and diagrams know-how.

A vendor selection process ended with choosing Synergy Codes, a premium GoJS consultancy company, recommended by Northwood Software, a founder of the GoJS visual library.

After a one-month pilot, Synergy Codes not only delivered the agreed components quickly and efficiently, but also provided technical and usability guidelines for further product development. Currently, Synergy Codes support DRUID by developing a series of new components based on the GoJS library.

Solutions

Solution and key features

Chatbot Diagrams to Visualise Platform’s Operations

Taking into account the client’s needs and requirements, a project team that consists of Design and Development specialists proposed the use of selected diagrams to visualize the operation of the conversational platform. The project team worked out the diagram visualizations with the appropriate diagram logic implementation.

So far, the Synergy Codes team has developed and tested the functioning of the following diagrams. The features mentioned below are dedicated to the 1.4 version of DRUID’s product.

Bot diagram – is a major part of the project which enables creating the core of the tool. Bot Diagram is the graphic visualization of the flows. It depicts the interrelations between them within the selected bot based on the definition of these flows.
Flow diagram – provides comprehensive information for each step of the conversation flow, including contextual data and integration calls. It allows to easily add and update the conversation flow.
Entity diagram – visualizes the entity configurations, further enhancing the platform versatility and simplifying deployments for even the most complex use-cases.

Bot diagram

The diagram enables a full view of the flow structure. Its major role is to identify the welcome flow (which stands for the beginning of the conversation) or detect the inconsistent conversation (flows). The user can follow the possible missing flow elements and take the appropriate action to correct the issues. One user-friendly interface enables the integration of all available tools to create a virtual assistant for business and technical users. Each conversation designer has access to the available tools to perform a quick bot flow and links between flow visualization. The other possibilities are: viewing inconsistency zones that require the bot author’s attention, exploring the primary conversation paths, and discovering the possible routes for flows.

Flow diagram

Depicts the processes to document, study, plan, improve or communicate the operations in clear easy-to-understand diagrams. The flow diagram consists of the intention (called a start phrase) and dialogue. Flow stands for a particular term used by DRUID bots. It represents the configuration of the conversation between the end-user and the chatbot. The tree structure enables configuring logical decisions to provide different paths based on context, actions, or user input. The main benefits include:

productivity and chatbot authoring quality increase
time to production acceleration
chatbot relevance increase
specific business use case coverage
customer’s satisfaction and engagement increase

Entity diagram

Entities are collections of information that are used in a conversation. They provide a specific context for the intention and course of the conversation. The entity diagram relies on the standard ERD diagram model where ERD stands for Entity Relationship Diagram. It shows the relationships between sets of entities stored in a database to explain the logical structure of databases. Entity diagrams consist of three concepts: entities, attributes, and relationships. DRUID’s solution covered two types of entity diagrams: classic database schema and tree entity diagrams to indicate the entities’ interrelations and loops.

With the entity diagram functionality, chatbot authoring becomes easy. The user benefits from Enterprise Data Models to discover hundreds of entities and fields delivered with predefined templates.

„I appreciate both the code and the product design advisory I received from Synergy Codes”

Daniel Balaceanu, Head of Products

Benefits

Extensive Partnership for Delivering Better Chatbot Platform Design and UX

The solutions we have proposed aim at showing the benefits of building and using chatbot diagrams in a low-code chatbot platform. We used multi-level cooperation with mixed teams of Developers and Designers to provide the appropriate solutions that the client expects.

Specific solutions on the top of GoJS library

Chatbot platform design - gojs expertise

In the project, we used selected framework technologies and methodologies tailored to the client’s expectations. Among them were:

GoJS which is the advanced visual JS library for creating diagrams. It allows the use of advanced objects, collapsible panels, the inclusion of search engines, and increased interactivity. The client has already used GoJS and based his projects on it in this case.
DagreJS used to build advanced types of diagrams and interactive objects. The library for calculating the position (arrangement) of elements on the diagram. It usually positions elements better and works faster than the layouts built into GoJS.
Lodash FP serving as an auxiliary library for calculations and performing operations on data structures.

Advisory during cooperation

As part of the project work, Synergy Codes organized workshop meetings. Both parties could get to know each other, but most of all, learn about the challenges and client’s requirements.

Specialists from Design and Development teams, apart from collecting requirements, also contributed to visual, technical, and functional solutions. It all resulted in creating a list of appropriate functionalities built by Synergy Codes specialists later on. The developed features are simultaneously tested by both parties.

Exceptional User Experience makes a difference

Chatbot platform design - advisory during cooperation

Technical aspects are not, however, the only benefits that DRUID gets after tool development. Among the undoubted pros are:

Easier and friendlier user flow that enables building the interactive diagrams tailored to the user’s needs
Neat and refreshed UX thanks to the interactivity implementation
Possibility to add numerous data at once, saving the tool’s overall appearance
Greater responsiveness and intuitiveness while operating the tool
Merging UX with AI and client’s solutions within one tool

Constant cooperation of Development/Design teams gave rise to an advanced tool for DRUID. The work of the Design Team was not only about determining the appropriate paths for developing UX. Active participation in meetings, collecting requirements, wireframing, and constant contact with the client streamlined the cooperation between Synergy Codes and DRUID.

Agile cooperation

When implementing the project for DRUID, we decided to assign two project teams: Development and Design, along with the assigned Project Manager. As part of the product development process, Synergy Codes took into account the client’s needs and analyzed the requirements. The standard workflow takes place in two-week sprints, so the production of the tool is smooth, as all corrections are made regularly. On Synergy Codes’ side, the Design-Development teams cooperate simultaneously with DRUID specialists.

Benefits

Increasing Productivity Thanks to Better Chatbot Platform Design and UX

Solving the challenge assumed acceleration of the product development cycle through the usage of diagrams and charts supported by Synergy Codes’ expertise and experience.

During the cooperation lasting over a year, we created a rich roadmap, including a simplified user experience. The result is an increase in the productivity of chatbot authors. The output landscape includes:

300+

Performance growth originated in 300+ nodes with drill-down, expand, and collapse options

Boosted UX and productivity

Faster new users onboarding

Using the logic of the client’s tool and adjusting it to the intuitive UX makes working with such a demanding tool build even more expertise on our side. For even better outcomes, Synergy Codes’ Design Team has been working on a style guide which fits the client’s needs and UX requirements.

The project for the DRUID 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.

„Mixed teamwork resulted in delivering high UX and UI standards and solutions implemented in the core Client’s project. ”

Joanna Pawłowska, UX Designer at Synergy Codes

Our blog post

Effective front-end development with GoJS

Our developers specialized in front-end solutions sometimes deal with initially written codes in the projects. It happens we notice poorly written code with the use of the GoJS elements. Therefore, in this article, we would like to explain what to be careful about in…

#technology web GoJS