SXSW 2017 Presentation from thirteen23

1. SPEAK UP!
BUILD AN ALEXA SKILL FOR A CAUSE
2017 SXSWi Workshop, #AlexaatSXSW

2. thirteen23 is a product design
studio specializing in digital
strategy, design, and engineering.
We partner with companies who
share our passion for creating
amazing products and
experiences.
Tom Hudson
Technical Director
Nikki Clark
Senior Designer
Max Wade
Developer

3. Agenda
1. Voice Services
2. The Idea
3. Voice Design
4. Break
5. Setup for Skill Development
6. Break
7. Skill Development

4. VOICE SERVICES

5. W H Y V O I C E
M AT T E R S
Google reports that 20% of its
searches are now done via voice.
Amazon has sold over 5 million
Alexa-enabled devices.
Over 7,000 companies have
enabled Alexa in their products.
Ford is integrating Alexa into their
new line of cars with Sync 3.

6. THE IDEA: SKILLS FOR A CAUSE

7. 3 6 C A U S E S
Addiction
Bee Colony Collapse Disorder
Bigotry
Blindness
Blood Donation
Child Mentorship
Chromosomal Abnormalities
Clean Water
Climate Change
Congenital Heart Defects
Domestic Abuse
Drunk Driving
Emergency Relief
Environmental Protection
Gender Inequality
Gun Violence
Human Trafficking
Innocent People Incarcerated
LGBT Youth Harassment & Bullying
Leukemia & Lymphoma
Malaria
Milk Banking
Obesity
Poverty
Racial Equality
Rainforest Deforestation
Refugees
Reproductive Health Services
Senior Isolation
Suicide
Teen Pregnancy
Tissue Donation
Transgender Life
US Civil Liberties in a Digital World
US Homelessness
US Police Brutality

8. VOICE DESIGN
After analyzing 1600+ lines of audio, we’ve
learned a few things

9. Core Principles
1. Design a linear experience
2. Make the interface discoverable
3. Remind users where they are
4. Give regular feedback
5. Speak the user’s language

10. D E S I G N A L I N E A R E X P E R I E N C E
With a visual interface, a user can skip
around to find the information that is
most relevant to them.
Because audio interfaces are linear, the
user is forced to listen to everything
Alexa says before they can parse the
most important information.
Present the most important information
first. Don’t ask unnecessary questions or
have Alexa repeat “herself.”
C O R E P R I N C I P L E S
“Here’s the weather in Austin
for the next 7 days: Tuesday,
73° and sunny, Wednesday
75° and lots of clouds,
Thursday 78° and rainy
weather, Friday 79° and
sunny, Saturday 78° and
cloudy, Sunday 73° and
partly sunny. Monday, 83°
and intermittent clouds.”

11. M A K E T H E I N T E R FA C E D I S C O V E R A B L E
Without a screen to communicate new
types of content or interaction,
designers have to find new ways to
make the app discoverable.
Look to legacy voice design interfaces
for guidance. In automated phone
menus, the options are listed at each
level of navigation.
Always tell the users what options they
have at any given time, to help
discoverability and minimize errors.
C O R E P R I N C I P L E S
“You can ask to get a ride or
request a fare estimate.
Which will it be?”

12. R E M I N D U S E R S W H E R E T H E Y A R E
In more complex voice applications, it is
important to map out the different
levels a user can navigate through.
A user should understand where they
are within the application at any point in
time, and know how to navigate deeper
or return to a higher level or home.
C O R E P R I N C I P L E S
“Ok, you’ve selected that
you’d like to call a
ridesharing service. You can
select Lyft, Fare, or Fasten.
Which will it be?”

13. G I V E R E G U L A R F E E D B A C K
Providing feedback through a design is
something interface designers are
already familiar with, but providing it
without a screen means that most of the
usual techniques will not work.
Designers must consider new ways to
communicate success, failure,
“working,” and other interface states.
C O R E P R I N C I P L E S
“A reminder to ‘call mom’ at 9pm
has been added to your calendar.”
“Your Lyft ride has not been
ordered, because your credit card
authorization failed. Please check
your card information or try
another payment method.”

14. S P E A K T H E U S E R ’ S L A N G U A G E
Alexa should always speak in the same
type of language the user speaks:
words, phrases, and concepts should
feel familiar.
Consider changing the way Alexa
answers based on how the query is
phrased, or randomize statements to
make the dialog feel more
conversational.
Support analogies and multiple
invocation names: ask, tell, search
open, launch, resume, run, load, begin,
use, etc.
C O R E P R I N C I P L E S
“Here’s your fact: There are
181,967 people living with
Hodgkin lymphoma.”
“Did you know? In 2016,
60,140 people are expected
to be diagnosed with
leukemia.”

