The promise of conversational UI – your users already know how to talk to another human, now they can do just that with your product. As a designer, you have many different choices to consider in delivering conversational experiences to your customers – whether it’s through virtual assistants, chat UI or chatbots on messaging platforms.
Come join this workshop where we’ll share our learnings and do some hands-on exercises together to design conversational experiences.
In this workshop we’ll cover:
– Fundamentals of CUI & determining what’s right for your product
– Discussion on ingredients of CUI experiences
– Identifying features and prototyping CUI
– Multimodal CUI & emerging design patterns
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
CUI workshop SF Design Week 2017
1. 1Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Stephen Gay & Kay Viswanadha
Conversational UI
How to Walk the Talk
2. Introduction – 20 mins
Section 1 + worksheet + share out – 50 mins
Section 2 + worksheet + share out – 50 mins
Break – 10 mins
Section 3 + worksheets + share out – 50 mins
Happy Hour
SF Design Week: How to Walk the Talk
3. 3Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Conversational UI 101
Introduction
00
4. 4Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
KAY VISWANADHA
Design Strategist
QuickBooks
@KayViswanadha
STEPHEN GAY
Global Director
QuickBooks
@stephengay
5. 5Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
We are designers designing conversational
experience for our customers.
We are not experts in natural language.
6. 6Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
What products does Intuit make?
Just show the logos
OK, now?
Shouldn’t you know?
7. 7Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
8. 8Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
So how do we innovate?
What’s D4D?
D4D
Design for Delight
9. 9Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
10. 10Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Lets talk about conversational UI.
11. 11Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Conversational Experience
Interacting with your brand or
product using natural language,
kinda like communicating with
another human.
12. 12Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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.”
13. 13Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
“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
14. 14Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
01 Conversational UI
customer journey
03 Designing a
conversational UI.
Enhancing a
conversational UI.02
15. 15Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Determine conversational context.
Conversational UI
customer journey.
01
16. 16Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Conversational experiences….
Leveraging voice interactions (VUI) and
chat based interactions (CHAT UI)
17. 17Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Family time
VOICE INTERACTIONS (VUI)
HANDS FREE,
NATURAL
INTERACTIONS: We
can speak 3 to 4
times faster than we
can type.
Source: YouTube/ Google Home ad
18. 18Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
CHAT BASED INTERACTIONS (CHAT UI)
FAMILIAR INTERACTIONS
More than 2.1 billion users today
use a social messaging app
- Portio research
19. 19Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Step back into customer benefit & customer journey
OK,
20. 20Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
YOUR CUSTOMER JOURNEY- (very) high level
Discover Setup First benefit
Re-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.
BENEFIT
Achieved when the user
completes one or more
jobs.
JOB
A core function of the users’
business made up of several
individual tasks.
TASKS
The small pieces of functionality or
tasks a user must complete in order to
achieve a micro-benefit.
CUSTOMER
21. 21Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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.
22. 22Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
23. 23Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
Advantages
Same 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
24. 24Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
Advantages
same 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
25. 25Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Let’s try a worksheet.
26. 26Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
FIRSTBENEFIT REUSE & FOLLOW-UPDISCOVER SETUP
TASK
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
UX
JOURNEY
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
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
CUSTOMER JOURNEY
27. 27Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
FIRSTBENEFIT REUSE & FOLLOW-UPDISCOVER SETUP
TASK
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
UX
JOURNEY
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
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
LIST THE SMALL TASKS
THAT LADDER UP TO THE
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
28. 28Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
FIRSTBENEFIT REUSE & FOLLOW-UPDISCOVER SETUP
TASK
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
UX
JOURNEY
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
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
LIST THE SMALL TASKS
THAT LADDER UP TO THE
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
29. 29Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
30. 30Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Did everyone land somewhere here?
Discover Setup First benefit
Reuse &
follow up
LOWVOICE
MEDIUMCHAT UI
LOW
LOW
LOW
MEDIUM
HIGH
HIGH
31. 31Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
• 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
32. 32Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Let’s take VUI and CUI
to the next level.
Enhancing a
conversational UI.
02
33. 33Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Quick recap of pros/cons of voice & chat UI
OK,
34. 34Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
35. 35Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
36. 36Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
37. 37Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
38. 38Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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.
39. 39Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
40. 40Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Taking conversational experiences to the next level
41. 41Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
MULTIMODAL
What is multimodal?
Advantages of multimodal experiences
42. 42Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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.
43. 43Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
MULTIMODAL EXAMPLES
Enhancing voice interactions
with visual interface
Amazon Echo Show (coming soon)
simplifies interactions with video
calling & touch screen
44. 44Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
MULTIMODAL EXAMPLES
Enhancing voice interactions
with visual interface
Siri simplifies interactions with
visual confirmation
User can tap or speak to confirm or
edit request
45. 45Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
MULTIMODAL EXAMPLES
Enhancing voice interactions
with visual interface
Hound app – only voice input,
Responses are voice + visual
46. 46Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
47. 47Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
48. 48Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
PLATFORM
Why does the platform matter?
What are the advantages?
49. 49Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
CHATBOTS ON MESSAGING
PLATFORMS
Examples: Facebook
messenger, Slack, Kik, Skype
Examples: Amazon Echo, Google Home,
Siri (limited), Cortana
VUI PLATFORMS
50. 50Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
51. 51Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Let’s try a worksheet.
52. 52Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
CUSTOMER JOURNEY
UX
JOURNEY
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
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.
53. 53Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
CUSTOMER JOURNEY
UX
JOURNEY
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
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.
54. 54Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
CUSTOMER JOURNEY
UX
JOURNEY
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
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.
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
55. 55Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Step
• Narrow to a specific customer journey step.
• Consider the opportunity for language variability,
multi-modal and platform
10 mins Try
10 mins Share
56. 56Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
BREAK
57. 57Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
• 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
58. 58Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Principles and methods
to design a
conversational UI.
Designing a
conversational
UI.
03
59. 59Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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.
60. 60Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Principles 1: Determine what is your conversation type
Scripted
OR
Free flow?
61. 61Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Principles 2: Determine who is talking
Brand
OR
Persona?
62. 62Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
63. 63Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
GREETING USER REQUEST
CLARIFY, CONFIRM
OR PROMPT FOR
MORE INPUT RESPOND
CONTINUE OR
CLOSE
Principles 4: Follow the conventions of the conversational flow.
64. 64Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
65. 65Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
66. 66Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
67. 67Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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”
68. 68Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
69. 69Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Sayspring prototyping toolFake chatbot experience with FB messenger
LOW FIDELITY PROTOTYPING
WITH ANY CHAT APP
VOICE PROTOTYPING
(SAYSPRING)
Prototyping
70. 70Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Prototyping
botsociety.io
CHATBOT
PROTOTYPING
71. 71Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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
72. 72Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Let’s try a worksheet.
Last one!
73. 73Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
UX
JOURNEY
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
List the small tasks that ladder
up to the overall job
USER INPUT
DATA ENTRY &
STUCTURE
PLATFORM
PLATFORM
ADVANTAGE
+ GUI
MULTI MODAL
ADVANTAGE
Gopher command
N/A
N/A
VOICE CHAT
74. 74Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
UX
JOURNEY
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
List the small tasks that ladder
up to the overall job
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.
75. 75Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
UX
JOURNEY
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
List the small tasks that ladder
up to the overall job
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
76. 76Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Step
• Let’s bring it together. Start prototyping
via sketch, or simulate a VUI or Chat-bot.
15 mins Try
10 mins Share
77. 77Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Designing a
conversation.
• It’s important to follow the conventions of the
conversational flow.
• Determine what is your conversation type,
scripted or free form.
79. 79Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
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/
Notas do Editor
This is a sample INTRODUCTION using the 1-Column layout.
Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level.
Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
Keylie to kick-off exercis
This is a sample INTRODUCTION using the 1-Column layout.
Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level.
Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
This is a sample INTRODUCTION using the 1-Column layout.
Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level.
Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
Keylie to kick-off exercis
This is a sample INTRODUCTION using the 1-Column layout.
Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level.
Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
We are mapping back the various advantages to the customer experience.
Specific question, focused conversation
Easier to make decisions
Not obvious to user, know what to ask, how to ask
Cognitive load in processing responses
Peripheral content
CHAT UI// Augment by handing to a human
No voice advantages- think about setting up for doctor’s office
Data input is hard
TUNNEL vision
PRIVACY & SECURITY concerns
---
Chat- humanize set up
Eliminate context change, move to set up
Feels sLOW
“Doesn’t have to absorb IA, use own words”
Provide a guided experience- confidence and delight
Elegant for simple tasks, weather, reminders, maps, traffic
-----
Lacking
Data input
Difficult to introduce user to next tasks & benefits
Might feel like “blank slate”; doesn’t support let me click around to figure out what I can do…
When it’s all setup, history & previous behavior, it feels like “command & done”
Look up specific info buried in ia
Analysis/ not accessible
Interpretive layer
In Chat can introduce related tasks
-----
Lacking
Recurring tasks that require new data input
Keylie to kick-off exercis
Recap, Stephen presents
This is a sample INTRODUCTION using the 1-Column layout.
Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level.
Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
Keylie to kick-off exercis
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
Keylie to kick-off exercis
Keylie to kick-off exercis
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
Keylie to kick-off exercis
News briefing, Assistant- call my phone,
News briefing, Assistant- call my phone,
Keylie to kick-off exercis
Recap, Stephen presents
This is a sample INTRODUCTION using the 1-Column layout.
Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level.
Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
Keylie to kick-off exercis
Scripted, safe, closer to what technology can support
Free flow is magical, can deliver real value, must have for apps with a lot of data
This is a sample INTRODUCTION using the 1-Column layout.
Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level.
Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
This is a sample INTRODUCTION using the 1-Column layout.
Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level.
Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
Keylie to kick-off exercis
Recap, Stephen presents
This is a sample INTRODUCTION using the 1-Column layout.
Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level.
Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.