Alexa Horizontal Carousel Component Design

ROLE

UX Designer, Interaction

TEAM

Amazon Alexa Mobile

STATUS

Shipped Q2 2023

TOOLS

Figma

Overview

Create the IxD specs for a centralized and consolidated horizontal carousel component that can be used across the Alexa mobile app.

Problem Statement

  • Within the Alexa mobile app, there are many existing use cases of horizontal carousels, used for a variety of use cases, different sizes, causing there to be unnecessary tech debt

  • Streamline the component for app redesign and app simplification initiatives

Design Principles

Auditing

Conduct an internal examination of existing/current use-cases for horizontal carousels across the Alexa mobile app.

Interaction Design Specifications

Document and identify common design patterns, interactions, and use-cases for the standardization of the component.

Ideation

Explore multiple design solutions to help standardize the current carousels, with applying use-cases elsewhere.

Collaboration

Work with cross-collaborative teams within Alexa mobile to deliver these specifications as well as presented to our internal team App Critique.

Existing Use-case Audit

There were multiple types of horizontal carousels currently in-use with two common typologies that surfaced. I summarized my findings into two categories, Utilitarian Carousel and Media Carousel typologies. Ultimately there were six different types of carousels across the app, proving the amount of tech debt across the app and the opportunity for app simplification.

Utilitarian Carousel

Ingress to a settings or another page within the app, common within the Devices channel, Home, and Discover Alexa channel, with varying sizes.

Media Carousel

Ingress to an album, playlist, or Kindle carousel, used entirely within the Entertainment channel.

Opportunity Areas

Opportunity Area #1

Create consistency between the carousel cards by a standardized system of grids and multipliers.

Opportunity Area #2

Variety of container types for many use cases: media, discovery, navigation, and quick actions.

Building Blocks

Component Breakdown

There is an opportunity for creating a variety of container typologies to account for the various use cases. Additionally making use of existing components could helps with development of this component, taking advantage of existing section headers and type requirements.

1. Media 2x2 Carousel: Carousel for albums, playlists, and audible covers

2. Media 2x3 Carousel: Carousel for Kindle covers

3. Section Header: Existing component

4. Primary/Secondary Title: 2 lines of text max

5. 2x2 Carousel Card

6. 2x3 Carousel Card

Construction

Examining how these carousels would be constructed within the context of the app. The horizontal carousels make use of consistent margins at the beginning and end of a carousel, as well as spacing and padding.The visual affordance of a carousel peek while the carousel is mid-scroll.

Swiping Interactions

Factoring in research from sources as the Nielsen Norman Group to get a consensus as far as the best practices for carousels on mobile devices. Their study influenced the total number of swipes a carousel should contain, ultimately landing on no more than three swipes would be enough for 10 containers within a carousel. The study also called out swiping interactions, having the consistent use of margins at the beginning and end of the carousel gives the visual cue to the customer that they are interacting with a carousel. 

Updated Customer Experience (CX)

The updated Carousel makes use of section headers that factor in the consistent use of primary titles which impact the size, due to being constructed from smaller system components. With grid-based logic, the spacing and carousels, as well as making subtle tweaks to the corner radiuses create a more holistic carousel component, ultimately it makes it for an enhanced experience across the app for customers. The examples below shows the updated customer experience for customers on the Entertainment channel.

Updated Key Flow: Entertainment Channel

This is how the carousels can be implemented. Having the customer select an album from the Recently Played section triggers the device bottom sheet, to then have the customer select a speaker, which triggers the music bottom bar for Smart Home controls of the music. This is a great example of how cleaning up one single component and centralizing it has allowed it to show how a single component can trigger a full flow. This was essential for the Smart Home forward redesigns because this is a popular and critical task with our customer base and shows how music can be connected with the Smart Home controls. 

Learning Experiences

Invent and Simplify

Simplifying and standardizing a new component to create consistency across the app.

Frugality

Using existing Alexa Mobile App Design System components to build-out the new horizontal carousel allows for scalability and cost and time savings.

Related Items