All projects

Timeline

Domain

Chat bot design tool

Role

Senior product designer

Project

Redesign, design system

Background

Timeline

Domain

Chat bot design tool

Role

Senior product designer

Project

Redesign, design system

Background

Focus

The tool was initially built to be an Alexa skill / Google action builder. However, the business has evolved drastically since then, and the app needed to service a wider range of use cases and different ICPs.

My high-level goal was to re-think many of the underlying systems come up with a solution that not only solves the current issues but also allows to easily scale the product in the future.

Conceptually, the problem I needed to solve was:
How an end user can create natural conversational experience, which is frequently not a linear flow, using a mind-map builder?

I defined the following aspects to focus on:

• Usability, aesthetics, and accessibility
  Build a seamless experience around creating conversational projects by rebuilding the UI, reducing the number of actions to reach a result, and optimizing information architecture. Visually, converge the product and the brand identity, meet the WCAG standards.
  

• Design system and product scalability
  Unify the component behavior, build a comprehensive design system, and evolve it when extending the product functionality and the design team.
  

• Ease of learning and adoption
  Build an onboarding experience around the best practices of creating an advanced conversational experience. Cover every feature with a comprehensive description, incentivize clients to use shortcuts for better productivity.
  

• Engagement of various user roles
  The tool implies teamwork and engagement of different user roles throughout the assistant creation process. The goal was to build the UI reflecting the needs of different roles: designers, developers, business owners, and at the same time avoid overloading the interface.
  

• Error tolerance
  Minimize errors and ensure that customers can easily recover from an error and smoothly get back to the project they're working on. When designing, I kept in mind that conversational designers (clients) can build advanced projects that use the tool the way we don't expect. Hence, the design must allow building any combination and intersections of the features.
  

Scope

The main focus of the work was on refining the functionality and adding new features, usability improvement, testing, and visual design.

In this case study, I'm focusing only to the conversation design tool ignoring the rest of the designed user flows such as signup, dashboards, etc.

• Watching user sessions,

• Working with support and backlog,

• Defining areas of improvement,

• Analyzing competitors.

• User experience questionnaire,

• Tracking of product events,

• Customer development sessions,

• User segmentation.

• Describing user flows,

• Converging UI and business metrics,

• Designing information architecture,

• Conducting usability audit,

• Prioritization and estimation,

• Scoping of the first versions.

• Building an atomic design system,

• Designing UI mechanics & shortcuts,
  

• Migrating existing projects,
  

• Writing specifications,
  

• Mapping feature dependencies,

• Creating a rollout plan.

Product research

When I joined the company, the team has already collected and structured user personas and much feedback and complaints. My primary objective was to define usability metrics to focus on and converge them with business goals.

Areas of improvement:

• Ease of use and intuitiveness

• Adoption

• Engagement and functionality

• Aesthetics and accessibility

For each area, I answered:

• What results do customers and the business expect?

• What is not allowing to reach the results at the moment?

• Possible solutions

Measuring success with:

• User engagement metrics: avg session length, number of sessions, number of project test sessions, etc

• UEQ (user experience questionary) for comparing design metrics before and after the redesign

• Qualitative user feedback and support requests

Using the research methods:

• Intra-team interviews

• User interviews and usability testing

• Usability audit

• Checking product analytics and watching session recordings

• Competitor analysis

User research

When I started working on the redesign, I knew the key to success would be understanding the diverse needs of the platform's users, from designers and content managers to engineers. To achieve this, I took a structured, research-driven approach.

Qualitative research

I began by conducting customer interviews and UI feedback sessions to understand how users interacted with the tool and where they faced challenges.
Watching session recordings provided a deeper look into their workflows, while Intercom support requests and the company’s existing database of interviews and complaints highlighted recurring pain points.
This approach helped me identify common frustrations, like difficulty navigating the tool and managing complex workflows.

Quantitative validation

To support these findings with data, I used UEQ surveys to measure usability and satisfaction, combined with event tracking and quick surveys to understand feature adoption. This data gave me a clear view of how users engaged with the tool and what needed improvement.

Insight

A standout finding was that many conversation designers were also users of tools like Figma, FigJam, and Sketch. Recognizing this, I incorporated familiar design patterns, like reusable styles and components, to make the platform feel intuitive and aligned with their expectations.

By combining these qualitative and quantitative methods, I was able to design a solution that directly addressed user needs while leveraging familiar workflows. This ensured the redesigned platform was not only functional but also enjoyable for users to adopt and use daily.

Rethinking conversation building blocks

