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 and 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 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 and 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.