Content Design for the Conversational UI - Design + Content Conference 2019

Content Design
for the  
Conversational UI
Design & Content Conference 2019
Melanie Seibert
Sr. Content Strategist, WillowTree
@melanie_seibert

3
Hey Google,  
make it warmer.

4
September 2018:
24% of U.S. households 
own a smart speaker
Source: Nielsen
4

5
December 2018:
2.5 billion digital voice  
assistants in use
Source: Juniper Research
5

Voice Platform Marketing
If you haven’t encountered a
conversational interface yet,  
you will.
6

7
Content Design for the Conversational UI
1. The Conversational UI
2. The Design Process
3. Easy Ways to Explore

8
A type of user interface consisting
primarily of content.
The Conversational UI

9
Content is the design.
You’re the designer.
The Conversational UI

10
1. Text
2. Voice
3. Multimodal
3 Formats

• Facebook Messenger
• Slack
11
Text

12
Voice
• Amazon Alexa
• Google Home
• Apple Siri
• Microsoft Cortana

13
Voice + Text
Multimodal
Done. Your
alarm has been
set for 6 a.m.

14Typing speed: Brown, CM (1998). Human-Computer Interface Design Guidelines.
Speaking speed: Yaun, Liberman, Cieri (2006). “Towards an Integrated Understanding of Speaking Rate in Conversation.”
Typing
Speaking 130 wpm
40 wpm

Read300 wpm
“Speed Reading," The University of Chicago Student Health and Counseling Services, 2017. 15
Listen130 wpm

Intents Entities
What’s the best place to eat  
in Vancouver that’s not too pricy?
best place to eat
Vancouver not too pricy?
Find food best
Vancouver
not too pricyAdditional Context
Location
Previous reviews
Allergies
1 2 3
Analysis4Contextual
Action Fulﬁllment
56
Feedback  
Conﬁrmation or request
for Additional Information
Action
Call to any relevant APIs
API
Anatomy of a Conversation
Recording Conversion to TextUser Input
System Output
“What’s the best  
place to eat in  
Vancouver  
that’s not  
too pricy?”
16

Intents Entities
Find food best
Vancouver
not too pricyAdditional Context
Location
Previous reviews
Allergies
1 2 3
Analysis4Contextual
Action Fulﬁllment
56
Feedback  
Conﬁrmation or request
for Additional Information
Action
Call to any relevant APIs
API
Anatomy of a Conversation
Recording Conversion to TextUser Input
System Output
“What’s the best  
place to eat in  
Vancouver  
that’s not  
too pricy?”
17
What’s the best place to eat  
in Vancouver that’s not too pricy?
best place to eat
Vancouver not too pricy?

18

“If you approach a new piece of web
content with ‘how shall I write this?’, that’s
writing or editorial.  
If you approach it from ‘how am I going to
get this across to the audience in the best
way possible?’, that’s content design.”
19
Sarah Richards  
Author of Content Design

What is Content
Design?
Where Content
Strategy and  
Product Design
overlap.
20

The Design Process
Start with data
21

“Can I
replace the handle
User Input
on my ?”product
Customer
Service Logs
Interviews
Content Audit
22

23

The Design Process
Write a user story
for each intent
24

What’s a User Story?
“A user story is a way of pinning down what
the team needs to do… without telling them
how to do it.”
Sarah Richards | Content Design
25

User Story:
“As a _________________, 
I want to _________________,
So that I can _________________.”
26

User Story:
“As a product user, 
I want to know whether I can replace the handle,
So that I can avoid having to buy a new product
when the handle breaks.”
27

The Design Process
Prototype the
conversation
28

“Wizard of Oz” role-play  
(on Slack).

The Design Process
Design the Flow
30

Flows to design
Golden Path
The designed intents.
 
Entry Point
How is your bot invoked?
 
Error Paths
Can the bot recover when it doesn’t
understand or receive input?
Escalate to a Human
When should a person take over?
 
Linking to Accounts & Other Platforms
How do you need to integrate with other
services? Examples include purchase, add to
shopping list, message someone, call someone.
31

Flow chart.
32

33

34

35

The Design Process
Train the Bot
36

Training data generation  
(on Slack).
38

The Design Process
Design the
Personality
39

Example:
Westminster Catechism
40

WHO WE ARE WHO WE’RE NOT
Bloomstein’s  
“messaging architecture”  
method
✖️✔️

1. Supportive
2. Optimistic
3. Formal
4. Humorous
5. Motivated
Personality Framework
43
How…
…is it?

Supportive
I root for you. I will try to help you
achieve your goals rather than
pursuing my own agenda.
Opposite: adversarial
How…
…is it?
44

Optimistic
I speak in positive terms. I try to
see the upside of everything.
Neutral: realistic
Opposite: pessimistic
How…
…is it?
45

Humorous
I like to entertain and amuse you—
and myself.
Opposite: serious
How…
…is it?
46

Motivated
I’m enthusiastic and excited about
our conversation.
Opposite: reserved
How…
…is it?
47