In Voicelow, the basic conversation unit is a block. Basically, the block is a logically grouped list of steps that the system triggers one by one.

Challenge

Before the redesign, customers were operating on a relatively big list of steps. Each step was represented by a specific function like sending an image attachment, capturing a user reply, or a regular user reply, etc.
Besides being inconvenient to work with the ~20-item list of steps, this approach was creating logical confusion when a user wasn't able to mix some steps within the same block, and these rules weren't obvious and were tricky to convey.

Solution

I decided to significantly decrease the number of steps persisting the similar functionality by introducing the molecular entity — Turn.
The turn is a single interaction between a human and the machine. Turns constitute topics, topics constitute a conversation.

Customers were still able to add separate functional steps to the canvas in order to maintain consistency between the new UI and the already existing system when migrating the projects.

Basically, the difference on the UI level is the previously separate steps have become grouped in Turns (in other words, a turn is a template with customizable properties). However, the concept of conversation building units has been changed drastically.

System output: Message

System output or, in terms of the Voiceflow UI, the Message is a piece of content provided by an assistant to a user either automatically or in response to a user's command. The content of the message significantly varies based on a channel: text or voice.

Before the redesign, there wasn't a single message entity within the platform but there were multiple separate steps like text, image, audio. Similar to the concept of the Turn block, I decided to unify the steps under the single Message concepts and present the media data as attachments to the message.

Attachments

Introducing the concept of attachments to the primary text or voice message made me think about the reusability of attachments as the first step towards the content management system. After aligning with user feedback, I also found out that, besides being able to reuse, all types of attachments also require to be optionally hosted at an external domain.

Within the redesign, I also introduced video and document attachments for text channels due to the planned scale of the product.

Voice effects

Challenge

Previously, SSML effects were applied through text tags manually added to message inputs. This approach required users to memorize tags and ensure accurate spelling, creating a steep learning curve.

Additionally, selecting speech accents and voice providers relied on a complex, 3-level nested menu that was difficult to navigate and lacked a clear overview.

Solution

I addressed these challenges with the following enhancements:

Improved filter mechanics:

• Introduced intuitive options like right-click menus, autocomplete inputs, and text selection for applying SSML effects.
• Simplified naming for user-friendly application.

Streamlined UI:

• Designed a clean, minimal display for applied tags to reduce visual clutter, even with multiple effects.
  
• Added error prevention measures to avoid conflicting SSML effects.
  

Enhanced voice selection:

• Replaced the nested menu with an always-visible list of options for accents and voice providers.
• Included controls to quickly specify accents based on channels (Google, Alexa, Custom) and project languages

Impact

These updates significantly reduced the complexity of applying SSML effects, improved navigation for voice selection, and ensured a smoother, more efficient user experience.

Variables and conditions

Challenge

Previously, creating a flow where a user receives one message or another required bot creators to build separate conditional branches for each possible outcome.

This process was cumbersome and led to overly complex canvases, often resulting in memory issues on some laptops.

Additionally, conditions relied on variables that were either predefined based on user actions or manually filled out during conversations with the bot. However, managing these variables and applying conditions was far from intuitive, creating barriers for efficient workflow.

Solution

To address these challenges, I introduced a more streamlined approach by integrating conditional settings directly within message steps. This eliminated the need for separate branches for each condition, allowing creators to define message-specific conditions within a block.

Simplified user experience:

• Message conditions are now defined inline, reducing the number of canvas items and simplifying workflows.
• The streamlined approach significantly improved usability while resolving memory-related issues on lower-performance laptops.

Advanced conditional logic:

• For more complex use cases, I designed a dedicated conditional block with an extended condition builder.
• This feature supports intricate branching logic while keeping the canvas organized and scalable.

Enhanced variable management:

• Implemented an auto-complete system for variables, providing seamless access to a shared library.
• The inline quick-edit feature enables users to modify variables on the fly, minimizing the number of actions required and ensuring quick collaboration across teams

Impact

This redesign not only simplified the user experience but also empowered teams to create complex conversational flows with minimal effort. By optimizing variable management and reducing canvas clutter, the new approach enhanced both productivity and performance.

Actions

Challenge

Actions define what happens behind the scenes when a user reaches a specific point in a flow, such as setting a variable, executing JavaScript, or calling an API.

Previously, actions were represented as separate blocks, making flows harder to build, manage, and understand due to the clutter of individual action points.

Solution

To simplify this, I integrated actions directly into existing blocks.
This eliminated the need for separate action blocks, keeping flows more streamlined and intuitive.

