Building a foundation that establishes scalable user experiences between publishers and retail customers.
How I launched the Gotham design system, which became the driving force of a centralized design language across Amazon Games.
Context
I joined Amazon with the unique opportunity to unify several organizations under one design language while growing Amazon Games as a brand. This became the Gotham design system.
As Amazon Games and their offerings grew, we needed ways to rapidly market and sell digital media as well as mixed digital and physical goods. I set out to design and build a system that enables this while enhancing experiences for fun and entertainment.
The Amazon Games brand was lacking consistency but needed to act as the glue between multiple organizations (Amazon, Prime Gaming, Twitch) each with its own fragmented or singular styles and branding. This caused customers to perceive them as disconnected entities. It also caused internal teams to silo themselves, each building their own tools and styles or even using outdated systems.
Goals and Benefits
I needed to organize the business requirements of these separate but related groups and consolidate them into a consistent, cohesive system. I focused on these key benefits:
A source of truth for best practices, components, patterns, and styles.
Establish a culture of collaboration and knowledge-sharing.
A unified design language across teams while eliminating inconsistencies.
A theme-able and extensible system for both internal and third party brands.
Designers and developers can concentrate their focus on solving business problems
Approach
Laying the groundwork. How could the UX team create a scalable design system that would allow Amazon orgs and third party publishers to cohere to the Games brand?
Understand the users and customers
Leverage products and features to inform design system decisions
Compile requirements, products, features, and extract them to put into the design system
Working directly with designers and developers from supported teams, I pulled out and arranged components and patterns that could become part of the design system based on their requirements and properties. I discovered the types of things I would need to inform the design system decisions such as layouts, treatments of media elements, how the typography system should work, and what should become tokens and how to name them.
Additional samples and details of my work are available here while I complete a case study describing the culmination of my experiences and contributions at Amazon Games.
Theme Tokens
I built a search tool in the design system documentation site to make it easy for developers to quickly find tokens. This was part of a theme token re-structuring I did so the theme could be more widely and easily used across products. Rather than requiring a React app, the theme and tokens could now be used as a standalone package (or even file).
Button Component (for example)
An overview of the button component featuring all of its variants, states, and properties in both light and dark modes.
Button Variants
The Button component in action on a documentation page, showcasing the Figma component's properties and variants.
Motion
I designed and established motion guidelines, templates, and tokens for interactive components in the design system with live prototypes for both designers and developers.
Motion in Action
