Conversational UI: How to walk the talk

1Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary

Stephen Gay & Kay Viswanadha

Conversational UIHow to Walk the Talk


Conversational UI 101

Introduction

00


KAY VISWANADHA

Design Strategist

QuickBooks

@KayViswanadha

STEPHEN GAY

Global Director

QuickBooks

@stephengay


We are designers designing conversational

experience for our customers.

We are not experts in natural language.


What products does Intuit make?

Just show the logos

OK, now?

Shouldn’t you know?



So how do we innovate?

What’s D4D?

D4D

Design for Delight



Lets talk about conversational UI.


Conversational Experience

Interacting with your brand or

product using natural language,

kinda like communicating with

another human.


Why users careUse their own words (simpler)

Shorter, focused path (perceived faster)

Natural interactions (magical)

“Text Jenny I’m running

a few minutes late, see

you soon.”


Command Line

Interface

(CLI)

Time

Te

ch

no

log

y

Voice User

Interface

(VUI)

Graphical UI

(GUI)

Conversational UI

(CUI)

Chat

Interface

Chat

Bots

Voice User

Interface

(VUI)

INTUIT

IS

HERE


“Microsoft’s speech

recognition accuracy is

now just as accurate

as humans.”

Oct 2016

“Google Home can identify &

personalize experience for up

to six voices.”

Apr 2017

“Facebook plans to double

down on chatbots.”

Apr 2017

“Amazon Lex, the

technology behind

Alexa opens up to

developers.”

- Apr 2017

Conversational experiences

Investment & innovation

“Apple Business Chat

aims to steal chatbots'

retail thunder”

- Jun 2017

“IBM Watson’s natural language

understanding technology uses both

words & context to deliver a near-

instant translation.”

- Jun 2017


01Conversational UI

customer journey

03Designing a

conversational UI.

Enhancing a

conversational UI. 02


Determine conversational context.

Conversational UI customer journey.

01


Conversational experiences….

Leveraging voice interactions (VUI) and

chat based interactions (CHAT UI)


Family time

VOICE INTERACTIONS (VUI)

HANDS FREE,

NATURAL

INTERACTIONS: We

can speak 3 to 4

times faster than we

can type.


CHAT BASED INTERACTIONS (CHAT UI)

FAMILIAR INTERACTIONS

More than 2.1 billion users today

use a social messaging app

- Portio research


Step back into customer benefit & customer journey

OK,


YOUR CUSTOMER JOURNEY- (very) high level

Discover Setup First benefitRe-use & follow up

Users become aware of

your product/ service &

understand how it works,

how they could benefit from

it.

Users enter data to create

account, configure settings

and customize features.

Users experience at least

one key benefit, that

delivers the value of your

product/ service.

Users continue to engage

with your product/ service

& experience the benefits.

BENEFITAchieved when the user

completes one or more

jobs.

JOBA core function of the users’

business made up of several

individual tasks.

TASKSThe small pieces of functionality or

tasks a user must complete in order to

achieve a micro-benefit.

CUSTOMER


VOICE & CHAT UI IN DISCOVER PHASEDiscover & Understand

“Alexa, what

can you do?”

VOICE

Advantages - Get a specific question addressed

more easily

- Focused conversation & limiting

number of choices lends speed &

confidence to decision making

What’s lacking today- May not be obvious to user that they

can initiate conversation

- User has to know what to ask and

how to ask

- Cognitive load to process voice

response

- User misses out on ambient content

CHAT UI

Advantages- Same as Voice +

- Augment experience by moving from

bot/ system to human on the other

side of the conversation

What’s lacking today- Could be perceived slow- only get

responses to the questions you ask

- Responses could end up as “walls

of text”.

- User misses out on ambient content

Discover phase: Users become aware of your product/ service & understand

how it works, how they could benefit from it.


Set up

VOICE

Advantages- Handy when user situation requires

hands-free set up

What’s lacking today- Data entry (e.g. email address,

password etc.) is difficult

- Cognitive burden involved in

