AVS Companion App
This document covers the branding, best practices, and customer experience that create a great Alexa companion app. A successful Alexa companion app should allow your customer to quickly and easily set up and configure Alexa, educate your customer about how to use Alexa, and drive engagement with Alexa.
- App Branding
- Setting up Alexa
- Customer Education
- Sign out and Settings
- Alexa in App
- Logo & Brand
Your companion app branding includes both the app name and tile. This is the first thing customers will see when they search for, download, or open your companion app.
If you are including the word "Alexa" in your app name or the Amazon Alexa logo in your app tile, you must follow the guidelines below.
Appropriate app naming helps customers understand that Alexa is available in your app. When including the word "Alexa" in the app name, you must:
- Include the word "Alexa" in the overall name
- Not begin with the word "Alexa"
App tiles give customers a way to visually identify any app as an Alexa companion app. When including the Amazon Alexa logo in the app tile:
- The app tile must contain the Amazon Alexa logo, protected in a white circle or square shape. The shape should have a drop shadow that is 30% Opacity, 0px X Offset, 1px Y Offset, and 3px Blur
- The background color can be partner specific
- High contrast (darker) works best for background colors and gradients
- Avoid white and light color background tones for maximum readability
- Use square or circle base shape options, depending on the platform your app is on.
What Not to Do
Keep in mind when designing the app tile that you must adhere to the Amazon Alexa brand guidelines, specifically the what not to do section. Here are additional use cases, specific to app tiles.
|Don't place logo without a white circle to protect it||Don't use a white or light background||Don't place the logo on a circle other than white||Don't fill the inside of the logo with a color|
Use the Amazon Ember font family for Alexa-related screens, features, and functionality. Find the Amazon Ember font files on the Amazon Developer Portal (requires login) under the Resources tab.
Setting up Alexa
Setting up Alexa in your companion app consists of these three steps:
- Introducing Alexa and its benefits, typically on a splash screen
- Signing in with Login with Amazon (LWA)
- Educating the customer on how to use the product and Alexa, typically with the Things to Try screen
Alexa setup should be integrated into the product OOBE flow so that the customer moves directly from product setup into Alexa setup.
For detailed information, see the Setup and Authentication overview. As you build your Alexa setup flow, keep the following in mind for each stage:
1. A Splash Screen
The splash screen explains what Alexa is and what it does, highlighting the benefits of voice control. You can design your own splash screen to match your companion app, or use the example from our splash screen guidance.
The splash screen must include:
- Amazon Alexa logo
- Mention of Amazon
- Description of Amazon Alexa
- Description of what Alexa does
- Link to initiate authentication flow
2. Login with Amazon
Login With Amazon screens must be implemented to Amazon specifications. See the LWA implementation guides for detailed specifications for Authorizing from a Companion App (Android/iOS).
When registering your product, we recommend choosing a security profile name that accurately represents your product. The security profile name and information will appear on the LWA permissions screen for customers.
3. Things to Try screen
The Things to Try screen confirms a successful login and provides example utterances to try with Alexa. You can design your own Things to Try screen to match your companion app, or use the example from our Things to Try guidance. The Things to Try screen must include:
- 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 example utterances on the Things to Try screen should be appropriate for the product’s use cases. A speaker may emphasize audio controls, while a product designed for the kitchen may emphasize timers and alarms. Example utterances are available in the Setup and Authentication guidance.
When selecting example utterances, keep the following requirements in mind:
- If the product is voice-initiated, the example utterances must 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, however, examples of how to enable your own skill(s) are appropriate to include
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:
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.
We recommend including screens in your app that educate the customer on:
- Features that are delightful and useful on your product
- How to use the product’s buttons to wake Alexa
- For those products that are voice-initiated, how to turn the product’s microphones off
This reinforces the information provided in the user guide, ensuring new customers are educated on how to use your product.
Where to add education
This information can be provided at the first stage on the splash screen or between the LWA login and the Things to Try screens. It is up to you to decide what features to highlight to best drive engagement on your product. As new features are released, we suggest updating this section.
You are provided with examples of what these screens might look like, but you are ultimately responsible for their creation.
Sign out and Settings
You need to enable an easy to find, no hassle way for customers to sign out. It can be integrated into the companion app's Alexa settings or may be a standalone screen within the app. If it is a standalone screen, we recommend using the Things to Try content so that customers are reminded of the benefits of staying signed in.
Alexa settings within your companion app will give your customer more control of their Alexa experience without having to use the Alexa app. The Alexa settings section should be labeled “Amazon Alexa” and if you use logos for each setting, use the Alexa brand asset provided by Amazon.
Settings that can be made available in your companion app are:
- Alexa language selection
- Enabling and disabling the start and stop listening sounds (only for products with prominent LEDs)
- Signing out
Alexa in App
When integrating Alexa into your product, your product must have:
- Affordances to physically interact with Alexa
- Affordances to communicate Alexa states
This can be either on the device or in your companion app, however, it is strongly discouraged to put this in your companion app as it does not provide your customer with a great Alexa experience.
A button that allows a customer to invoke Alexa without requiring them to say the word “Alexa.”
When the product is Idle, a single press puts the product into Listening mode.
When Alexa is Speaking, a single press immediately stops Alexa Speaking and puts the product into Active Listening mode.
When Alexa is playing media, a single press attenuates or pauses the music and puts the product into Active Listening mode. If Alexa doesn’t hear any utterance from the customer, the product should return to the Idle state with the music continuing at its previous volume.
When an Alexa alert, such as a timer, alarm, or reminder, is sounding, a single press stops the alert.
Ideally, the Action button would have the Amazon Alexa logo as its icon, without the logotype "Amazon Alexa" accompanying the mark.
We do not recommend using a microphone icon as it is ambiguous what type of voice experience the customer will encounter (dictation, Alexa, or something else).
Microphone On/Off button
A button that toggles the products wake-word capability on/off either through disabling the products microphone or disabling its wake-word.
Pressing the Microphone On/Off button once disables the product ability to receive Alexa requests.
Pressing the Microphone On/Off button when disabled, re-enables the product ability to receive Alexa requests.
The recommended icon for the Microphone On/Off button is a microphone with a slash through it.
Both the Action and Microphone On/Off buttons should not be overloaded with additional functionality. These controls are essential to a good experience with Alexa, and they should behave only with the functionality specified above. Avoid button interactions that require the customer to hold for a certain amount of time, or double tap to access functionality.
Never show the logo in any colors other than Alexa blue, white, or black. Choose the color that either matches your existing UI or has the best contrast to background that it will be placed upon. Here are the available options for you to choose from:
A product should ideally display the Alexa states on the product and not in the companion app, as it is not a good customer experience. However, if you choose to display the Alexa states in the companion app, you must communicate state to customers either visually or with the sounds provided by Amazon. A great product experience communicates Alexa states with both, and they should be synchronized.
Your companion app needs to use audio cues to indicate when Alexa has started and stopped listening. Sounds communicate Alexa states and should use the sound file optimized for your speaker quality. Typically companion apps use the “medium” set, though there are three sets of sound files available.
See Attention State Sounds for more details.
Coupled with a VUI response, voice chrome visually communicates Alexa’s various attention states to customers.
For specific guidance on colors and animations for each state, see [Attention States Voice Chrome][avs-ux-attention#voice-chrome].
Logo & Brand
Consistent use of Amazon Alexa brand assets throughout your companion app will protect product integrity and help customers to instantly recognize references to Amazon Alexa, thereby allowing your app to be clearly understood. See AVS UX Logo and Brand Usage for more information.