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 following font families for Alexa-related screens, features, and functionality:
- Amazon Ember Display
- 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.
Find the Amazon font files on the Amazon Developer Portal (requires login) under the Resources tab.
Setting up Alexa
Alexa setup consists of three steps: introduction, authentication, and customer education. The introduction and education steps should explain what Alexa is and what she does, highlighting the benefits of voice control. Setup should be integrated into the product OOBE flow so that the customer moves directly from product setup into Alexa setup.
For information on creating your setup flow, see the Setup and Authentication overview.
The introduction and education stages of setting up Alexa, as well as the Alexa settings portion of your companion app, all provide opportunities to educate the customer about the benefits of using Alexa.
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 device.
Sign out and Settings
You must include 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 over 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 System 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 System 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.