Prime Video2022 – 2025
Scaling the Fable design system across Prime Video Commerce
I led the creation and adoption of Fable components for Prime Video Commerce, replacing individually built screens and inconsistent interactions with reusable, cross-platform patterns.
Role
Senior UX Designer
Timeline
3 months
Scope
All Commerce platforms
Target
80% adoption within three quarters
The Challenge
Prime Video launched Fable, a new design system initially created for the search and browse experience. But Fable had not yet reached every part of the product. Commerce experiences, including marketing landing pages, channel subscriptions, and payments, still needed to be brought into the system.
This presented a fundamental challenge: Fable had been designed primarily for visual content discovery, while Commerce consisted of text-heavy, interaction-heavy conversion funnels. The system needed new components and patterns that could support these experiences while remaining recognizably Fable.
The work also had to scale across nearly every screen-based form factor, from smart TVs and streaming devices to responsive web and native mobile apps. Many existing Commerce screens had been built as individual templates using only a style guide, resulting in different layouts, interactions, and implementations for similar experiences.
The timeline was aggressive. In three months, we needed to produce current-to-Fable specifications for every screen in scope across all supported platforms. These specifications would enable Prime Video to reach its goal of implementing Fable across 80% of the experience within three quarters.
The Mandate
To support rapid implementation without compromising business performance, the work needed to:
Standardize the experience: Consolidate individually built screens into a smaller set of reusable templates.
Extend Fable: Design and implement new components for text-heavy, interactive Commerce experiences.
Create a foundation for future work: Document the new components, templates, and usage guidance so teams could consistently build upon them.
Do no harm: Maintain or improve conversion at both the individual-screen level and across the complete customer journey.
OUTCOME
Up to 96% fewer templates
Individually built screens for key Commerce experiences were consolidated into reusable Fable components and standardized cross-platform patterns.
The Audit
To understand the full scope of the project, I organized an audit of the existing Prime Video Commerce experience. As a new member of the team, I enlisted designers with deeper domain knowledge to identify and map every relevant screen, flow, and platform variation. Together, we created a comprehensive view of the experience and established the foundation for the work ahead.
Aligning Product and Engineering
The design team took the experience audit map on the road to London, where our Product, Business, and Development partners were based.
The design system team had an aggressive goal of implementing Fable across 80% of the Prime Video experience within 12 months all while releasing features on a similarly aggressive roadmap.
It was vital to sell the virtues of the design system to product and engineering partners while convincing them to integrate the implementation into their currently planned work.
We printed out screenshots based on the map we made back in the States and taped it to the wall. Engineers, stakeholders, product managers, and designers collaborated with color and shape coded Post-Its to identify if a screen had already been built with Fable, is in the process of being built in Fable, or is needing an updated UI before being built in Fable. Only a few pages in the Commerce section of the Prime Video experience had been built using Fable. These were mainly the pages that were common to the Commerce and Search and Browse experiences.
Reducing Complexity to Accelerate Development
Prime Video was spun up quickly and, as a result, most of the screens in the experience were built as one-offs. This meant that the experience needed to be “templatized” in order to facilitate a rapid deployment of the design system – as well as to implement a grounded and consistent experience for customers.
In order to achieve this templatization, it was necessary to work with the Fable core team as well as product managers and stakeholders across Prime Video from around the world.
Extending Fable for Commerce
Fable was initially implemented for the Prime Video search and browse experience. This meant that very few of the visual browse-oriented components covered scenarios for my team, Commerce, which is responsible for the transactional portions of the experience; subscribing, renting, purchasing, account management, subscription management, etc.
These components included not only items like fully functional text input fields, it also covered how those components would be built as patterns within the interface.
Commerce was able to manage their own patterns (combinations of Fable components), but the addition of a new component to the Fable Design System involved an evaluation and projection of its repeated use, several rounds of collaborative iteration between the Commerce and Fable team members, and user testing.
Scaling Fable Adoption Through Education
As an alpha tester for Fable, I developed early expertise in how its components, tokens, and responsive behaviors were implemented in Figma. I turned that knowledge into practical guidance for designers across the broader Prime Video organization.
Through weekly lunch-and-learn sessions, I demonstrated how to generate configurable components, apply Fable tokens, implement responsive breakpoints, and work effectively within the system. These sessions gave designers techniques they could immediately apply and helped establish more consistent design-system practices across teams.
Reflection
Scaling a design system is as much an organizational challenge as a component exercise. Audits, cross-functional alignment, documentation, and education gave teams a shared understanding of the experience and a practical path to implementation.
By treating Commerce as a connected system, we consolidated one-off designs into up to 96% fewer templates while adding new components only when recurring needs justified them.
The result was a repeatable foundation that balanced consistency, platform needs, implementation speed, and business performance.