selecting from multiple options

- Privacy & security concerns

- Tunnel vision- can’t see what’s the

extent of setup, what’s next

CHAT UI

Advantages- Humanize set up- Eliminate context change by enabling

user to transition to setup from

discover via chat UI

What’s lacking today- Security concerns around entering

data to create account

- Chat UI could make it awkward to

process choose between options

related to set up

- Tunnel vision- can’t see what’s the

extent of setup, what’s next

- Feels slow

Setup phase: Users enter data to create account, configure settings and customize features.

VOICE & CHAT UI IN SETUP PHASE


First Benefit

“OK Google, what’s

traffic like near work?

VOICE

Advantages- Elegant interaction for simple create

or do (gopher-like) tasks

- Get to first benefit via user’s

preferred words, in place of first

absorbing your IA/ nomenclature

- Provide guided task flow

What’s lacking today- Doesn’t work well for first use tasks

that involve data input

- Difficult to introduce user to next

tasks & benefits

- Might feel like “blank slate” to some

users

CHAT UI

AdvantagesSame as voice +

- Can work for simple tasks that

require data input

What’s lacking today

- Inefficient for first use tasks that require

data input

First Benefit phase: Users experience at least a part of key benefit promised by your

product/ service.

VOICE & CHAT UI IN FIRST BENEFIT PHASE


Re-use/ follow up

VOICE

Advantages- Command & done!

- Convenient shortcut for frequent or

recurring tasks, also personalized

based on history

- Great for specific info/ data look up

and data analysis tasks, that are

either buried or not accessible via

app navigation

- Add an interpretation narrative over

data to help user

What’s lacking today- Difficult to present related tasks

- Doesn’t work as well for recurring

tasks that require data input e.g.

create an invoice

CHAT UI

Advantagessame as Voice +

- some opportunity to introduce related

tasks

What’s lacking today- Doesn’t work as well for recurring

tasks that require data input e.g.

create an invoice

“Alexa, ask Capital

One what’s my

balance”

Re-use & Follow up phase: Users continue to engage with your product/ service &

experience the benefits.

VOICE & CHAT UI IN RE-USE/ FOLLOW UP PHASE


Let’s try a worksheet.


FIRST BENEFIT REUSE & FOLLOW-UP DISCOVER SETUP

TASK

LIST THE SMALL TASKS

THAT LADDER UP TO THE

OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

UXJOURNEY

CUSTOMER

A description of the customer

JOB

A core function the user wants to

complete, made up of several tasks

BENEFIT

What the user achieves when they

complete one or more jobs

TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

CUSTOMER JOURNEY

Consumer Get a Ride Travel from A:B

Hear from friend

Search for app

Download the app

Create an account

Enable geo locationLearn about app

Understand benefit Add credit card

Open the app

Enter destination

Select ride type

Wait for driver

Take the ride

Pay for ride

Rate driver

Review payment history

Repeat a ride

Lost item

L L

L L

L M

L L

L M

L L

M M

L M

H H

M H

H H

H H

H H

H H

L M

M H

L L

M H



TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

UXJOURNEY

CUSTOMER


JOB



BENEFIT



TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

CUSTOMER JOURNEY

Small business Invoice customers Get paid

Search for app

Learn about how it works

Understand benefit

L L

L L

L M

M MRecurring invoice support

Download the app

Create an account

Set up your company

L M

L L

L L

Set up invoice template L L

Open the app

Enter client info

Enter service line items

Enable online payment

preview invoice

Send invoice

Track client activity

on invoice

Review invoice

Edit invoice

Remind client

H H

L M

L M

H H

L L

H H

H H

L M

H H

H H

Set up payments account L L

Resend invoice H H

Record payment L L



TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

UXJOURNEY

CUSTOMER


JOB



BENEFIT



TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

TASK



OVERALL JOB

RATE LOW, MED, HIGH

OPPORTUNITY

VOICE CHAT

CUSTOMER JOURNEY


Step

• Write down customer journey tasks.

