Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Speak Up! Build an Alexa Skill for a Cause

357 views

Published on

SXSW 2017 Presentation from thirteen23

Published in: Technology

Speak Up! Build an Alexa Skill for a Cause

  1. 1. SPEAK UP! BUILD AN ALEXA SKILL FOR A CAUSE 2017 SXSWi Workshop, #AlexaatSXSW
  2. 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. 3. Agenda 1. Voice Services 2. The Idea 3. Voice Design 4. Break 5. Setup for Skill Development 6. Break 7. Skill Development
  4. 4. VOICE SERVICES
  5. 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. 6. THE IDEA: SKILLS FOR A CAUSE
  7. 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. 8. VOICE DESIGN After analyzing 1600+ lines of audio, we’ve learned a few things
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. VISUAL DESIGN
  26. 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. 27. [Choose a cause!]
  28. 28. SKILL DEVELOPMENT SETUP
  29. 29. Setup 1. Amazon Developer Account 2. AWS Account 3. Download a code editing tool 4. Download template code
  30. 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. 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. 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. 33. Download code & docs: https://github.com/thirteen23/sxsw2017
  34. 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. 35. [10 minute break]
  36. 36. ALEXA SKILL DEVELOPMENT
  37. 37. Resize This Window C R E AT I N G A N E W S K I L L
  38. 38. Resize This Window C L I C K “A L E X A” I N T O P N A V
  39. 39. Resize This Window C L I C K “A L E X A S K I L L S K I T ”
  40. 40. Resize This Window S K I L L I N F O R M AT I O N Remember this!
  41. 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. 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. 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. 44. Resize This Window I N T E R A C T I O N M O D E L
  45. 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. 46. CREATE AN AWS LAMBDA FUNCTION
  47. 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. 48. Resize This Window C L I C K “ G E T S TA R T E D N O W ”
  49. 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. 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. 51. Resize This Window N A M E Y O U R F U N C T I O N
  52. 52. Resize This Window C L I C K “ U P L O A D A . Z I P F I L E ”
  53. 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. 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. 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. 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. 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. 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. 59. Resize This Window C O P Y T H E A R N V A L U E
  60. 60. GO BACK TO SKILL
  61. 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. 62. Resize This Window C L I C K “ S A V E ”
  63. 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. 64. [Headphones?]
  65. 65. Resize This Window C L I C K T H E L I S T E N I C O N
  66. 66. INSERTING YOUR FACTS
  67. 67. Resize This Window O P E N “ FA C T S . J S ”
  68. 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. 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. 70. Resize This Window F I N D Y O U R FA C T S
  71. 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. 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. 73. U P L O A D T O A W S Delete the old “Archive.zip” file in the src folder.
  74. 74. U P L O A D T O A W S Zip the files within the “src” containing folder.
  75. 75. U P L O A D T O A W S On a Mac, it should show up as “Archive.zip”.
  76. 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. 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. 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. 79. [Headphones?]
  80. 80. Resize This Window C L I C K T H E L I S T E N I C O N
  81. 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. 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. 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. 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. 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. 86. YOU’RE DONE!
  87. 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. 88. Giveaway!
  89. 89. Thank you @thirteen23

×