AVS UX Setup and Authentication

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

Setting up Alexa

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

  1. Introduction screens, or splash screens
  2. Authentication screens, or LWA (Login with Alexa) screens
  3. Customer Education screens, or Things to Try screens

You must also provide the customer a way to log out of their account. Logout functionality is typically included 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, while reminding your customers about the benefits remaining logged in to 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.

Some Alexa setup screens are provided for you. Others can be designed to your own specifications, as long as the specific requirements discussed here are met. Example screens are provided below.

Introduction screens

The introduction, or splash, screen presents Alexa to customers in a way that encourages them to engage with her using your device. In a simple way it describes who she is, what kinds of things she can do, and the benefits of a voice-enabled experience.

The splash screen must contain:

  • Amazon Alexa logo
  • Mention of Amazon
  • Description of who Alexa is
  • Description of what Alexa does
  • A link to initiate authentication flow

Devices using a companion app

Hosted splash screen example

If you are creating an iOS or Android companion app to set up Alexa on your device, AVS supplies you with a prebuilt, or hosted, splash screen for your app. You are required to use the hosted splash screen in your companion app. The hosted splash screen allows customers to become familiar with Alexa in a consistent, comfortable experience. In addition, it allows us to include future updates and improvements to the splash screen without requiring changes to your app.

The hosted splash screen includes a link to the authentication flow allowing customers to login to Alexa, as described below.

See Authorize from a Companion App for details about using the hosted splash screen.

Devices with screens/Code-based linking

If you are creating a screen-based device or using code-based linking to set up Alexa, you will need to create your own splash screen. You should attempt to create the same experience described above, a comfortable, consistent introduction to Alexa and what she can do. While a single splash screen is often sufficient, you may use a series of screens or animations.

Example text for the splash screen is provided below, as are example screen designs.

Authorization and authentication using LWA

Login with Amazon (LWA) is required to authorize (initial account creation) and authenticate (subsequent login) customers on Alexa Built-in products. Based on your AVS implementation, choose one of the following approaches for implementing LWA:

Authenticate from a 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.

Authenticate from an Alexa Built-in 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.

Authenticate 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 such as 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 device.

Customer Education screens

The Customer Education screens serve two purposes: confirm successful login and give customers suggestions for how to use Alexa, otherwise known as Things to Try.

You must always include example utterances in this section. If your application has a separate Alexa logout screen within its settings, consider including Things to Try examples so that customers know the benefits of staying signed in.

The Things to Try screen requirements:

  • Amazon Alexa logo
  • Mention of Amazon
  • Description of how to wake Alexa
  • Example utterances
  • A link to download or open the Amazon Alexa app.

The number of example utterances displayed can vary depending on their length and the space available. If long example utterances must 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 relate to 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 wakeword “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, you may include examples of how to enable or use your own skills.

If the device your customer signs in from supports the Amazon Alexa app, you must:

  • Link directly to the Amazon Alexa app if installed, or
  • Link to the Amazon Alexa app in the app store for your OS.

The syntax for the links are:

  • Android: https://alexa.amazon.com
  • iOS: alexa://

If the device your customer signs in from does not support the Amazon Alexa app, you must inform the customer that the Amazon Alexa app is available for download. However, you are not required to link directly to the app in the app store for your OS.

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

Setup flows

Below are step-by-step examples of setup flows, both for devices using a companion app and those with screens using code-based linking.

Companion app

In Companion App Flow

Introduction

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

2) From the hosted splash screen, the customer is prompted to Login with Amazon.

Authentication

3) Guide the customer through a series of simple steps that allow them to authenticate with their Amazon account. If they don’t have an Amazon account, provide a link to create one. Usually, account creation is done in a browser. If your product does not have a browser, provide the customer an alternate method to register for an account.

Customer Education

4) After authenticating, present the customer with a 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 to the Alexa hosted splash screen.

Code-based linking

In Companion App Flow

Introduction

1) The customer should be able to set up Alexa as part of your product's first run experience. If they do not set up Alexa at that time, they should be able to do so from the settings inside your app or on the device. The splash screen 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 both a code and the 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 credentials.

4) The customer then enters the code displayed on the device's screen.

5) On the secondary device, the customer receives a confirmation that login was successful.

Customer education

6) The customer sees a list of Things to Try with their Alexa Built-in product and is prompted to download the Alexa App to get the most out of your device.

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. In either case, you should prompt the customer to generate a new code and try again.

Example screens

You can implement these screens according to the redlines provided below, or design equivalent screens according to the requirements above. All branding assets used in the screens below are available in the Amazon Developer Portal (requires login) under the Resources tab.

Mobile companion app

The Things to Try examples are formatted for standard mobile phone and tablet display proportions and orientations. They work for a range of displays but may require modification. A successful integration must maintain accessibility and legibility of content.

Things to Try screen

Things to Try Screen for Mobile
Click to enlarge

Things to Try screen

Things to Try Screen for Mobile
Click to enlarge

Things to Try screen, alternative

Alternative Things to Try Screen for Mobile
Click to enlarge

Devices with screens/Code-based linking

Splash screen

TV
Click to enlarge

Code screen

TV
Click to enlarge

Things to Try

TV
Click to enlarge

Authentication failed

TV
Click to enlarge

Code expired

TV
Click to enlarge

Splash screen

TV
Click to enlarge

Code screen

TV
Click to enlarge

Things to Try

TV
Click to enlarge

Code expired

TV
Click to enlarge

Authentication failed

TV
Click to enlarge

Splash screen

TV
Click to enlarge

Code screen

TV
Click to enlarge

Things to Try

TV
Click to enlarge

Code expired

TV
Click to enlarge

Authentication failed

TV
Click to enlarge

Splash screen

TV
Click to enlarge

Code screen

TV
Click to enlarge

Things to Try

TV
Click to enlarge

Code expired

TV
Click to enlarge

Authentication failed

TV
Click to enlarge

Text examples and translations

We have created a variety of text examples, in multiple languages, that you can use for your Introduction and User Education screens.

Use the following font families for Alexa-related screens, features, and functionality:

  • Amazon Ember Display
  • Bookerly
  • Noto Sans CJK

Bookerly is used mainly for Things to Try text, and Noto Sans CJK is supplied for Chinese, Japanese, and Korean language support. Amazon Ember Display and Bookerly are reserved for Alexa-related uses only.

You can find both the text examples, with translations, and the Amazon font files on the Amazon Developer Portal (requires login) under the Resources tab.