ellipse
pattern
Feb 22, 2021

Chatbot Building: Design and Development Process

Sean Lazo
Sean Lazo

Principal UX Designer

Chatbot Building: Design and Development Process

Here’s how the [24]7.ai UX team partnered cross functionally—with product managers, developers, business executives, conversation designers, client managers, and more—to shape the product strategy, processes, and end-to-end experiences that went into creating the industry-leading platform for designing, deploying, and managing omnichannel, AI-powered chatbots: [24]7 Conversations.

First: Align Chatbot Development Platform with Company Mission

From the start, we made sure our product KPIs connected to the company's mission. This instilled purpose in our efforts, drove the vision, aligned our thinking, and gave us measurable goals. It unified our business, tech, and UX organizations into one team with one common mission.

Image 2


Outline Client Workflow to Include Chatbot Platform Optimization

We conducted user interviews to determine the high-level workflow of our clients’ operations—from consulting their business requirements all the way to optimizing their deployed chatbot.

Image 3


Map Previous Operations When Using Chatbot Building Platform

We thoroughly examined (interviewing practitioners, etc.) how [24]7.ai previously executed the chatbot platform building process. We produced a user journey map that highlighted the steps, tools, and various types of expertise required. The laborious, manual, and time-consuming former process combined [24]7.ai products, processes, and people with numerous dependencies, gating procedures, and dispersed tools.

Not surprisingly, this caused deployment delays and appeared to our clients as a slow process that failed to service timely business and customer needs.

Image 4

Single source of truth and integrated! It connects all of the tools together, allowing collaboration in the same place, and preventing duplicate work.

–Chatbot developer

Measure the Velocity of Chatbot Design Operations

We measured the velocities of each task, workflow, tools, and expertise. We analyzed real app deployments and interviewed practitioners and client managers to quantify process times. Then we simplified the operations into basic phases.

Image 5


Set Chatbot Platform KPI Goals

Post-UX explorations, technology assessments, and other predetermined factors helped us project our KPI goals. I've placed it here to compare with our old operations velocity above. You can see the improvements we were aiming to achieve. Formerly months-long processes would now be completed in days or hours.

Image 6


Determine Chatbot Platform Operational Problems and Needs

After analyzing and interpreting our current operations, identifying pain points, gaps, roadblocks, and dependencies, we defined our problems and user needs.

Building a Chatbot Builder: Problems

  • There is no easy way to build an app with the features we need in a self-serve, independent, and quick way.
  • We must rely on other teams to build a chatbot across time zones, which is an expensive and time-consuming process.
  • There is no easy way for us to determine if the application we build is working well.
  • There is no easy way to integrate with other applications since everything is in a silo, making it difficult to manage.

Building a Chatbot Builder: Needs

  • Enable chatbot builders and conversational designers to independently create, test, and deploy chatbots on their own to reduce effort and time.
  • Enable chatbot builders and conversational designers to easily preview, detect issues, and optimize.
  • Enable chatbot builders and conversational designers to design conversation flows, dialogs, logic, and models in one place.

Define Chatbot Building User Segments

We analyzed our user segmentations to determine which ones highly impacted our KPIs. We also examined our client organizations to determine which segments would use our products and services. We realized the conversation design process was meaningfully extensive, prompting us to optimize for this practitioner. Through our client user research, we also found that customer service experts and generalists were required to fulfill all necessary chatbot building tasks.

Image 7Image 8


Establish Our Vision for Client Chatbot Design Process

Here it is: A self-serve, integrated conversational flow diagram design tool that enables users to create conversational AI chatbots efficiently on their own.

  • Design a conversational flow with abilities to sequence, stitch, and build dialogs with rich content and interactions.
  • Automate the process of creating natural language and intent classification models when users create conversations.
  • Instant and automated app logic creation with capabilities to preview, test, and deploy the chatbot.
  • Complete self-serve, self-managed, all access, with no dependency on other expertise, or waiting for other associates to complete their work.
  • Single source of truth, one interface that manages all components of a project, with multiple user access and collaboration.


Unify Chatbot Platform Business, Technology, and Design

We brought together different types of expertise from various practices, so we collectively understood all the problems in creating a chatbot development platform, as well as the potential solutions. We conducted two Agile design sprints within two years of each other, leading to knowledge sharing, product alignment, and design prototypes. We used the prototypes to guide our product strategy and to build a real product in sprints.

Image 9


Anatomize the Conversational Chatbot Development Workflow

Image 10

We made it a mandate to directly connect to the hip and heart of our primary user base: Chatbot conversation designers. Every design effort required user interviews, consultations, concept testing, and usability and beta testing on everything from high-impact features to minuscule functional improvements.

We analyzed our chatbot conversation designers’ Jobs-To-Be-Done (JTBD), the tools they used, and the workflows for designing a conversational AI chatbot.