• Evaluate each task- high, medium, low for VUI and Chat.

• Debate and discuss.

10 mins Try

10 mins Share


Did everyone land somewhere here?

Discover Setup First benefitReuse & follow up

LOWVOICE

MEDIUMCHAT UI

LOW

LOW

LOW

MEDIUM

HIGH

HIGH


• Consider the entire customer journey when

selecting Chat UI or Voice UI.

• Chat UI and Voice UI is typically optimized for

reuse / follow-up phase in the customer

journey.

Conversational

UI customer

journey


Let’s take VUI and CUI to the next level.

Enhancing aconversational UI.

02


Quick recap of pros/cons of voice & chat UI

OK,


VOICE

(VUI)BENEFITS

Hands-free, natural

interactions

CHALLENGES

Not suitable for tasks that

require visual guidance,

user input or involve

many choices.

CHAT UI

BENEFITS

Familiar, focused

interactions

CHALLENGES

Cumbersome for

experiences that require

intense user input

Challenges

center around

User Input &

Data Input


User Input/ Utterances

“OK Google, news

briefing”

“OK Google, remind me

to call ……. in 3 days”

“OK Google, ask

Spotify to play Adele’s

Send My Love”

Variability example


Data input via voice and Chat UI

Types of data input VOICE CHAT UI

On/off (checkbox, switch)Easy Easy

Select one or multiple from options

offered (radio options, dropdown

menus, checkboxes, cards)

Difficult

(cognitive load with visual aid)

Difficult

(presentation of choices)

Structured fields (dates, currency etc.)

Difficult

(inconsistent voice recognition

performance)

Easy, but could be tedious when

multiple fields are involved

Text fields with variable data (email

address, people names, addresses)

Difficult

(voice recognition of variable data)

Easy, but could be tedious when

multiple fields are involved


Data input > Chat UI is better than voice for some types of input

VUI is hard, but

Chat UI is great for variable data

like an address, because it’s easily

validated as typed.


Data input/ but chat UI can get cumbersome too…

Chat UI to create invoice is inefficient

for data input.

Needed input

- Customer info

- Project info

- Line items to detail products sold

and/ or services rendered

- Payment methods & terms


Taking conversational experiences to the next level


MULTIMODAL

What is multimodal?

Advantages of multimodal experiences


MULTIMODAL

Multimodal- combining two or more modes of interaction

Leverage advantages of voice or

chat based interactions, and

compensate for weaknesses

through visual interface or GUI.


MULTIMODAL EXAMPLES

Enhancing voice interactions

with visual interface

Amazon Echo Show (coming soon)

simplifies interactions with video

calling & touch screen


MULTIMODAL EXAMPLES



Siri simplifies interactions with

visual confirmation

User can tap or speak to confirm or

edit request


MULTIMODAL EXAMPLES



Hound app – only voice input,

Responses are voice + visual


MULTIMODAL EXAMPLES

Enhancing chat interactions

with GUI widgets

Ozlo app (Chat UI based) –

- uses cards with visual content to present

options

- carousel to deliver additional content

- images to present options (also helps with

monotony and homogeneity of text)

- guides conversation with suggested response

buttons


Penny app (Chat UI based)-

User can switch between GUI & chat UI,

based on their preference & goal

MULTIMODAL EXAMPLES

Enabling switching between

chat UI & GUI


PLATFORM

Why does the platform matter?

What are the advantages?


CHATBOTS ON MESSAGING PLATFORMS

Examples: Facebook

messenger, Slack, Kik, Skype

Examples: Amazon Echo, Google Home,

Siri (limited), Cortana

VUI PLATFORMS


PLATFORM ADVANTAGES

- Meet customers where they are

- Leverage user’s platform profile, geolocation,

payment method etc. for faster user interactions

- Faster design & development

- Great extension of your experience for certain

conversation types (pre-sales, customer service)

- Bring value to group conversations

- Benefit from platform investment in external

developer experience

OTHER CONSIDERATIONS

- Limited to how open the platform is &

