Elvia Vasconcelos, Experience Design for Chatbots

If I was to start a new chatbot project tomorrow I would ...

Elvia Vasconcelos Senior Designer @SapientRazorfish_

@ElviaVasc

Elvia Vasconcelos @ElviaVasc

Hola


Context

GoalA practical toolkit ---> If I was to start a new chatbot project tomorrow I would...

ContextDiscuss UX tools and methods in the context of conversational interfaces.

Secret project3 x Sprint Chatbot POC

Talk@LadiesThatUX meetup

Internal talks@SapientRazorfish_ 2x

You are here


Agenda

1. Before you start

2. Understanding Artificial Intelligence

3. Tools

4. Interaction Design

5. *Bonus* Challenges for you

Elvia Vasconcelos @ElviaVascElvia Vasconcelos @ElviaVasc

Before you start


Designing for Chatbots Part I


Be critical


Team

No content strategist or copywriter


What is the problem you are trying to solve?


Understanding the field of AI


Developer


Glossary on evernote

https://www.evernote.com/Home.action#n=bd3d433b-79be-43b6-a8ba-47e35c6f3072&b=cd7557e9-ea91-4646-af75-3b8da5b2ffc4&ses=4&sh=1&sds=5&




Come up with an Intent structure as a team


ID IntentUser says Action Response Contexts

“Example”Natural language

@Entity @Event Action name

Parameter value

Text response Rich Message

Image Card Quick reply

A2 “How many hours of sleep did I get last night?”

@sleep...

- Sleep Time

timeunits - Hours, minutes, seconds

“Last night you got <hours of sleep> of sleep.”

- - More nights

Add “example” synonym

Add Entity synonyms e.g. Snooze, rest, time in bed, nap, doze


ID IntentUser says Action Response Contexts

“Example”Natural language

@Entity @Event Action name

Parameter value

Text response Rich Message

Image Card Quick reply

A2 - Morning<rules>

Sleep Time

same Morning, Alex. Hope you are feeling rested, you slept 10 hours yesterday.

- - - Last nightFirst opening app


Tools


Process is led by copy and logic


Tree map Excel for copy :( Js file to update copy

Artifacts


Popular bot tools

https://www.motion.ai/ - visual �

Bot.store - templates

Botkit Studio - Content Management, Libraries

and analytics

Chatfuel - facebook messenger no coding

Twine - OpenSource, stories

Wit.ai - NPL

Api.ai - NPL

Botwiki - Catalogue of bots, tools and tutorials

Botlist - Catalogue of bots

Tools on evernote

1. Bot tools

https://www.motion.ai/

https://www.motion.ai/

http://bot.store/

http://bot.store/

https://howdy.ai/botkit/

https://chatfuel.com/

https://chatfuel.com/

http://twinery.org/

http://twinery.org/

https://wit.ai/

https://wit.ai/

https://api.ai/

https://api.ai/

https://botwiki.org/

https://botwiki.org/

https://botlist.co/

https://botlist.co/

https://www.evernote.com/shard/s535/sh/966ab3b1-3a76-44e0-889b-2f43bf22e5fa/2806ab550c3c70df6daddb616f2fc794

https://www.evernote.com/shard/s535/sh/966ab3b1-3a76-44e0-889b-2f43bf22e5fa/2806ab550c3c70df6daddb616f2fc794


Popular decision tree tools

Omnigraffle

Xmind

Coggle

Mindnode

iThoughtsX

*Bonus*

Visual vocabulary + legend

Highlight paths e.g. happy path, user testing,

what is built, sprint planning

2. Decision tree tool

Jesse James Garrett Visual Vocabulary

http://www.jjg.net/ia/visvocab/




Popular writing tools

Omnioutliner

3. Writing tool


Pick your tools (have some alternatives up your

sleeve)


Interaction design


Basics first


Interaction Design

1 Starting the conversation & Empty states

2 UI Elements

3 Generic intents


Starting the conversation

Empty State

What are the barriers to starting a conversation?


Starting the conversation

State a clear purposeExplain how to use it


Design for empty states

http://emptystat.es/


“A good empty state is clear, concise and prompts users to take action in a

meaningful way”@nancyduan “Designing Conversational UI with Information Architecture — Part 4”

https://chatbotsmagazine.com/designing-conversational-ui-with-information-architecture-part-4-1043d21f19cf#---0-91





Experience design challenges


2 UI Elements

3 Generic intents


Text elements

Source http://blog.invisionapp.com/guide-to-chatbots/

http://blog.invisionapp.com/guide-to-chatbots/


Media elements

Source http://blog.invisionapp.com/guide-to-chatbots/

http://blog.invisionapp.com/guide-to-chatbots/


Motion

Typing indicator Autocomplete (when appropriate)

https://cdn-images-1.medium.com/max/800/1*7vRLz94TXIf8JNTEdFWwuw.gif

https://cdn-images-1.medium.com/max/800/1*7vRLz94TXIf8JNTEdFWwuw.gif

https://slackhq.com/11-useful-tips-for-getting-the-most-of-slack-5dfb3d1af77

https://slackhq.com/11-useful-tips-for-getting-the-most-of-slack-5dfb3d1af77


UI Elements

Type here

CardsImages, gifs, PNG

Action buttons

Text replies

Quick replies

User says

Menu & Type


Create a library of UI elements (and think of motion)


Experience design


2 UI Elements

3 Generic intents


Generic intents

Errors

Help

Recovery


Errors

Design for errors


Help

Offer help If at any point you feel the need to speak to someone, you can do so via:- Chat to a live agent- Call- Email

I need to speak to someone


Recovery

Offer ways to start againAt the endAt the endIdle for x minutesWhen request has been IdentifiedBefore you startDuring

Any other thing I can help you with?

NoYes

Allright. See you next time

Ask me anything by typing simple keywords.


Plan your sprints with a balance of generic intents and specific intents


Wrap up


What is the problem you are trying to solve and why is a conversational interface the right fit?


Understand key concepts on AI + Intent structure


Pick your tools


Nail the basics first


Clear, concise and actionable empty states


Create your UI Library


Balance of generic + specific intents


*Bonus*Challenges for you


Is this enough?#ClassicUXResearch5 users every 2 weeks

HypothesisCompletion rateSatisfaction rate


Discovery for voice


Designing generative systems


Thank you!

Twitter

@ElviaVasc

Email

[email protected]

Instagram

Sketchnotes_are_awesome


Get in touch

Twitter

@ElviaVasc

Email

[email protected]

Instagram

Sketchnotes_are_awesome

Elvia Vasconcelos, Experience Design for Chatbots

Design

Transcript of Elvia Vasconcelos, Experience Design for Chatbots