Problem statement

Our current platform had a form based conversation builder. This was difficult to understand and follow. The implication of this was that users created bots which had no clear flow and a bunch of overlapping tasks.

Proposed solution

The idea was to create a drag and drop solution which non-technical users can use in order to build conversation flows for their AI powered voicebots.

My role

I had to spec and build the core interaction model and editor logic, focusing on usability and clarity for non-technical users.

Process & execution

This is a sub feature in a larger application. The application is built in VueJS, so naturally the sub feature had to be in VueJS as well. The feature was initially built using KonvaJS and Vue-Konva using a canvas based apporach, but I quickly ran into performance problems. I rebuilt the feature using VueFlow and DagreJS, using a <div> and <svg> approach. This came with a bunch of features out of the box which I could make use of. This also presented some issues with the tree layout calculation which I had to adapt and improve to work for our use case.

Key features

• Tasks represented as nodes, connected via parent/child relationships

• Automatic tree-based layout derived from task hierarchy

• Conditional paths, allowing one parent to trigger specific child tasks

• Manual layout overrides via drag-and-drop

• Visual differentiation for inactive tasks

• Context highlighting: selecting a node highlights its connections while dimming others

• Configurable display options (edge styles, visibility of inactive tasks)

Outcome

The result was a powerful yet intuitive visual editor that made complex voicebot logic easy to understand, modify, and maintain.