Content Design for the Conversational UI - STC Summit 2018

Content Design
Conversational UI
Melanie Seibert
Sr. Content Strategist
WillowTree
forthe
#stc18
@melanie_seibert

Content Design forthe Conversational UI

Hey Google,  
make it warmer.

4
December 2017: 46% of Americans use
digital voice assistants
Source: Pew Research Center

5
Smart speaker ownership grew 54% overthe
following three months
December 2017—February 2018
Source: comScore

1. What is Content Design?
2. The Conversational UI
3. The Design Process
4. Easy Ways to Explore

7
“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.”
SARAH RICHARDS
AUTHOR OF CONTENT DESIGN

Section Title01
8
What is Content Design?
• Writing and editorial
• Usability (making
content user-focused,  
actionable, clear)
• Layout, structure,  
and hierarchy
• Flow and navigation
• Formats (text, video,
images, audio, tables,
graphs)
• Metadata
• Accessibility
• Testing and
optimization

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

11
The Conversational UI
A type of user interface consisting
primarily of content, with
relatively few visual elements,
compared to the graphical UI (GUI).

12
The Conversational UI
That means
you’re the designer now.

13
3 Conversational UI Formats
Voice MultimodalScreen

14
Screen
Facebook Messenger
Slack
Kik

15
Voice
Amazon Alexa
Google Home
Apple Siri
Microsoft Cortana

16
Multimodal
Voice + screen
Done.Your
alarm has been
set for 6 a.m.

17
Source: Typing speed: Brown, CM (1988). Human-computer interface design
guidelines. | Speaking speed Yaun, Liberman, Cieri, Towards an Integrated
Understanding of Speaking Rate in Conversation.
Typing
Speaking
40 wpm
130 wpm

18
Source: Reading: University of Chicago
Listening
Reading
130 wpm
250 wpm

What’s the best place to
eat in Charlottesville
that’s not too pricy?
Intents Entities
“What’s the best place
to eat in Charlottesville
that’s not too pricy?”
best place to
eat Charlottesville
not too pricy
Find food best
Charlottesville
not too pricy
Additional Context
Location
Previous reviews
Allergies
1
2 3
Analysis4
Contextual Action
Fulﬁllment
5
6
Feedback  
Conﬁrmation or request for
Additional Information
Action
Call to any relevant APIs
API
Anatomy of a Conversation
Recording (voice only) Conversion to text (voice only)
User Input
System Output

What’s the best place to
eat in Charlottesville
that’s not too pricey?
Intents Entities
“What’s the best place
to eat in Charlottesville
that’s not too pricy?”
best place to
eat Charlottesville
not too pricy
Find food best
Charlottesville
not too pricy
Additional Context
Location
Previous reviews
Allergies
User Input1
Recording (voice only)2 Conversion to text (voice only)3
Analysis4
Contextual Action
Fulﬁllment
5
System Output6
Feedback  
Conﬁrmation or request for
Additional Information
Action
Call to any relevant APIs
API
Anatomy of a Conversation

The Design Process
22
Start with data

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

24

The Design Process
25
Write a user story
for each intent

26
What’s a User Story?
“A user story is a way of pinning down
what the team need to do
…without telling them how to do it.”
SARAH RICHARDS, CONTENT DESIGN

27
What’s a User Story?
User story:
"As a ,
I want to ,
so that I can ."

28
User Stories
User story:
"As a product user,
I want to know if I can replace the handle,
so that I can avoid having to buy a new
one when the handle breaks."

The Design Process
29
Prototype the conversation

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

The Design Process
31
Train the AI

Training data generation (on Slack).

The Design Process
34
Design the Flow

35
Flows to design
Primary Path
The designed intents.
Error Paths
Can the bot recover when it doesn’t understand or receive input?
Escalate to Customer Support
When should a human agent 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.

The Design Process
40
Create and Reﬁne
Scripts

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

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

45
Voice
How to Simplify Your Responses - Amazon Alexa Voice Design Guide
What’s happening  
at 10 a.m.?
At 10 a.m., you have  
the weekly status meeting.
You have the weekly  
status meeting at 10 a.m.
with “landmarking” (also  
known as implicit conﬁrmation).
Voice Tip
Don’t:
Do:

46
Voice
How long does it take to  
get to the Richmond airport?
with “landmarking” (also  
known as implicit conﬁrmation).
Example: Cortana
Voice Tip

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

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

49
Provide clear choices.
Voice Tip
We have brie or gouda.  
Which would you like?
Would you like brie or gouda?
Don’t:
Do:
Which would you like?  
Brie or gouda?
Don’t:

50
Screen Tip
Use timing to break up longer utterances.

54
Use Quick Replies
(aka “chips”).
Facebook MessengerGoogle Assistant
Screen Tip

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

56
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

58
Working with Platforms
Constraints &
Opportunities
Entry & Exit Points
Things to consider:

59
https://developer.amazon.com/designing-for-voice/what-users-say

The Design Process
61
Design the
Personality

62
Example:
Westminster Catechism

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

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

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

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

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

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

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

Supportive
I root for you. I will try to help you achieve your goals
ratherthan 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?

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

73
“What types of things
do you know about?”
“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.”
Example: Designed Intents
User
Formal: longer, uses passive voice.
Realistic: focuses on what it can do right now.
Reserved: sticks to the facts.
First draft: WillowTree Bot

74
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.
Example: Designed Intents
“What types of things
do you know about?”

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

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

78
Questions?
#stc18
@melanie_seibert

Section Title01
79
Resources
Sarah Richards, Content Design
Margot Bloomstein, Content
Strategy at Work
Google Design Guidelines
WillowTree, The Executive’s Guide
to Driving ROI with Voice
Experiences

Content Design for the Conversational UI - STC Summit 2018

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Content Design for the Conversational UI - STC Summit 2018

Ähnlich wie Content Design for the Conversational UI - STC Summit 2018 (20)

Mehr von Melanie Seibert

Mehr von Melanie Seibert (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Content Design for the Conversational UI - STC Summit 2018