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.