Here's how [24]7 Conversations transformed over time to its most optimal interaction model today. Product strategy constantly has shifted due to: persona focus, new jobs to be done, competitive strategy advantage, feature priorities, technology, workflow, dynamics, and client requirements. As these evolved, the UX pivoted to satisfy new user needs and technical requirements. This is a case study and chronicle on the previous thinking, pros and cons, and the UX evolution of our conversational AI chatbot build and design tool.
Preface
Being the sole design lead on this project required many rigorous reviews, design explorations, and testing. The challenges I faced were: working within the time constraints and rapid velocities of Agile sprints, the technical limitations, and the abundance of feedback and resources to manage and maintain. But these challenges gave focus to priority, having an MVP, building outputs, and constant feedback loops and iterations. It allowed me to move fast and make the appropriate adjustments, while delivering tangible products.
Background
I've detailed my process for conducting the Service Design framework, defining challenges, and establishing key experience goals for our target users which can be found in the articles listed below. These articles will also help you understand the problems, user segmentations, and business & technology goals:
Service Design Transforms [24]7.ai's Bot Building Operations. Here, you will find foundational research that helped guide the UX strategy for the interface design displayed in this case study.
6 Key Principles on Designing The Optimal UX for Conversation Designers. This is a great article to understand the user mindsets that ultimately shaped the UX.
Mission
To ensure we design and build the most optimal chatbot building user interface, implement a user-centric, explorative, and iterative process.
Evolving the user interface through exploration and validation will lead to a robust and tested productivity solution that enables conversational designers to build AI chatbots efficiently.
Interaction paradigm evolution
Design 1: Repository
We identified that our internal operations for chatbot creation required many various tools, processes, people, and files. Lots of moving parts, lots of artifacts floating around, things moving in parallel, and no visibility into who was doing what, when, and where. Conversational designers would essentially use tools like XMind or OmniGraffle to design conversational flows and bot responses, then upload their outputs to this tool.
What it solved
Dispersed artifacts, people, and processes are now centrally located in one place as a single source of truth.
Visibility into progress, jobs, and dependencies is now apparent through a dynamic checklist, that also displays required steps for creating a chatbot.
What we learned from concept tests with users
There is still a dependency on many other practitioners; required inputs and artifacts from other expertise. Elapsed times for waiting is long.
This still requires manual processes to create the chatbot SCXML with the provided materials that are uploaded.
This didn't optimize any design tasks, designers still have to create in other apps.
No view into what intents the chatbot is solving for. Users want to know at a high-level what the chatbot's purpose is.
Design 2: Form-based
We then supported some data input functions that allowed the conversation designer to enter bot responses along with some rich text capabilities. We also provided a list of the intents the bot needed to fulfill as a display for content management and organization. At this point, we also streamlined and automated dependency processes like model creation and SCXML logic building, so conversational designers can build on their own and also accelerates the time deploy.
What it solved
A shared list of intents the bot needs to support, so users can quickly see what content is there. This also made it easy to search and organize intents, as it included multi-level categorization folder capabilities.
Edit, manage, and create bot content in the tool, reducing the need for other 3rd party external tools. Changes can be made on the spot and wouldn't require additional files, opening of files, parsing of files, and rebuilding.
Automated processes means no dependencies on other practitioners to build the bot. Models are generated, app logic is automatically coded.
What we learned from concept tests with users
No preview of actual chat deployment. Users want to test how their bot responses and conversational design looks and feels to the end-user.
Design 3: WYSIWYG editing
We took it a step further by evolving to a 'What You See Is What You Get' visual interface and mental model for the conversational designer, enabling them to visualize how end-user messages and bot responses appear together in a chat window. Users can choose which utterance to preview in the chat message.
What it solved
Provides a visual guide on what the end-user would experience since it displays chat bubbles for the end-user utterance and the bot response. This helped with guidance on sentence structure, reducing long messages, and chunking information.
A list of user utterances in a panel allows the designer to manage and select to preview what an end-user will say to initiate the bot response. The utterances helped guide designers to construct the best broad bot message that would be appropriate to all use cases.
A designer now has access to preview the bot. The system automates the creation of the bot app and is readily available to be tested by the designer within minutes.
What we learned from concept tests with users
Though the chat message bubble was a good visualization, it still lacked rich content additions and other response supported functionalities like media content (images, videos), quick replies, and cards.
The user utterances displayed in a chat message bubble wasn't very useful since that was going to be uncontrolled, but a list of utterances was sufficient since it displayed all items in a linear list giving the designer an easy way to scan and generalize.
Design 4: Response construction
We added rich content support functions to the bot response edit interface, enabling designers to fully create robust and detailed bot responses. We eliminated the user utterance message bubble and also made the intents list interactive with enabling/disabling features to control what is displayed in the chatbot run-time to the user.
What it solved
Lack of rich content functionality is now supported so conversation designers can create detailed and smart bot responses.
Run-time bot behaviors can now help the user move through a conversation faster with functions like quick replies, images, cards, and other features.
Designers can enable and disable intents through the intents list, making managing intents easier and enable parallel drafting aside from the published chatbot.
What we learned from concept tests with users
Designers couldn't parse connections, flow relationships, journey sequence, multi-turn intent solving, and bot responses.
There was no visualization of how bot responses were relative to one another.
Design 5: Flow-based
We added an interactive diagram visualizer showing bot response names and connection lines from one node to others in a diagram tree. The user can click on each node to expand its conversational tree. They can zoom in and out, drag to move the diagram, and click on elements to focus and edit. Building this from the ground up would've increased scope, so the development team had leveraged an open-source react component to set as our foundation, then build upon and customize.
What it solved
Designers can now see the sequence and flow of a conversational journey map helping them to make key design decisions like adjusting order, identifying needs for new use cases, creating new bot responses, and reusing content across the conversation.
Easy navigation to locate bot responses with zooming capabilities and easy drag and swipe interactions to scroll the diagram.
A graphic visualization makes the experience more engaging, fun, and dynamic.
What we learned from concept tests with users
Designers had difficulty parsing node names and didn't know what the content was at first glance, making it difficult to look for and determine responses and journeys.
Users instantly interacted with the flow diagram, defaulting to using it as their navigation for viewing and locating content.
Design 6: Expanded flow
We evolved the nodes in the conversational flow diagram to include the content along with the node names, and other indications of rich content that is applied. The left panel list of intents was deemed unnecessary since users primarily used the flow to navigate. We expanded on the node detail to include an optimal editing mode for each bot response.
What it solved
Seeing the content (bot response) displayed with a name and icons for rich content applied helps designers easily find and identify nodes at a quick glance and understand where content is.
Seeing the content displayed in a node helps designers understand the sequence of the conversational flow, leading to more optimizations.
Eliminating the left panel list gives more breathing room and space to interact with the flow diagram. It also minimized the navigational redundancy and simplified the UI.
A robust editing mechanism for bot responses gives the designer the optimal tools to build robust messages.
What we learned from concept tests with users
The squiggly connection lines between nodes appeared too jarring and nauseating to users.
The UI, although functionally dynamic, appeared stale, plain, sterile, boring.
Node icons for expanding conversational trees had discoverability and affordance usability issues.
Design 7: Visual enhancements
We designed the connection lines to be straight, symmetrical, and conformed to a strict grid. We enhanced node icons to be more clear, updated the visual look and feel, and added some color to the flow diagram.
What it solved
Users feel a sense of maturity, professionalism, and trust since the tool looked nice, clean, and simple.
Expanding folders within the flow didn't require any extra cognitive load since the icons were straightforward.
Users feel relaxed since the connection lines were structured and organized cleanly.
What we learned from concept tests with users
Designers found the experience to be intuitive and efficient.
There will always be more desired optimizations and ways to evolve the interaction model even more. As behaviors, workflows, and needs are changing over time, the interface will need to adjust and accommodate.
Summary
Constant exploration, user concept testing, competitive analysis, bad ideas, and expert consultations, all led to better ideas, optimizations, and evolved thinking and designs. We learned as much as we engaged with our users and further explored as we went. Design is an iterative process and the outcomes are reflected by our willingness to keep on improving our UI. The ability to emphasize with users, connect insights, and foresight vision will always lead to good design outputs. The product will continue to evolve as user behaviors, workflows, and expectations change.
About the author
Sean Lazo is a Principal UX Designer at [24]7.ai who leads the inception, assembly, and design of [24]7.ai Conversations, an industry-leading omni-channel AI chatbot SAAS platform. His passions are DesignOps, detailed design, research, and human relations.
Comments