TWIN Bot Editor: Design Modernization and UX Improvement
When I joined TWIN in 2018, the platform already had a working prototype of the bot editor. Users could create blocks, configure transitions between them, build visual scenarios, run scripts, and test voice bots and chatbots.
Functionally, the editor already covered the basic needs, but the interface was overloaded, bulky, and difficult to scale for complex scenarios. Users struggled to read large schemes, find the right elements quickly, and work with block settings.
My task was to modernize the editor and make it more compact, readable, and comfortable for working with complex bot scenarios.
🎯 Main Goals
I proposed and worked through several key improvements:
- Increase block density so complex scenarios would take less space
- Introduce block typology through color and icons
- Make transitions between blocks more flexible and visible
- Redesign the editor UI and restructure the main layout
- Build a product component library for all editor modules
- Improve the block settings panel and create a clearer hierarchy
- Improve interaction with large schemes: hotkeys, minimap, block grouping, and bulk actions
🚩 Problem
The main challenge was that large scenarios quickly became visually overloaded.
Instead of seeing the logic structure, users saw a dense scheme of blocks, lines, and settings. This made navigation harder, increased cognitive load, and slowed down work with bots.
Another major issue was the block settings panel. It lacked hierarchy: controls were placed too densely, some elements had unclear or missing labels, and users struggled to understand what each setting was responsible for.
In other words, the editor worked technically, but the interface did not help users manage complexity. A classic product design delight: the functionality exists, but living with it is another story.
✅️ Solution
I redesigned the visual structure of the blocks to make them more compact and easier to read in large schemes.
A color and icon system was introduced for different block types. This helped users distinguish scenario logic faster and understand which elements were responsible for actions, conditions, messages, or transitions.
I also redesigned the connections between blocks. Transitions became more visible and easier to understand, which improved the readability of the scenario as a single logical structure.
⚙️ Block Settings
I reworked the settings panel by adding a clearer hierarchy and structure.
Settings were grouped by meaning, controls received clearer labels, and the interface started to support users better when configuring complex scenarios.
This was important because most of the real work in the editor happened not only on the canvas, but also inside each block’s settings.
🔍 Working with Large Schemes
I also designed interaction patterns for large scenarios:
- Minimap navigation;
- Block grouping;
- Bulk interactions with elements;
- Hotkeys;
- Block and transition states;
- Editing and testing scenarios.
These solutions made the editor more comfortable for real work, where users build not a demo scenario with five blocks, but full business logic for a voice bot or chatbot.
👉Design Handoff & Result
I closely supervised the handoff to front-end development: reviewed implementation, checked interface details, and helped the team preserve the design system logic in the live product.
For this type of editor, it was important not just to “hand off mockups,” but to ensure that complex states, connections, block behavior, and visual hierarchy were implemented correctly.
As a result, an updated bot scenario editor was created and integrated into the TWIN user account. The editor became more compact, readable, and comfortable for working with complex schemes.
Users received a clearer block structure, improved navigation, more understandable settings, and a better process for creating voice bots and chatbots.
For the product, this became an important step in the platform’s evolution: the editor turned from a technical tool into a full product interface that could be scaled, maintained, and developed further.
