Each type of chatbot (voice, text, or both) has its own unique abilities and design requirements. How do you create truly helpful experiences for these user interfaces? Together, we’ll learn to think beyond the screen, and take advantage of the exciting potential of the conversational UI.

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

2. 2

3. 3
Hey Google,
make it warmer.

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

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

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

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

8. Content Design for the Conversational UI
8
A type of user interface consisting
primarily of content.
The Conversational UI

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

10. Content Design for the Conversational UI
10
1. Text
2. Voice
3. Multimodal
3 Formats

11. Content Design for the Conversational UI
• Facebook Messenger
• Slack
11
Text

12. Content Design for the Conversational UI
12
Voice
• Amazon Alexa
• Google Home
• Apple Siri
• Microsoft Cortana

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

14. 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

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

16. 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 Fulfillment
56
Feedback
Confirmation 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

17. Intents Entities
Find food best
Vancouver
not too pricyAdditional Context
Location
Previous reviews
Allergies
1 2 3
Analysis4Contextual
Action Fulfillment
56
Feedback
Confirmation 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. 18
Content Design for the Conversational UI
1. The Conversational UI
2. The Design Process
3. Easy Ways to Explore

19. “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

20. What is Content
Design?
Where Content
Strategy and
Product Design
overlap.
20
Content Design for the Conversational UI

21. The Design Process
Content Design for the Conversational UI
Start with data
21

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

23. 23
Content Design for the Conversational UI

24. The Design Process
Content Design for the Conversational UI
Write a user story
for each intent
24

25. 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

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

27. 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

28. The Design Process
Content Design for the Conversational UI
Prototype the
conversation
28

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

30. The Design Process
Content Design for the Conversational UI
Design the Flow
30

31. Content Design for the Conversational UI
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

32. Content Design for the Conversational UI
Flow chart.
32

33. Content Design for the Conversational UI
33

34. Content Design for the Conversational UI
34

35. Content Design for the Conversational UI
35

36. The Design Process
Content Design for the Conversational UI
Train the Bot
36

37. User interviews.

38. Training data generation
(on Slack).
38

39. The Design Process
Content Design for the Conversational UI
Design the
Personality
39

40. Example:
Westminster Catechism
40

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

42. 42

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

44. 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
Personality Framework

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

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

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

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

49. 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
Personality Framework
How…
…is it?
49

50. 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. 51
Content Design for the Conversational UI
Example: Designed Intents
User
First Draft: WillowTree Bot
“Currently I am configured to discuss
myself, and answer whatever questions
you might have about how I work,
what I am, what I can do, how to
configure 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. 52
Content Design for the Conversational UI
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?”

53. The Design Process
Content Design for the Conversational UI
Create and
Refine Scripts
53

54. 54
Content Design for the Conversational UI

55. Designing for Modality
5 5

56. Content Design for the Conversational UI
Voice Tip
Manage content density
with “landmarking.”
Amazon Alexa Skills Kit Glossary 56

57. Content Design for the Conversational UI
• Establishes trust
• Supports a natural dialogue
Voice Tip
Manage content density
with “landmarking.”
Horoscope for what sign?
Do:
57Amazon Alexa Skills Kit Glossary
Ask Astrology Daily
for my horoscope.

58. Content Design for the Conversational UI
How to Simplify Your Responses - Amazon Alexa Voice Design Guide
Manage content density
with “landmarking.”
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

59. Content Design for the Conversational UI
Example: Cortana
59
Manage content density
with “landmarking.”
Voice Tip
How long does it take to
get to the Richmond airport?

60. Content Design for the Conversational UI
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

61. Content Design for the Conversational UI
Use shorter responses. Example: Cortana
61
Voice Tip
Are there any restaurants
open right now?

62. Content Design for the Conversational UI
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?

63. Content Design for the Conversational UI
Screen Tip
Use timing to break up
longer utterances.
63

64. Content Design for the Conversational UI
64

65. Content Design for the Conversational UI
65

66. Content Design for the Conversational UI
66

67. Content Design for the Conversational UI
Use Quick Replies
(aka “chips”).
Facebook Messenger
Google Assistant
Screen Tip
67

68. Content Design for the Conversational UI
Take advantage of web links.
Zulily on Facebook Messenger
Screen Tip
68

69. Content Design for the Conversational UI
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

70. Content Design for the Conversational UI
Google Assistant 70

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

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

73. 73

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

75. Thanks!
75
Content Design for the Conversational UI
Melanie Seibert
Sr. Content Strategist, WillowTree
@melanie_seibert

76. Content Design for the Conversational UI
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

77. Content Design for the Conversational UI
Thanks to:
• Daniel Atwood
• Shadiah Garwell
• Ayesha Zafar
77