15. Language Tips
1. General Tips
2. Grammar and Syntax
3. Numbers
4. Oxford Commas
5. Testing
6. Speech Synthesis Markup Language
T E X T

16. G E N E R A L
• “Alexa” is a singular entity with a
personality. When speaking to a
listener, make sure to use you/your
instead of me/my.
• Avoid slang and jargon.
• Try to keep language at a 6-8 grade
reading level.
• Keep sentences short when possible.
“Too many” commas, provided they
are grammatically correct, is a better
option than not enough.
L A N G U A G E
He has a tendency to get on a
soapbox if you bring up politics.
He has strong opinions on politics.

17. G R A M M A R A N D S Y N TA X
• Cut extra words, qualifiers, adverbs,
and passive voice.
• Pay attention to language and style,
make sure all copy sounds like it
would be spoken by the same person.
• It’s better to be on the side of too
conversational than too formal.
• Sometimes the most natural sounding
answer is a fragment sentence or
ends in a preposition. Don’t feel like
you need to repeat the query if it feels
unnatural.
L A N G U A G E
The Grand Canyon is viewed by
thousands of tourists each and every
year.
Thousands of tourists view the Grand
Canyon every year.
Despite the fact that it is old, the
house was remodeled by the
homeowners.
The homeowners remodeled the
house despite its age

18. N U M B E R S
If you’re comparing two sets of
numbers, try to place them closely
together in a sentence.
If possible, put distance between dates
and unrelated numbers.
L A N G U A G E
Of 160,000 e-mails and instant
messenger conversations collected
between 2009 and 2012, 90 percent
of the communications were from
online accounts not belonging to
foreign surveillance targets.
Between 2009 and 2012, 160,000
emails and instant messenger
conversations were collected. 90
percent of these communications were
from online accounts not belonging to
foreign surveillance targets.

19. O X F O R D C O M M A S
Oxford commas, or serial commas, are
important to include when writing for
Alexa. Humans will pause if reading a
series regardless of the second comma,
but Alexa’s interpretation makes it
sound like the last two items are
grouped.
L A N G U A G E
Almost half of the world’s timber and
up to 70% of paper is consumed by
Europe, United States and Japan
alone.
Almost half of the world’s timber and
up to 70% of paper is consumed by
Europe, United States, and Japan.

20. T E S T I N G
Always test out loud on an Alexa-
enabled device or a simulator.
Pay attention to Alexa’s inflection.
Rewrite if the cadence feels weird.
L A N G U A G E
Losses of managed honey bee
colonies were 23.1% for the 2014–
2015 winter, but summer losses
exceeded winter numbers for the first
time, making annual losses for the
year 42.1%.
Losses of managed honey bee
colonies were 23.1% for the 2014–
2015 winter. For the first time,
summer losses exceeded winter
numbers, making annual losses for
the year 42.1%.

21. S P E E C H S Y N T H E S I S
M A R K U P L A N G U A G E
Alexa’s text-to-speech conversion
handles most text, such as
abbreviations and special
character, automatically.
For non-English words, or to
request a specific pronunciation,
you can use a SSML tag to teach
Alexa how to pronounce
something.
You can use the SSML break tag
to add pauses, but you can’t
change verbal emphasis, such as
pitch or volume. All caps or
repeated letters won’t work.
L A N G U A G E

22. S P E E C H S Y N T H E S I S
M A R K U P L A N G U A G E
Audio, Break, P, Phoneme, S, Say-
as, Speak, W
Full table of available SSML values
at developer.amazon.com.
L A N G U A G E

23. R E S O U R C E S
SlickWrite: Free demo, paid
version with more features
available.
Hemingway Editor: Free demo,
$20 for desktop application,
works for both Mac and Windows.
Expresso App: Completely free
web application, but with slightly
less functionality than some of the
other options.
L A N G U A G E

24. F U R T H E R
R E A D I N G
Design for Voice Interfaces, Laura
Klein
The Best Interface is No Interface,
Golden Krishna
Make It So, Nathan Shedroff
More specific grammar tips at our
Medium publication, in When
Robots Speak Human
L A N G U A G E

25. VISUAL DESIGN