capabilities

- How does platform presence intersect with

your app & brand experiences?

- Discovery & voice command recall

- Setting the right user expectations related

to domain coverage




CUSTOMER JOURNEY

UXJOURNEY

CUSTOMER


JOB



BENEFIT



TASK

List the small tasks that ladder

up to the overall job

Narrow to a specific

conversational UI

RATE PLATFORM

Advantages for leveraging an existing

conversational UI platform.

MULTI-

MODALHow to leverage a multi-modal experience to

increase the customer experience.

USER INPUT

What is the Language variability. Simple data

input, known data commands

VOICE CHAT

LIMITATIONS

What issues limit a great conversational UI

experience.

Consumer Get a Ride Travel from A:B

Open the app

Enter destination

Select ride type

Wait for driver

Take the ride

Pay for ride

H

H

H

H

H

H

Fixed app name

Complex data (i.e. address

name)Ride type needs additional

data, such as price

Known data (i.e. time and

distance)

Known data (i.e. duration,

distance.)

After first use, credit card

Is available for repeat usage.

Select one

Text fields with variable data

Select multiple from options

Text fields with variable data (i.e.

driver name, and car)

N/A

N/A

N/A

Supplement ride type with

visualization

GUI for data visualization

GUI for data visualization

Pay for ride

N/A

Partner with a map provider and

OS for location data)

N/A

N/A

N/a

Partner with a platform for

Updated credit card information

Supplement location for

simple input confirmation.


CUSTOMER JOURNEY

UXJOURNEY

CUSTOMER


JOB



BENEFIT



TASK




conversational UI

RATE PLATFORM



MULTI-



USER INPUT



VOICE CHAT

LIMITATIONS


experience.

Small business Invoice customers Get paid

H

L

M

M

H

H

Selecting client name

Recording customer’s credit card

or check info

Review invoice summary & activity

easy/ invoice details complicated

Identifying invoice fields & updating

them could be complicated

Client name complexity, multiple

clients with same name etc.

Validated, structured data input,

PCI compliance

N/A

Update one or many invoice fields,

text fields with variable data

Text field with variable data

Confirm resend invoice

For multiple clients with same

name, GUI to confirm client

Supplement with preview

GUI/ editable invoice view

Invoice summary with reminder

note attached/ ready to send

Invoice summary/ ready to send

N/A

N/A

N/A

N/A

N/A

N/A

GUI/ enter payment info

Track client activity on invoice

Review invoice

Edit invoice

Remind client

Resend invoice

Record payment

Small businesses may include a

note when reminding client

N/A


CUSTOMER JOURNEY

UXJOURNEY

CUSTOMER


JOB



BENEFIT



TASK




conversational UI

RATE PLATFORM



MULTI-



USER INPUT



VOICE CHAT

LIMITATIONS


experience.


Step

• Narrow to a specific customer journey step.

• Consider the opportunity for language variability,

multi-modal and platform

10 mins Try

10 mins Share


• Identity early the limitations of User Input &

Data Input for Chat UI and Voice UI.

• Leverage advantages of voice or chat based

interactions, and compensate for

weaknesses through visual interface or GUI.

• Leverage a platform to enhance the

conversational UI.

Enhancing a

Conversational

UI


Principles and methods to design a conversational UI.

Designing a conversational UI.

03


We know our target CUI or VUI

We know the opportunities to take to the next level

Now let’s talk about PRINCIPLES and PROTOTYPING.


Principles 1: Determine what is your conversation type

Scripted

OR

Free flow?


Principles 2: Determine who is talking

Brand

OR

Persona?


Principles 3: Determine what is your persona’s personality

Formal,

Fun,

Funny or

too funny?

$657.1

5

Austin

Just kidding about a credit card

purchase confirmation.

Mimics a quirky human


GREETING USER REQUEST

CLARIFY, CONFIRM

OR PROMPT FOR

MORE INPUT RESPOND

CONTINUE OR

CLOSE

Principles 4: Follow the conventions of the conversational flow.


