Streamlining Conversations: Designing a User-Friendly Chatbot Builder

This case study highlights the design and development of a chat builder tool. The tool enables users to create interactive chatbots and conversational interfaces without coding knowledge. It covers the tool's features, user interface design, usability testing results, and its impact on streamlining chatbot development processes.

Streamlining Conversations: Designing a User-Friendly Chatbot Builder

This case study highlights the design and development of a chat builder tool. The tool enables users to create interactive chatbots and conversational interfaces without coding knowledge. It covers the tool's features, user interface design, usability testing results, and its impact on streamlining chatbot development processes.

Streamlining Conversations: Designing a User-Friendly Chatbot Builder

This case study highlights the design and development of a chat builder tool. The tool enables users to create interactive chatbots and conversational interfaces without coding knowledge. It covers the tool's features, user interface design, usability testing results, and its impact on streamlining chatbot development processes.

Streamlining Conversations: Designing a User-Friendly Chatbot Builder

In today's digital age, social media influencers wield considerable influence over consumer trends and online communities. However, breaking into the world of influencer marketing can be daunting for ordinary social media users. To address this challenge, we embarked on a project to create a chatbot builder aimed at empowering social media users to become influencers.

For

Oncall.MD

Role

Lead Designer

Year

2021

For

Oncall.MD

Role

Lead Designer

Year

2021

For

Oncall.MD

Role

Lead Designer

Year

2021

For

Oncall.MD

Role

Lead Designer

Year

2021

Why Chatbots?

Chatbots have become a real game-changer for B2C companies, and it's not hard to see why.Think about it – they're like a buddy for the tech-savvy millennials out there. You know, those who want to shoot a quick message to a business anytime, day or night (even during those odd hours when most places are closed). The cool part? The chat keeps going, no matter when you decide to drop a line.


For businesses, it's not just about convenience. Chatbots let them connect with customers on a personal level. It's not just a chat; it's like a personalized journey. Plus, when someone starts a chat, they're not just a random user anymore – they're a potential lead. Businesses can follow up strategically, turning a simple conversation into a lasting connection.


Now, behind the scenes, businesses are in for a treat. They can dive into the data from these chats, uncovering gold mines of insights. Imagine knowing what products customers are buzzing about the most. That's powerful info for making smart marketing moves.


It's a win-win, really. Businesses get a direct line to customers, and customers get the instant, personalized attention they crave. Talk about a perfect match!

Challenges We Face

The current options out there just aren't cutting it. They make building chatbots feel like assembling furniture without instructions – frustrating and time-consuming. Without a user-friendly tool, folks are missing out on tapping into the full awesomeness of chatbots. Let's change that.

  • Chatbots need time to get smart. Expecting too much upfront often leads to disappointment.


  • Instead of a simple answer, many chatbots bombard users with web pages, FAQs, or documents when they ask a specific question.


  • Quick solutions matter. Often, chatbots miss the mark by not grasping the customer's intent, resulting in delays in addressing queries.

The Beginning

As we ventured into this new domain, we initiated our journey by delving into the landscape of existing bot tools. Our exploration involved a comprehensive study of various tools available in the market, analyzing their capabilities and limitations. Below are the most popular chatbot builders in 2020.

Source : Chatimize

We studied these tools to gain insights into how conversational platforms operate. Our goal was to pinpoint any aspects overlooked from an enterprise platform standpoint. This thorough evaluation aimed to prevent us from reinventing solutions already available in the market.

Approach

The team unanimously decided to start with a comprehensive vision and gradually refine it during the development process and user interactions.

To establish a product vision for our conversational AI platform, the team engaged in the following exercises:

  • Conducted a competitive analysis of vision statements from indirect competitors and other industry players.

  • Engaged in brainstorming sessions to synthesise the vision statement.


We embarked on thorough research into communication principles. Our aim was to craft a conversational experience that not only captivates and entertains users but also aligns with the business objectives. Once we outlined the key technical and design elements of the conversational UI, including answer formats, conversation flow visualisation, and message arrangement, we delved into scripting. Using personas, we outlined potential scenarios for each user type. This served as a guide as we crafted the final version of the conversation.

Conversation Script

After the group ideation session, analysing and synthesising the information and ideas became a crucial next step in guiding the ongoing design process. During synthesis, we correlated and clustered ideas, identified patterns, and further ideated upon them. This iterative process began shaping the initial draft of a feasible conversation ecosystem. To facilitate this process, we utilised a mind mapping exercise, which helped visualise the system and outline a high-level approach.


Keeping the chatbot goals in focus, we started by listing all the possible topics and conversation segments. Our intention was to get a rapid sense of how intricate the final script might become. By outlining different conversation paths and considering various user scenarios, we gained a clear understanding of the script's potential complexity. This initial brainstorming session allowed us to grasp the nuances involved in creating a detailed and compelling conversation flow for the chatbot.