26. V I S U A L D E S I G N
Small icon: 108x108 PNG or JPG
Large icon: 512x512 PNG or JPG
Your icon will be cropped into a
circle automatically to fit the
shape used for all Alexa Skills.

27. [Choose a cause!]

28. SKILL DEVELOPMENT SETUP

29. Setup
1. Amazon Developer Account
2. AWS Account
3. Download a code editing tool
4. Download template code

30. A M A Z O N D E V E L O P E R A C C O U N T
1. Go to
https://developer.amazon.com
2. Click “sign in” in the upper right
3. If you have an Amazon account,
enter your credentials, or…
4. If no account, enter your email and
select “I am a new customer.”
5. Fill out registration form
S K I L L D E V E L O P M E N T S E T U P
6. Accept the App Distribution
Agreement
7. No and No for monetizing

31. A W S A C C O U N T
1. Go to https://aws.amazon.com
2. Click “Create an AWS Account” in
the upper right
3. Sign in with same credentials as
Developer portal
4. Fill out the form and click “Create
Account and Continue”
5. Enter credit card information and
click “Continue”
S K I L L D E V E L O P M E N T S E T U P
6. Enter a telephone number and click
“Call Me Now”
7. Answer the call, enter the PIN
8. Select Basic support plan

32. C O D E E D I T O R
ATOM: https://atom.io/
Sublime Text Editor: https://
www.sublimetext.com
Coda: https://panic.com/coda/
Visual Studio Code: https://
code.visualstudio.com/
S K I L L D E V E L O P M E N T S E T U P

33. Download code & docs:
https://github.com/thirteen23/sxsw2017

34. I N S TA L L C O D E &
D O C S
1. Uncompress zip file
2. Open facts.js file with code
editor
3. Find your facts
4. Add or modify as needed
S K I L L D E V E L O P M E N T S E T U P

35. [10 minute break]

36. ALEXA SKILL DEVELOPMENT

37. Resize This Window
C R E AT I N G A N E W S K I L L

38. Resize This Window
C L I C K “A L E X A” I N T O P N A V

39. Resize This Window
C L I C K “A L E X A S K I L L S K I T ”

40. Resize This Window
S K I L L I N F O R M AT I O N
Remember this!

41. I N V O C AT I O N N A M E G U I D E L I N E S
Cannot infringe upon the intellectual
property rights of an entity or person.
One-word invocation names are not
allowed (articles like “the” don’t count).
Must not contain the wake words Alexa/
Amazon/Echo, or the words skill/app.
The invocation name must contain only
lower-case alphabetic characters, spaces
between words, possessive apostrophes
(for example, “sam’s science trivia”), or
periods used in abbreviations (for
example, “a. b. c.”). Other characters like
numbers must be spelled out.
S K I L L I N F O R M AT I O N
Trump’s Addiction Facts!
Addictfax!
Addict Echo!
Addiction Facts 4 U!

42. I N V O C AT I O N N A M E G U I D E L I N E S
Note: For acronyms, the invocation
name must contain single letters, each
followed by a period and a space. The
invocation name cannot spell out
phonemes.
Click on “Invocation Name Guidelines”
for more.
S K I L L I N F O R M AT I O N
For example, a skill titled
“LGBT Youth Facts” would
need “LGBT” represented as
“l. g. b. t.” and NOT
“elle gee bee tee”.

43. I N V O C AT I O N N A M E E X A M P L E S
Addiction
addiction brain, addiction info, addiction
attention, addict info
Bee Colony Collapse Disorder
c.c.d. facts, colony collapse facts, bee
c.c.d. info, bee colony brain
Gender Inequality
gender differences, inequality info,
gender inequality, gender inequality info
Human Trafficking
human trafficking, human trafficking info,
human trading info, human trafficking
data
S K I L L I N F O R M AT I O N
Transgender Life
transgender life, transgender info, miss
laverne, gender bender
Chromosomal Abnormalities
missing chromo, irregular chromosome,
chromosome abnormal, chromo info
US Police Brutality
five oh facts, brutal force facts, police
brutality, angry bacon information
Reproductive Health Services
reproductive health service info, safe sex
services info, reproductive health info,
reproductive health data

44. Resize This Window
I N T E R A C T I O N M O D E L

45. I N T E N T S A N D
U T T E R A N C E S
An action that fulfills a user’s
spoken request is an intent.
A spoken statement that will
invoke an answer is an utterance.
NOTE: If you want to start with a
good baseline for intents and
utterances, open the text files you
see to the right, and copy and
paste the content.