Greeting

Best practices

Introduce yourself

Provide a few suggestions to get the conversation started

Pick suggestions that set the right user expectations

Greeting includes conversation starters


User request

Best practices

- Start with scripted, suggested responses

- Aim full domain coverage with your use cases

- Engage GUI widgets or switch to app GUI if appropriate

- Users will test limits with their requests. Be prepared to

address curve balls.

Solve for random user input


Clarify/ Confirm/ Prompt for more input

Best practices

- Keep context of what the user’s saying, till topic change

- Request clarifications to funnel the conversation

- Enable users to get out of errors and system loops with

“Undo” and “Cancel”

- If user switches to a different topic while you’re answering

the first request, acknowledge & clarify.

Clarify to funnel the conversation


Respond

Best practices

- No more than 3 lines per text bubble. Avoid “text walls”

- With voice responses, keep it short

- Communicate “I don’t know that yet” to the user in a way

that they don’t write it off completely

- Avoid monotony, respond with copy variations

- Get feedback on your responses to learn & improve

Avoid “walls of text”


Continue or close

Best practices

- Continue the conversation in service of your

customer benefit by offering choices to further

engage on the same topic

- Let user control switching to a different topic

- Recognize sometimes the right thing to do may be

to close the conversation

Continue the conversation


Sayspring prototyping toolFake chatbot experience with FB messenger

LOW FIDELITY PROTOTYPING

WITH ANY CHAT APP

VOICE PROTOTYPING

(SAYSPRING)

Prototyping


Prototyping

botsociety.io

CHATBOT

PROTOTYPING


We gave this app to customers… We watched the commands flow in... And we analyzed the conversations

INTERNAL SLACK BOT

monitor requests from research

participants & responses real-time

SCRAPPY CUI APP

Real customers interacted with CUI

in real world context

LEARNING: Our NLP

confidence level threshold

was too low; caused too

many false positives

QuickBooks Prototyping & Diary Study



Last one!


UXJOURNEY

CUSTOMER


JOB



BENEFIT



TASK



USER INPUT

DATA ENTRY &

STUCTURE

PLATFORM

PLATFORM

ADVANTAGE

+ GUI

MULTI MODAL

ADVANTAGE

VOICE CHAT

Consumer Get a Ride Travel from A:B Enter destination

Text fields with variable data

Partner with a map provider and

OS for location data)

Supplement location for

simple input confirmation.


UXJOURNEY

CUSTOMER


JOB



BENEFIT



TASK



USER INPUT

DATA ENTRY &

STUCTURE

PLATFORM

PLATFORM

ADVANTAGE

+ GUI

MULTI MODAL

ADVANTAGE

Gopher command

N/A

N/A

VOICE CHAT

Small business Invoice customers Get paid Confirm client to review invoice


UXJOURNEY

CUSTOMER


JOB



BENEFIT



TASK



USER INPUT

DATA ENTRY &

STUCTURE

PLATFORM

PLATFORM

ADVANTAGE

+ GUI

MULTI MODAL

ADVANTAGE

Gopher command

N/A

N/A

VOICE CHAT


Step

• Let’s bring it together. Start prototyping

via sketch, or simulate a VUI or Chat-bot.

15 mins Try

10 mins Share


Designing a

conversation.

• It’s important to follow the conventions of the

conversational flow.

• Determine what is your conversation type,

scripted or free form.

Thank you


PLATFORM RESOURCES/ DESIGN

https://developers.google.com/actions/design/

https://developer.amazon.com/designing-for-voice/

https://developers.facebook.com/docs/messenger-platform/design-

resources/guidelines

https://api.slack.com/best-practices

https://developer.apple.com/ios/human-interface-guidelines/features/siri/

https://developers.google.com/actions/design/

https://developer.amazon.com/designing-for-voice/

https://developers.facebook.com/docs/messenger-platform/design-resources/guidelines

https://api.slack.com/best-practices

https://developer.apple.com/ios/human-interface-guidelines/features/siri/