Amazon

Seattle, Washington

Project type

  • Design systems
  • Component builds
  • Template library
  • Specs and documentation

My role

  • Sr system designer (UX Designer V)
  • Design system technologist

Devices & Design Group

Within the Devices & Design Group at Amazon (2020-2023), our team of 9 System Designers and Technologists created, maintained, and owned the design systems for all of Amazon’s devices. My focus was working with our interaction and CX designers to build or upgrade feature-rich, streamlined components that synched closely with their functionality in code, and maximized usability. My scope was mainly within the Alexa core, Fire TV, and Echo family design systems. 

Alexa Design System

The Alexa Design System (ADS) is Amazon’s core system. Prime Video and later versions of Echo Show devices are perhaps the most recognizable ADS component interfaces. The following are in-depth demos of two new ADS components that I built: the Alexa Card and Video Slider Ad Markers.

Component Build Demo: Alexa Card Component

A guiding principle that was strongly emphasized in our team was user-centered design; the idea that we put in the work behind the scenes to ensure the easiest user experience for our designers and developers. That means component builds were often highly complex and sprawling within the system, but small and streamlined in use, which brought simplicity and intuitiveness to the user.

As with all component builds for Amazon, the goal with the Card was to create a single component that includes all devices / viewports, advanced component properties that allow full configuration from the component panel, color modes, and the smallest footprint for the end user. With over 100,000 calculated permutations, this component was planned out in advance to ensure the leanest structure while maximizing design flexibility.

User features
  • 3 fluid Card styles, each with unique layouts and features.
  • 4 interactive states per card (Normal, Focused, Pressed, Disabled).
  • User can update text and imagery universally across all devices / viewports, states, and layout types.
  • User can toggle and customize all elements, such as the Header, Metadata, Progress Bar, Scrims, Content Rows, etc.
  • 2 themes, Dark and Light (note: this project was before variables and modes were introduced).
Component features
  • Considerations for nested components to ensure universal changes via the component panel are possible (Figma only allows this for 2 nested components deep).
  • Maximum use of component properties, particularly boolean layer and text properties.
  • Goal to enable all configuration via the component panel.
  • Inclusive of multiple device types and viewports (6 device total, plus all applicable TVs).
Alexa Card Component Device Mockup (Echo Show 15)
Alexa Card Component Walkthrough
Alexa Card Atomic Structure  //  Component Preview
⇆
Alexa Card Atomic Structure  //  Nested structure

Component Build Demo: Alexa Slider + Ad Marker Components

As Amazon was just introducing ads to Prime Video, the core Alexa Design System Slider component needed to be updated to reflect this new feature. For this component, I worked with an interaction designer to understand the requirements and functionality of the component, as well as formulate the best way to integrate the component into the design system.

On the surface, the Ad Marker component seems very simple. However, I chose to demo this particular component because it includes some nifty Figma hacks for allowing the user to control the widths and positioning of the ad markers, progress fill, and buffer fill, which is a feature Figma technically doesn’t allow. Below are demos of how that functionality was achieved. 

User features
  • User can toggle on / off up to 5 ad markers.
  • User can control width of the progress fill, buffer fill, and ad markers.
  • User can control the position of ad markers.
  • 2 themes, Dark and Light (note: this project was before variables and modes were introduced).
Component features
  • Auto-layout hacks to allow user to control width and position of nested instances.
  • Use of boolean component properties to display ad markers.
  • Inclusive of multiple device types and viewports.
Alexa Slider + Ad Marker Atomic Structure  //  Prime Video Device Mockup (iPad)
⇆
Alexa Slider + Ad Marker Components Walkthrough

Widget Gallery templates

The Widget Gallery is a common interface that’s included in all Echo Show devices. This feature allows users to customize a collection of widgets to show various content, such as weather, to-do lists, calendar, photos, and more. The following shows select screens from the Widget Gallery mocked up on an Echo Show 15 device, as well as the custom components built to create these layouts.