Formal
I carefully observe rules of
etiquette and present myself in a
“highbrow” manner.
Opposite: casual
How…
…is it?
48

Supportive
I root for you. I will try to help you
achieve your goals rather than
pursuing my own agenda.
• Opposite: adversarial
Optimistic
I speak in positive terms. I try to
see the upside of everything.
• Neutral: realistic
• Opposite: pessimistic
Humorous
I like to entertain and amuse you—
and myself.
Opposite: serious
Motivated
I’m enthusiastic and excited
about our conversation.
• Opposite: reserved
Formal
I carefully observe rules of
etiquette and present myself
in a “highbrow” manner.
• Opposite: casual
How…
…is it?
49

0
0.5
1
1.5
2
2.5
3
3.5
4
4.5
5
Supportive
Humorous
FormalMotivated
Optimistic
Golden path Error Entry & exit
Optimistic
Supportive
Humorous
FormalMotivated
Bot 
Personality
——— Golden path
——— Error
——— Entry & Exit

51
Example: Designed Intents
User
First Draft: WillowTree Bot
“Currently I am conﬁgured to discuss
myself, and answer whatever questions
you might have about how I work,  
what I am, what I can do, how to
conﬁgure me, and so on.”
Formal: longer, uses passive voice.
Realistic: focuses on what it can do right now.
Reserved: sticks to the facts.
“What types of things
do you know about?”

52
Example: Designed Intents
User
Revision: WillowTree Bot
“Right now, I know about myself.
But I can extend my database to
learn about any topic. Do you
have any suggestions?”
Shorter, less formal.
Optimistic: focuses on what it can do in the future.
Motivated: interested to learn about your domain.
“What types of things
do you know about?”

The Design Process
Create and
Reﬁne Scripts
53

54

Voice Tip
Manage content density
with “landmarking.”
Amazon Alexa Skills Kit Glossary 56

• Establishes trust
• Supports a natural dialogue
Voice Tip
Horoscope for what sign?
Do:
57Amazon Alexa Skills Kit Glossary
Ask Astrology Daily  
for my horoscope.

How to Simplify Your Responses - Amazon Alexa Voice Design Guide
58
Do:
At 10 a.m., you have the 
weekly status meeting  
with Rachel and Natasha.
Don’t:
You have the weekly status 
meeting with Rachel  
and Natasha at 9 a.m.
What’s happening  
at 10 a.m.?
Voice Tip

Example: Cortana
59
Voice Tip
How long does it take to  
get to the Richmond airport?

The cheeses you may like are cheddar,
gouda, Jarlsberg, porter cheddar, St. Agur
blue cheese, gorgonzola, brie, gruyere,
sharp cheddar, and reggiano parmesan.
Amazon Alexa Voice Design Guide 60
Don’t:
Do:
Here are the cheeses you may  
like: cheddar and gouda, as well  
as gorgonzola, parmesan,  
and brie.
Use “chunking”  
to aid comprehension.
Voice Tip

Use shorter responses. Example: Cortana
61
Voice Tip
Are there any restaurants 
open right now?

Provide clear choices.
Amazon Alexa Voice Design Guide 62
Voice Tip
Would you like
brie or gouda?
Don’t:
Do:
We have brie or gouda.
Which would you like?

Screen Tip
Use timing to break up
longer utterances.
63

64

65

66

Use Quick Replies
(aka “chips”).
Facebook Messenger
Google Assistant
Screen Tip
67

Take advantage of web links.
Zulily on Facebook Messenger
Screen Tip
68

Multimodal Tip
“Design prompts for both the ear and the eye. It’s easiest
to start with the spoken prompt, imagining what you
might say in a human-to-human conversation. Then,
condense it to create the display prompt.
Google Design Guidelines
69

Google Assistant 70

71

Actions on Google
https://developers.google.com/actions/templates/ﬁrst-app 72

https://blueprints.amazon.com 74
Alexa Skill Blueprints

Thanks!
75
Melanie Seibert
Sr. Content Strategist, WillowTree
@melanie_seibert

Keep Learning
• Sarah Richards, Content Design
• Margot Bloomstein, Content Strategy at Work
• Cathy Pearl, Designing Voice User Interfaces
• Google Design Guidelines
• Amazon Alexa Voice Design Guide
• Sophie Kleber, Designing Emotionally Intelligent Machines (SXSW 2017)
• Whitney French, “Shortcuts to Chatbot Emotional Intelligence”
• WillowTree, "The Executive’s Guide to Driving ROI with Voice Experiences"
76

Thanks to:
• Daniel Atwood
• Shadiah Garwell
• Ayesha Zafar
77

Content Design for the Conversational UI - Design + Content Conference 2019

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Content Design for the Conversational UI - Design + Content Conference 2019

Similar a Content Design for the Conversational UI - Design + Content Conference 2019 (20)

Más de Melanie Seibert

Más de Melanie Seibert (11)

Último

Último (20)

Content Design for the Conversational UI - Design + Content Conference 2019