Conversation Flows

Utilizing this script as a foundation, we developed an interaction flow diagram for the conversation. This diagram provided us with a clear understanding of the branching conditions and how users anticipate them to be managed. By visually mapping out the conversation flow, we could ensure that the chatbot's responses aligned seamlessly with user expectations and effectively addressed various scenarios and conditions.

Triggers & Actions

At the core of the system, 'Message Triggers' serve as the foundational components, initiating all actions within the larger framework. These triggers are categorized into three distinct groups, each representing potential "Actions" that, when activated, initiate either a single message or a series of multiple messages.

Final Design

In natural conversations, people communicate using single sentences. While these can string together into longer utterances, conversational turns are common. Presenting users with lengthy paragraphs to read before responding is akin to conversing with someone who talks too quickly. Therefore, we opted for combinations of short, single sentences to enhance user interaction. This approach mimics the fluidity and pace of real-life conversations, making the experience more engaging and user-friendly.

Mapped Conversation View

This screenshot is a chatbot builder interface, displaying a mapped conversation flow with conditions. Each conversation node is connected logically to its respective condition, illustrating the structured and intuitive design of the chatbot's decision-making process. This visual demonstrates the efficiency and clarity of creating dynamic conversational experiences within the chatbot builder platform.

This screenshot is a chatbot builder interface, displaying a mapped conversation flow with conditions. Each conversation node is connected logically to its respective condition, illustrating the structured and intuitive design of the chatbot's decision-making process. This visual demonstrates the efficiency and clarity of creating dynamic conversational experiences within the chatbot builder platform.

This screenshot is a chatbot builder interface, displaying a mapped conversation flow with conditions. Each conversation node is connected logically to its respective condition, illustrating the structured and intuitive design of the chatbot's decision-making process. This visual demonstrates the efficiency and clarity of creating dynamic conversational experiences within the chatbot builder platform.

This screenshot is a chatbot builder interface, displaying a mapped conversation flow with conditions. Each conversation node is connected logically to its respective condition, illustrating the structured and intuitive design of the chatbot's decision-making process. This visual demonstrates the efficiency and clarity of creating dynamic conversational experiences within the chatbot builder platform.

Condition Node

Node configuration interface within the chatbot builder platform. The image showcases the user interface for configuring conditions, question prompts, answer options, mapping to specific actions, and defining post-action responses.

Node configuration interface within the chatbot builder platform. The image showcases the user interface for configuring conditions, question prompts, answer options, mapping to specific actions, and defining post-action responses.

Node configuration interface within the chatbot builder platform. The image showcases the user interface for configuring conditions, question prompts, answer options, mapping to specific actions, and defining post-action responses.

Node configuration interface within the chatbot builder platform. The image showcases the user interface for configuring conditions, question prompts, answer options, mapping to specific actions, and defining post-action responses.

Conversation Simulator

The image displays a simulated chat interface where users can interact with the chatbot as if they were a real user. It includes features such as message inputs, bot responses, interactive buttons or menus, and dynamic conversation flows. This simulator provides users with a realistic preview of how the chatbot will engage with users in a live environment, facilitating testing, refinement, and optimization of the chatbot's performance.

The image displays a simulated chat interface where users can interact with the chatbot as if they were a real user. It includes features such as message inputs, bot responses, interactive buttons or menus, and dynamic conversation flows. This simulator provides users with a realistic preview of how the chatbot will engage with users in a live environment, facilitating testing, refinement, and optimization of the chatbot's performance.

The image displays a simulated chat interface where users can interact with the chatbot as if they were a real user. It includes features such as message inputs, bot responses, interactive buttons or menus, and dynamic conversation flows. This simulator provides users with a realistic preview of how the chatbot will engage with users in a live environment, facilitating testing, refinement, and optimization of the chatbot's performance.

The image displays a simulated chat interface where users can interact with the chatbot as if they were a real user. It includes features such as message inputs, bot responses, interactive buttons or menus, and dynamic conversation flows. This simulator provides users with a realistic preview of how the chatbot will engage with users in a live environment, facilitating testing, refinement, and optimization of the chatbot's performance.

Key Takeaways

As we progressed through the project, I realised that when faced with major challenges, our team tended to feel overwhelmed and confused. However, when we came together and broke down the tasks into smaller, more manageable pieces, we found success more quickly. Celebrating these small victories along the way not only lifted our spirits but also encouraged a sense of unity and accomplishment within the team.


As a designer, I made it a point to advocate for design at every opportunity. By consistently involving engineers, data scientists, and product owners in the design process and user research, I aimed to cultivate a design-centric culture within the team.

Let’s

work

together

I'm currently available for new work. Let me know if you're looking for a product designer. Let’s talk about the next big thing!

Design is everything!