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.
Fire TV Design System
This design system is one that I fully built and owned. As part of a transition to unify all device design systems in Figma, I rebuilt the system from scratch from it’s original home in InVision, including all styles, components, patterns, and templates. Like all Amazon systems, Fire TV was built using atomic principles, and included extensive use of Figma’s advanced features, such as variables, modes, component properties, nested instances.
Components and templates
Amazon devices are built on Android, with native OOBE setup overlaid with an APL (Amazon programming language) layer that runs the app interface. This project included the creation of both Android OOBE and APL-based component libraries and templates. The following shows samples of components for both APL components and Android templates.
Button and Title components
Because the Fire TV UI is built with a programming language, components with colored backgrounds require a background asset for all states, as can be seen in the following components. This is opposed to web-based components that would have a fill color applied to the outer frame.
List Item components
Touch Keypad components
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 engineers. 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.
The Keypad component is a good example of this principle. Below the final component, which includes just 5 variants, the complex nested structure can be seen. This level of detail was necessary to provide fully interactive components and prototypes.
Badge and Tag components
As with all TV apps, badges and tags are needed to display applicable ratings and program information to users. Ratings and tag types vary across networks and countries, and a lot of research went into identifying these details for countries where Fire TV exists. However, many rating types that exist in the US aren’t used elsewhere. For example, at the time of writing, Canada didn’t have an applicable “Games and Apps” rating system. To future-proof this component, the grid system in shown below was designed such that any missing rating types can simply be added in the appropriate empty spaces within the sub-components without the need to expand or re-format the grid.
Tile components
The Tile components are, perhaps, the most used complex components in the system. The Image Tile includes a number of nested components that can be toggled on / off, and combined in a multitude of ways. In keeping with our team’s methods, the final component includes just 2 variants with dozens of configuration parameters in the component panel.
Card components
Templates (sampling)
Program details screen
Profile selector screen
Video input screen
User library screen
Fire TV Mobile Design System
The design system included components for mobile and other touch-enabled devices, such as auto and in-flight TV devices. Because of the variable nature of these external devices, these components were built to scale up from 1280x720dp and included only this grid dimension.
Fire TV Mobile Component Sampling // Program Details Device Mockup
Adoption success
The creation of the Fire TV Design Systems were part of a department-wide migration to Figma. Previously, CX teams managed their own design systems on various platforms, which created chaos and disharmony for designers and engineers. As such, Amazon made the decision to migrate (or recreate from scratch) all device design systems in Figma to form a more harmonious ecosystem that brought consistency to design, and parity to code. Thus, the “Bridge Team” was formed, consisting of 9 system designers, including myself, who migrated or recreated, owned, managed, and supported all device design systems, documentation, and template libraries – approximately 24 device-specific design systems, plus the core Alexa Design System that was a shared responsibility.
Support and training
Once the primary systems were ready for launch with consistent interfaces, and detailed specs and documentation, we launched a comprehensive department-wide adoption and support campaign consisting of a video training library, office hours, intake forms, regular video and newsletter updates, and routine live training sessions. We followed up the campaign with a survey that showed a 78% positive rating of the new design systems themselves, as well as the support efforts from our team.
Team culture
To further promote and facilitate adoption, we worked to position our team as:
- Highly dependable, approachable, and extra helpful. We worked to form good working relationships with our designers and developers by happily assisting, even when requests were outside of our typical scope.
- Always supportive with quick turnaround times, attention to detail, and inclusive collaboration. Although it was sometimes difficult, we worked to ensure the shortest turnaround times possible.
- Experts in user-centered solutions that reduce cognitive load and make the jobs of our users easier. We extended our support beyond just managing the systems, to consulting and formulating solutions for CX and engineering teams.
The result was a measurable successful adoption across the CX and engineering teams, and a smooth and easy support process. An additional perk of our support efforts was the formation of improved collaboration among the CX teams, themselves, and the breaking down of silos that previously created separation and hindered collaboration.