[24]7 Conversations is efficient! It will save us time in communication, modeling, debugging, designing, and building.

–Customer services manager

Define Principles of the Chatbot Design Experience

Testing analysis from the design sprint prototype, and the insights gained from our users, proved to be key product experiences that ensured acquisition, adoption, and retention.

  • Spatial relationship and readability of flow: relativeness, interconnections, sequence, visual organization, and hierarchy.
  • Visual signification of node types and rich content.
  • Intuitive interactions to navigate around, follow flow paths, and expand journey branches.
  • Principles of creating in the moment, in context, helps determine flow, dialog, and grammar considerations.


Examine Competitive Chatbot Platform Landscape

We examined our competitor service and tools. All vary in user base and focused on technical practitioners: developer-centric functionalities and workflows, with no graphical interfaces. We wanted to be more simple, provide clear separation between experts, visualization, multi-user/multi-environment, enterprise-grade lifecycle management, and integrated multi-modal and channels.

Image 11


Create Chatbot-Building Information Architecture

We created flow diagrams, user journey maps, user stories, and wireframes to illustrate the workflows, motivations, tasks, high-level flows, site maps, and features. This helped us align our technical and business requirements with our stakeholders. We focused on holistic product strategy, core functionality, and kept it high level.

Image 12


Execute a Phased Agile Approach to Chatbot Development

We defined the MVP through a series of phases and product releases that ultimately led to our full-fledged, mature product vision. We prioritized our feature roadmap based on scope, need, and feasibility of the chatbot building capabilities, interface design, and technology constraints. This was the implementation and detailed design stage: Designing micro-interactions, user testing, and working with the development team to implement.

Image 13


UI Chatbot Builder Development Designs


AI chatbot development

Image 14

Conversation flow designer

Image 15

Chatbot response editor

Image 16

I love the aesthetics! It’s sleek and clean. The visual flow helps to see contextual paths and is easy to use.

–Conversational designer


Calculate and Measure Chatbot Platform ROIs and KPIs

The manual development processes for building a complex chatbot app's SCXML, QA, APIs, model creation, architecture, and project management took roughly 315 hours (an estimate quantified by previous chatbot deployments). The newly designed tool automated and streamlined these processes through new architecture and interfaces, dramatically reducing the development time to 48 hours (measured by a real client deployment).

This is an 85 percent decrease in time to build.

The previous deployment process for generating, testing, and then publishing a fully interactive chatbot app to the client's website initially took four weeks. The newly designed tool automated and streamlined these processes through new architecture and interfaces, reducing the deployment time to 15 minutes at the most.

This is a 99.9 percent decrease in time to deploy.

Once a chatbot is deployed and containment rate is analyzed, a designer needs to enhance the conversation, which previously took eight weeks to increase the containment rate by 8 percent. With faster build and deploy times, a designer can reach the same containment rate increase in one week.

This is an 87 percent decrease in time to boost containment rate.

We calculated client monthly spending on professional services, which provided internal practitioners to build, design, and deploy a chatbot for them. The migration and adoption of [24]7 Conversations mitigated the need for professional services as the tool automated most of these processes and workflows. This contributed to a 50 percent cost reduction in client spending, amounting to tens of thousands of dollars in savings.

Image 17

Calculate Potential Chatbot Platform Improvements

Our users faced significant obstacles and delays including ramp-up and training, app performance bugs, and workflow workarounds requiring manual processes. We have already planned features and fixes to alleviate these issues, some in the backlog, and a few that were newly identified. Backlog features have increased in priority, and we’ve created tickets and prioritized the newly identified ones. We estimate it cost an additional 16 hours of our users’ time to build and deploy.

If all issues are fixed, we will reduce our time to build and deploy by 34 percent.

Product Outcome Success

  • Successful porting of existing client chatbot app deployments
  • Client acquisition and adoption
  • 50% monthly cost reduction for clients
  • Decreased time to build by 85%
  • Decreased time to deploy by 99.9%
  • Decrease time to containment rate increase by 87%


Conclusion

An extensive, meticulous, and strategic service design process helped us understand our users, the problems we needed to solve, the jobs to be done, business goals, and technical opportunities, all of which led to a great product vision and user experience. Keeping things simple, efficient, and optimal for our users is a key competitive advantage and differentiator. Enabling a self-serviceable, quickly accessed, and independent product is key for our clients to meet the needs of their customers.

Related Posts

Ethical Issues/Factors in Chatbot Personality Design
Jan 12, 2021 Too Human for Humans: Ethical Issues in Chatbot Personality Design

Let’s dive into some of the…

How to Design Your Conversational AI Chatbots
Jan 8, 2021 Design Automated Live Chats with Conversational AI Chatbots

Armed with the latest natural…