Speak Up! Build an Alexa Skill for a Cause

SPEAK UP!BUILD AN ALEXA SKILL FOR A CAUSE

2017 SXSWi Workshop, #AlexaatSXSW

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

Agenda

1. Voice Services

2. The Idea

3. Voice Design

4. Break

5. Setup for Skill Development

6. Break

7. Skill Development

VOICE SERVICES

W H Y V O I C E M A T T E R SGoogle 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.

THE IDEA: SKILLS FOR A CAUSE

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

VOICE DESIGNAfter analyzing 1600+ lines of audio, we’ve

learned a few things

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

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

M A K E T H E I N T E R F A 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?”

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?”

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

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

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

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.

G R A M M A R A N D S Y N T A 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

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.

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.

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

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

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

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

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

VISUAL DESIGN

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.

[Choose a cause!]

SKILL DEVELOPMENT SETUP

Setup

1. Amazon Developer Account

2. AWS Account

3. Download a code editing tool

4. Download template code

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

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

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

Download code & docs:

https://github.com/thirteen23/sxsw2017

I N S T A L L C O D E & D O C S1. 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

[10 minute break]

ALEXA SKILL DEVELOPMENT

Resize This Window

C R E A T I N G A N E W S K I L L

Resize This Window

C L I C K “ A L E X A ” I N T O P N A V

Resize This Window

C L I C K “ A L E X A S K I L L S K I T ”

Resize This Window

S K I L L I N F O R M A T I O N

Remember this!

I N V O C A T 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 A T I O N

Trump’s Addiction Facts!

Addictfax!

Addict Echo!

Addiction Facts 4 U!

I N V O C A T 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 A T 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”.

I N V O C A T I O N N A M E E X A M P L E S

Addictionaddiction brain, addiction info, addiction attention, addict info

Bee Colony Collapse Disorderc.c.d. facts, colony collapse facts, bee c.c.d. info, bee colony brain

Gender Inequalitygender differences, inequality info, gender inequality, gender inequality info

Human Traffickinghuman trafficking, human trafficking info, human trading info, human trafficking data

S K I L L I N F O R M A T I O N

Transgender Lifetransgender life, transgender info, miss laverne, gender bender

Chromosomal Abnormalitiesmissing chromo, irregular chromosome, chromosome abnormal, chromo info

US Police Brutalityfive oh facts, brutal force facts, police brutality, angry bacon information

Reproductive Health Servicesreproductive health service info, safe sex services info, reproductive health info, reproductive health data

Resize This Window

I N T E R A C T I O N M O D E L

I N T E N T S A N D U T T E R A N C E SAn 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.

CREATE AN AWS LAMBDA FUNCTION

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

Resize This Window

C L I C K “ G E T S T A R T E D N O W ”

Resize This Window

C L I C K “ A L E X A - S K I L L - K I T- S D K - F A C T S K I L L”

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

Resize This Window

N A M E Y O U R F U N C T I O N

Resize This Window

C L I C K “ U P L O A D A . Z I P F I L E ”

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 ”

Resize This Window

U N D E R R O L E , C R E A T E A C U S T O M R O L E

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

Resize This Window

C L I C K “ N E X T ” O N O R I G I N A L T A B

Resize This Window

R E V I E W A N D C L I C K “ C R E A T E F U N C T I O N ”

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 !

Resize This Window

C O P Y T H E A R N V A L U E

GO BACK TO SKILL

Resize This Window

P A S T E A R N I N T O C O N F I G U R A T I O N F I E L D

Resize This Window

C L I C K “ S A V E ”

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 > ”

[Headphones?]

Resize This Window

C L I C K T H E L I S T E N I C O N

INSERTING YOUR FACTS

Resize This Window

O P E N “ F A C T S . J S ”

P A R T S O F F A C T S . J S F I L EFACTSList 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_MESSAGERandom choice of intros to choose from when saying a fact.

HELP_MESSAGEIf someone asks for help, Alexa will say this text.

P A R T S O F F A C T S . J S F I L EHELP_REPROMPT If the user still doesn’t communicate correctly with the skill, Alexa will say this.

STOP_MESSAGEIf you stop the skill in the middle of it, Alexa will say this.

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

Resize This Window

F I N D Y O U R F A C T S

Resize This Window

S E L E C T A N D C O P Y T H A T T E X T

Resize This Window

O P E N “ I N D E X . J S ” A N D P A S T E N E W F A C T S

U P L O A D T O A W S

Delete the old “Archive.zip” file in the src folder.

U P L O A D T O A W S

Zip the files within the “src” containing folder.

U P L O A D T O A W S

On a Mac, it should show up as “Archive.zip”.

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 ”

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

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 T A L

[Headphones?]

Resize This Window

C L I C K T H E L I S T E N I C O N

Resize This Window

P U B L I S H I N G I N F O R M A T I O N

P U B L I S H I N G I N F O R M A T I O NCategory: Education & Reference

Testing Instructions: This is based on the Fact Skill Template

P U B L I S H I N G I N F O R M A T I O NShort 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.

P U B L I S H I N G I N F O R M A T I O NImages are in your working folder.

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 T A L

YOU’RE DONE!

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

Giveaway!

Thank you

@thirteen23