Contribution: Chatbot / Conversational UI Pattern

[vincentsnagg]

Hello Carbon! 👋🏽 In Watson Health, we've been working on conversation design standards (content, UX, and visual design) for healthcare products, as our product teams were building bots and reinventing the wheel with each new bot. Not too long after this work started, we realized that while much of the content design guidance is specific to healthcare, the UX and visual guidance we were providing is not, and could be leveraged by other teams interested in using conversational UIs. From day one, we've worked to ensure that the visual guidelines follow the IBM Design Language and that it would be built with accessibility in mind (a huge problem in chatbots today). With all this said, it feels like the perfect candidate to further flesh out Carbon's portfolio of patterns!

Name of pattern

Chatbot / Conversational UI

The research supporting and reasoning behind the proposed change

Chatbots or bots have become an increasingly popular way to solve common business problems across domains, including.

• providing in-context help and guidance (e.g., scaling a company's FAQ or providing UI guidance)
• triaging or setting priority of cases by soliciting information from the user to decrease workload on humans (support tickets, patient symptom severity)
• performing common tasks or procedures (e.g., pay a bill, transfer money, or assist with electing health benefits)
• using natural language to search for information (e.g., find information specific to domain database, such as dosing instructions for a medication)

Problem: As these bots have proliferated recently, so do the inconsistencies between them when it comes to conversational UIs. Here are just a few examples of this ..there are a LOT more internal examples, across business units:

Proposed Designs

These proposed designs contain several new components within it, in addition to pattern guidance. They are the product of feedback from and iteration with Watson Health product teams, the Watson Assistant team, the Watson team, and Mike A. + IBM Design Language Core team

"Carbonized" Chatbot Components (i.e., symbols created for all 4 Carbon themes)

• Regular / Tight Chatbot Window
• Chatbot Header
• Messages
  • Watson Message
  • User Message
  • Structured Responses
• Chatbot Text Input

In Progress

• Chatbot Tile / Card Variants
• Launch Button Variants
• System / Message Sent Error (e.g., offline)
• Multi-thread Chatbot Header Variants

Here's a preview of how these main chatbot components start to come together. All chatbot components are spec'd within our Sketch files:

Components / Static Designs

Regular + Tight Variants Across all Carbon Themes (see below)

Chatbot Window

Watson Message

User Message

Structured Response

Chatbot Text Input

Flows

Primary Flow: Requesting Information Via Chatbot (All Components Carbonized)

Multiple Threads (WIP)

Launching Chatbot Window (WIP)

Proposed Pattern Guidance

A pattern needs usage guidelines, and my team has content we'd love to propose that falls into these buckets:

1. Overview
   • Pattern Value, Target Users, User Needs
   • Common Use Cases
2. Pattern Usage
   • Design / Content Elements
     • Sub-components usage / variants
   • Practical Applications
   • Related Patterns / Components

Links

Design

• This Sketch file contains contributions from myself (Watson Health), Emma Sainz (Watson), Danielle Demme (Watson Assistant): https://ibm.box.com/s/9z9fi5nnynotn2g4eq2h6y84w9fnt8ji
• Chatbot symbols applied across all Carbon themes contributed by Jane Depgen (Watson Health) in Carbon Add-on Sketch file within Watson Health Abstract: https://share.goabstract.com/a6d6961c-2b20-41c2-a05c-0e948490811d
• We are expecting motion design contributions from Zak Crapo, Maui Francis, and Shixie

Development

• At the moment, Watson Health has several competing priorities (and we have very limited development resources). We have made some progress on a static, accessible, fully styled version of the chatbot component (no JS), which would be completed sometime after Q2. At the moment, the scope of this work only contains Chatbot Header, Watson Message, User Message, Structured Responses, and Text Input and would need to be revisited. Additionally, we have also started conversations with the Watson Assistant development team to align on accessible HTML structures (to ensure we are not reinventing the wheel) and their use of Watson Health's testing suite.

Internal Github Link: https://github.ibm.com/Watson-Health/design-library/issues/258

Names of the contributing designer(s) & developer(s) working on this contribution

Design

Vincent Snagg, UX Designer Watson Health Public GH: vincentsnagg; Internal Slack: vincent.snagg; Internal email: vincent.snagg@ibm.com

Emma Sainz, Design Director for IBM Watson Internal Slack: emma.sainz; Internal email: emma.sainz@ibm.com

Development

Liz Judd, User Interface Architect, Watson Health Public GH: elizabethsjudd; Internal Slack: liz.judd; Internal email: liz.judd@ibm.com

Scott Nath, System Architect, Watson Health Public GH: scottnath; Internal Slack: snath; Internal email: snath@us.ibm.com

[designertyler]

Hi, @vincentsnagg thanks for proposing this content. I think this would be a great addition to Carbon and will reach out to schedule a meeting to figure out next steps.