Alexa Design System

Context

The Alexa Design System serves as the foundation for all Echo Show devices.

Since 2018, I’ve been working with teams to enhance the Alexa Design System to accommodate new features, technology stacks, and successive generations of devices within the evolving Echo Show device family.

Role

My expertise lies in bridging the gap between design and engineering seamlessly.

I collaborate with diverse design and engineering teams to explore requirements, primarily partnering with my Senior Lead to divide and conquer complex technical design system challenges.

At a granular level, I meticulously consider all technical risks and limitations, encapsulating designs with an additional layer of technical proof of concept to ensure feasibility, compatibility, scalability, and accessibility across devices.

At a systemic level, I strategize on extending solutions to support a wide range of use cases, from accommodating various device shapes and sizes to expanding compatibility across multiple technical stacks.

I’m also responsible for translating designs into reusable components, templates, and design tokens. My goal is to structure those building blocks most efficiently, ensuring they are not only easy for experience makers to use, but also easy to maintain when changes happen.

Challenges & Solutions

01 /

Balancing system design with custom needs

Introducing new features often prompts the creation of custom designs. However, if teams become overly enthusiastic and develop various custom designs, they may waste resources on reinventing the wheels. Moreover, customers would need to invest time in learning how to navigate different layouts or utilize disparate components, even though they could essentially be the same.

As I work horizontally with various teams within Amazon Device, I play an essential role in identifying and standardizing shared patterns, enabling experience makers to integrate flexible templates like plug-and-play.

However, does this mean rejecting every custom design outright? Not necessarily. While I serve as a gatekeeper to prevent domain features from deviating too far from existing design system conventions, I also actively seek out trending and valuable custom patterns. A sustainable design system should offer a two-way door, enabling both distribution from the design system team and contribution from those who utilize the system.

02 /

Scaling across devices and various modalities

Supporting new devices always presents an exciting challenge. From expansive screens like Fire TV, to smaller phone-sized displays like Echo Show 5, and even compact, rounded devices like Echo Spot, the wide range of devices with differing shapes, sizes, resolutions, and modalities offers both opportunities and challenges.

How can we ensure that one design remains flexible enough to function effectively across all these devices? And how can we streamline the design process to achieve more with less, especially when multi-device support is unavoidable?

I collaborate closely with partner teams to detail out the specific requirements of each device. By identifying opportunities to simplify the design workload through the introduction of breakpoints, viewport profiles, DP unit-based design environments, scaling logics, and other techniques, we carefully integrate these guidelines and guardrails into the design system, paving the way for future design and development.

03 /

Evolving with the technologies

The evolution of technical stacks also brought challenges for design integration. Our design system started with Android and then expanded to Web-based and Linux-based technologies. From a design perspective, a screen is simply made from layers and groups with distinct stylings. But from my engineering standpoint, it might need to involve different technologies to build a screen due to various technical concerns and limitations.

Since each technology has its standards for UI development, I work closely with engineering to ensure design building blocks are aligned with engineering’s best practices. The goal is to bring designs to life with technical feasibility, compatibility, and accessibility.

With my experience in front-end development, I also help translate designs into detailed tech specs in different engineering languages and prepare optimized assets curated for each device and tech stack.

The Alexa Design System has evolved from supporting the v1 device to encompassing over 10 devices over the past 7 years.

For a detailed case studies walk-through, please reach out.

error: Selection is disabled for content protection.