With the advent of voice-activated products and platforms, more news companies are dipping their toes in voice and conversational bots. For designers, this raises the question—how do you approach design when it’s invisible? In her session, senior product designer Sanette Tanaka will go over how her team at Vox Media designed an Amazon Echo bot, never having worked with voice interfaces prior. She will walk you through the steps she followed to adapt her design process for voice, while also sharing best practices in voice design.

1. Presented by Sanette Tanaka
Senior Designer at Vox Media
SND 2017
Designing for
Voice

3. “Alexa, open Circuit Breaker”
“Tell me the details”
“Price”
“Next story, please”
Here’s today’s featured gadget...
This pillow supposedly reproduces sunlight...
This light-up pillow starts at $199.
The SwitchCharge might be the first good
battery case for the Nintendo Switch…

4. Voice design is really,
really hard

5. What is a bot?
A bot is software that automates a task
In the context of journalism and publishing, the
term “bot” is normally used to refer to something
that users can interact with*
A user interface is the space where a human and
computer can interact
* Excerpted from Paul Bradshaw’s Online Journalism Handbook

6. Credit: Brad Abrams and Guillaume Laforge (via Google Cloud Next ’17)

7. http://bit.ly/2nsYhXz

8. Why this matters
We can reach users in a new context
Eventually we will have true conversations with
bots (for better or for worse)

9. Chao Li
Product Manager
(Vox Media)
Sanette Tanaka
Designer
(Vox Media)
Yuri Victor
Developer/Designer
(Vox Media)
Allison McHenry
Developer
(Vox Media)
Emily Withrow
Designer/Researcher
(Knight Lab)
Joe Germuska
Developer (Knight Lab)

10. I had no idea how to
design for voice

11. Deep breath

12. My basic process
Define
Understand
Diverge
Decide
Implement and Refine
Learn and Iterate

13. Advocate for design
STEP ONE

14. What needed to be
designed, a non-
exhaustive list
What content makes sense for voice?
How should a user navigate?
How should they interact with the bot?
What words will they use?
How should the bot respond?
How frequent should the interactions be?
What’s the personality?
What’s the tone?

15. Think outside the box.
Hold a design studio
STEP TWO

16. Our design studio
schedule
Loose whiteboarding exercise to get people
thinking
Specified exactly what to explore
We sketched!

17. Content System
● What type of content
should we deliver in our
app?
● How can our content
be useful to our
readers in our app
(How is what we're
planning any different
from a newsletter?)
● What are the
mechanics of content
delivery?
Interactions
● What kinds of bot
interactions are
valuable?
● Is there a way we can
add value without
interactions?
● What’s a smart way we
can invite users to dive
deeper into a topic?
● How can we support
navigating the app?
● How can we provide
feedback?
Personality
● What is the
personality of this
app?
● How can we run that
personality through
every aspect of the
app?
● How does Alexa’s
innate personality
support or hinder us?

19. Moving into
design(!)
Married vision with technical reality
Platform limitations: Alexa could not instigate a
conversation
Resource limitations: Could not build an open-
ended, AI-driven bot
Keyword-and-answer model worked best for us

20. Decide on the structure of the
bot (navigation, information
architecture, flow)
STEP THREE

21. What type of content
would exist in our bot,
and how could our
user access it?

25. Test your bot
* This was by far the easiest step
STEP FOUR

26. How we tested our
Alexa bot
Read a script out loud
Played content using Alexa’s developer tools
Prerecord Alexa speaking
Test with an actual prototype

27. How we tested our
Alexa bot,
continued
Recruit both experts and novices
Recognize your limitations

28. What We Learned

30. People forget
what they hear

31. “When there’s no graphical user interface
(icons, labels, etc.) in a product to guide us,
our memory becomes the UI”
– Luke Wroblewski

32. Our solutions
Kept the keywords the same from story to story
Played keywords after first story
Nixed the intro
Provided auditory cues

34. It’s always the bot’s fault

35. Our solutions
Accommodate your user over the bot
Broaden what your app will accept
Make room for natural speech
Consider filler words (ums, ahs, well)

38. Provide escape routes

39. Our solutions
Test skipping content and ending the experience
Anticipate and support what users might say to
stop the bot
Stop when asked to stop

40. People forget what they hear
It’s always the bot’s fault
Provide escape routes
RECAP

42. Where did we end up?

43. The results
Finished the project with a working prototype that
we launched internally
Learned a ton about how to approach design for
voice
Makes me more aware of questions like:
● How much am I relying on visual indicators?
● What am I making my users remember?
● Am I considering copy as much as visuals?
● What’s the personality or tone of my product?
● Where can I cut cruft?

44. So how’d we do?

47. How can we move from simply
existing in this conversational
space to truly creating value for
our audience?

48. Thank you!
Sanette Tanaka
Senior Designer at Vox Media
sanette.tanaka@voxmedia.com
@ssktanaka

49. Resources
BOOKS
The Elements of VUI Style: A Practical Guide to Voice User Interface Design by Ahmed
Bouzid and Weiye Ma
The Voice in the Machine: Building Computers That Understand Speech by Roberto
Pieraccin
Wired for Speech: How Voice Activates and Advances the Human-Computer Relationship
by Clifford Nass and Scott Brave
Design for Real Life by Eric Meyer and Sara Wachter-Boettcher
WEB
An invisible interface: 6 things we learned from designing for voice by Sanette Tanaka
Alexa Skills Kit Voice Design Best Practices
The Jack Principles by Harry Gottlieb
How conversational interfaces make the internet more accessible for everyone by Josh Shi
Emotion and Voice User Interfaces by Darnell Clayton and Colleen Jones
All Talk and No Buttons: The Conversational UI by Matty Mariansky
Talking to Machines and Being Heard by Dave Rich
Extending the Google Assistant with Actions on Google via Google Cloud Next '17
Natural User Interfaces – What are they and how do you design user interfaces that feel
natural? by Ditte Hvas Mortensen
The Rise of Chatbots by Les-Tilleuls.coop
Conversational Interfaces, Explained by John Brownlee