Additionally, I introduced a new concept: Components.
Components are reusable logic units that allow creators to jump to sub-flows, perform specific actions, and return with updated data (e.g., variables) to continue the conversation seamlessly.
This innovation enabled the creation of non-linear, native conversational experiences without adding complexity to the flow design.

Impact

The introduction of Components boosted the design of conversational experiences by enabling non-linear, context-aware interactions.

This flexibility allows for sophisticated dialogue paths where users can seamlessly transition between sub-flows and return without breaking the conversation.

By reducing canvas clutter and supporting advanced logic, creators can now deliver more natural, engaging, and scalable conversational designs.

User input

Challenge

User replies are the actions a chatbot user can take at any point during a conversation. 

Previously, the system relied on a predefined list of possible actions at each stage of the script, limiting user choices and creating a rigid experience.
This approach resulted in a static, "golden flow" that didn’t reflect the flexibility of real-life conversations. 

Additionally, creators had to use separate canvas items for background actions like setting variables, opening links, or running code, which made flow management more complex.

Solution

To create a more flexible and efficient conversational experience, I introduced several key improvements:

Input capturing

• Extracts essential data from user replies and stores it in variables.
• If required data isn’t provided, the bot dynamically asks follow-up questions to gather the missing information.

Listening mode

• The bot continuously listens for intents outside the current block, allowing users to switch to different flows as needed.
• Once the intent is processed, the system seamlessly returns the user to their previous point in the conversation.

Automatic actions for user replies

• Integrated actions like setting variables, opening links, or running code directly into the canvas for user replies.
• This removed the need for separate canvas items, simplifying flow management and reducing complexity for creators.

Impact

These updates made conversational flows more intuitive for both users and creators.
Users are no longer restricted to predefined paths, enabling more natural and flexible interactions.

For creators, the integration of automatic actions and streamlined flow management reduced overhead, allowing them to focus on building engaging conversational designs without added complexity.

Centralized model management

Challenge

The app is used by teams with diverse roles, such as content managers, UX designers, and engineers. 

Previously, all content management took place directly on the canvas, which made it difficult to locate and edit specific pieces of data or functionality. 

This was especially challenging for team members who used the app less frequently, like content managers or engineers, leading to inefficiencies and frustration.

Solution

To address this, I introduced a dedicated section for centralized content management. This new feature allows team members to:

Manage content effectively

• Provides a structured, user-friendly interface to locate and edit content without navigating the entire canvas

Resolve script conflicts

• Includes tools to identify and resolve script conflicts collaboratively, reducing errors and miscommunications across the team.

Train the model

• Offers an intuitive interface for training and refining the conversational model, enabling all team members to contribute regardless of their technical expertise.

Notification system

• A built-in notification system highlights issues with the model and provides actionable recommendations for improvement, ensuring the team can proactively address potential problems.

Impact

The centralized content management system made collaboration easier for all team members, particularly those with less frequent app usage.

By simplifying workflows, improving conflict resolution, and introducing clear notifications, teams can now manage content and refine models more efficiently, leading to higher productivity and better conversational experiences.

Conclusion

The redesign and enhancements I led have driven significant, measurable improvements for the company, impacting user adoption, client acquisition, and overall business growth. 

By addressing key usability challenges and aligning the product with enterprise needs, the platform has achieved the following:

Securing a new investment round

The redesigned platform demonstrated its potential to scale for enterprise use, leading to the successful closure of a new investment round. The increased confidence from investors was directly tied to the enhanced product functionality and its ability to cater to more sophisticated client needs.

Growing the enterprise client base

With features like centralized content management, reusable logic components, and extended collaborative tools, the platform attracted a significant increase in enterprise clients over two years.
This shift significantly increased ARR and established the product as a trusted tool for professional conversational AI design.

Boosting adoption and retention

The improved UX enabled more team members across various roles (e.g., content managers, designers, and engineers) to use the platform daily.
This resulted in a 35% increase in DAU and a corresponding boost in retention rates, as teams relied more heavily on the tool for collaborative workflows.

Scaling for 2 years of growth

The scalable architecture and design foundations supported a 3x increase in projects created on the platform, while maintaining performance and usability.
These changes also enabled the company to pivot into an AI agent builder, positioning the product as a leading solution for enterprise AI needs.

Reducing time to deploy

Streamlined workflows, reusable components, and improved variable management reduced the time required for teams to create and deploy conversational AI flows by 40%, increasing overall productivity and client satisfaction.

gregory@murynmukha.com

gregory@murynmukha.com