AVS UX Setup and Authentication

The Alexa Setup & Authentication screens communicate the value of Alexa and help customers connect an Alexa-enabled product to their Amazon account. The setup flow typically lives within the first run experience on an Alexa-enabled product.

Setting Up Alexa

AVS setup is a combination of introductory and educational screens meant to communicate the value of Alexa to the customer, and authentication screens which enable the customer to login with their Amazon credentials. The screens are combined into a three step process:

You must also provide the customer a way to logout of their account. Logout functionality is typically available in the Alexa settings of your app. If your app does not have any settings for Alexa, you can reuse your Things to Try page for Logout, reminding your customers about the benefits of logging into Alexa.

The examples found in this document are formatted for standard mobile phone and tablet display proportions and orientations. They will potentially work on a range of displays but may require additional modification in order to provide a high quality customer experience. A successful integration must maintain access to and legibility of content.

Alexa setup screens have specific requirements. As long as these requirements are met, these screens can be designed to your own specifications. Example screens are provided below.

Introductory Screens

The introductory screens inform customers about what Alexa is and what it does, highlighting the benefits of voice control. A series of screens or animations can be used, or a single Splash screen is sufficient.

Example text for the Splash screen is provided below, as are example screens.

User Education Screens

The User Education screen serve a dual purpose:

Confirm successful login

Educate customers how to use Alexa

Example utterances must always be included on this section. If your application has a distinct logout screen within settings, consider including Things to Try content so that customers know the benefits of staying signed in.

The number of example utterances displayed can vary depending on their length and the space available. If long example utterances must be wrap onto a second line, avoid having a single word on a line, and ensure the spacing between lines is less than the spacing between utterances. Consider the following when writing example utterances:

The utterances should be appropriate for the product’s use cases. A speaker may emphasize audio controls, while a kitchen product may emphasize timers and alarms

If the product is voice-initiated, the example utterances should start with wake word “Alexa”

If the product is touch-initiated, the example utterances should not start with “Alexa”

The utterances should not reference third-party products the customer must purchase in addition to your product

The utterances should not reference third-party skills that the customer must enable manually. However, examples of how to enable or use your own skills are appropriate to include.

Example text for the Things To Try screen is provided below, as are example screens.

Authenticating with Login with Amazon

Login With Amazon (LWA) is required to authenticate customers on Alexa-enabled products. Based on your AVS implementation, choose one of the following approaches for implementing LWA:

LWA in Device Companion App
This approach packages the Alexa Setup screens into a mobile app experience (iOS/Android) created by the developer. Amazon provides access to Login with Amazon as webviews, and the developers build the Introductory and Education screens according to Amazon's guidelines.

LWA on Alexa-enabled Device
This approach displays the Alexa Setup screens on the device. Login with Amazon is still provided as webviews that the device will need to render. This is only available for touch screen driven experiences and also requires a local browser in order to allow new customers to create an Amazon account.

LWA with Code-Based Linking
This approach is intended for products that can present a code right from the their screen, and where input of customer credentials would be inconvenient. Code-based linking moves LWA from a device's companion app to the web, via a secondary device i.e. a mobile phone, tablet, or personal computer.

Login with Amazon (LWA) screens must be implemented to Amazon specifications. See the Login with Amazon implementation guides for detailed specifications:

For all approaches, be sure to give your Security Profile a name that matches the name or brand of your product so that a customer is confident they are authenticating to your product.

Setup Flows

Companion App

Introduction

1) Customer should be able to set up Alexa as part of your product's first run experience. If they do not set up Alexa then, they should be able to do so from the settings inside your app.

2) From the Splash screen the customer is prompted to Sign In With Amazon.

Authentication

3) The customer is guided through a series of simple steps that allow them to authenticate with their Amazon account. If they don’t have an Amazon account, a link is provided to create one. Account creation is done in a browser. If your product does not have a browser, the customer should be provided alternate methods of registering for an account.

Customer Education

4) After authenticating, the customer is presented with the Things to Try screen, which contains a link to the Amazon Alexa App.

Logging Out

5) Declining the agreement takes the customer back to the previous Login with Amazon screen.

6) In addition to educational material, when revisited the Things To Try screen has a Sign Out button. Tapping this will sign out the customer and take them back at the Alexa Splash Screen.

Code-Based Linking

Introduction

1) Customer should be able to set up Alexa as part of your product's first run experience. If they do not set up Alexa then, they should be able to do so from the settings inside your app or on the device. From the Splash screen your product presents a clear call to action to Login with Amazon setting the customer’s expectations that they will be registering this product with their Amazon account.

2) On the device's screen, a customer sees a code and instructions to navigate to amazon.com/code to enter the code.

Authentication

3) From a secondary device the customer goes to http://amazon.com/code and enters their credentionals

4) They then enter the code displayed on the device's screen.

5) On the secondary device, they receive a confirmation that login was successful.

Customer Education

6) The customer sees a list of things to try with their Alexa-enabled product and is prompted to download the Alexa App to get the most out of your product.

Code-Based Linking Errors

6) There are two possible failures during code-based linking, either the customer's code expired before successfully authenticating, or authentication failed and the customer should be prompted to generate a new code and try again.

Example Screens

These screens can be implemented according to the provided redlines, or equivalent screens can be designed according to the requirements above. All branding assets used in the screens below are available in the Developer Console under the Resources tab.

Mobile Companion App

These examples are formatted for standard mobile phone and tablet display proportions and orientations. They can work on a range of displays but may require modification. A successful integration must maintain access to and legibility of content.