46. CREATE AN AWS LAMBDA FUNCTION

47. Resize This Window
C H A N G E Y O U R R E G I O N T O N . V I R G I N I A

48. Resize This Window
C L I C K “ G E T S TA R T E D N O W ”

49. Resize This Window
C L I C K “A L E X A - S K I L L - K I T- S D K - FA C T S K I L L”

50. Resize This Window
C H O O S E “A L E X A S K I L L S K I T ” & C L I C K N E X T

51. Resize This Window
N A M E Y O U R F U N C T I O N

52. Resize This Window
C L I C K “ U P L O A D A . Z I P F I L E ”

53. Resize This Window
C L I C K “ U P L O A D ” & S E L E C T “A R C H I V E . Z I P ”

54. Resize This Window
U N D E R R O L E , C R E AT E A C U S T O M R O L E

55. Resize This Window
C L I C K “A L L O W ” I N L O W E R R I G H T

56. Resize This Window
C L I C K “ N E X T ” O N O R I G I N A L TA B

57. Resize This Window
R E V I E W A N D C L I C K “ C R E AT E F U N C T I O N ”

58. Resize This Window
Y O U S H O U L D S E E S O M E T H I N G L I K E T H I S !

59. Resize This Window
C O P Y T H E A R N V A L U E

60. GO BACK TO SKILL

61. Resize This Window
PA S T E A R N I N T O C O N F I G U R AT I O N F I E L D

62. Resize This Window
C L I C K “ S A V E ”

63. Resize This Window
I N T E S T S E C T I O N , T Y P E “ O P E N < S K I L L N A M E > ”

64. [Headphones?]

65. Resize This Window
C L I C K T H E L I S T E N I C O N

66. INSERTING YOUR FACTS

67. Resize This Window
O P E N “ FA C T S . J S ”

68. PA R T S O F
FA C T S . J S F I L E
FACTS
List of the facts for each cause or
illness.
SKILL_NAME
The name of your skill. This is
arbitrary to the function of your
skill, but it will appear in the
record of calls in your Alexa app.
GET_FACT_MESSAGE
Random choice of intros to
choose from when saying a fact.
HELP_MESSAGE
If someone asks for help, Alexa
will say this text.

69. PA R T S O F
FA C T S . J S F I L E
HELP_REPROMPT
If the user still doesn’t
communicate correctly with the
skill, Alexa will say this.
STOP_MESSAGE
If you stop the skill in the middle
of it, Alexa will say this.
SOURCE
We added this field so that
people can see where the data
came from. You can see this when
you look at the record of calls to
Alexa in your app.

70. Resize This Window
F I N D Y O U R FA C T S

71. Resize This Window
S E L E C T A N D C O P Y T H AT T E X T

72. Resize This Window
O P E N “ I N D E X . J S ” A N D PA S T E N E W FA C T S

73. U P L O A D T O A W S
Delete the old “Archive.zip” file in
the src folder.

74. U P L O A D T O A W S
Zip the files within the “src”
containing folder.

75. U P L O A D T O A W S
On a Mac, it should show up as
“Archive.zip”.

76. Resize This Window
U P L O A D T O A W S - C L I C K “ U P L O A D ”

77. Resize This Window
U P L O A D T O A W S - C H O O S E Z I P F I L E

78. Resize This Window
T E S T I N A M A Z O N D E V E L O P E R P O R TA L

79. [Headphones?]

80. Resize This Window
C L I C K T H E L I S T E N I C O N

81. Resize This Window
P U B L I S H I N G I N F O R M AT I O N

82. P U B L I S H I N G
I N F O R M AT I O N
Category: Education & Reference
Testing Instructions: This is based
on the Fact Skill Template

83. P U B L I S H I N G
I N F O R M AT I O N
Short Description: This is a skill
that will give you a random fact
about <cause name>.
Long Description: The purpose of
this skill is to inform users about
the facts around <cause name>.
There are no prerequisites to this
skill other than the desire to learn
more about <cause name>. If you
want to know more about <cause
name> or have been personally
affected by <cause name>, this
skill is the right one for you.

84. P U B L I S H I N G
I N F O R M AT I O N
Images are in your working folder.

85. Resize This Window
P R I V A C Y & C O M P L I A N C E : D E V E L O P E R P O R TA L

86. YOU’RE DONE!

87. Resize This Window
T E S T O N D E V I C E O R E C H O S I M . I O

88. Giveaway!

89. Thank you
@thirteen23