12+ Hand-Crafted Brands. 200+ Digital Products Worldwide.
1 Design System. Distinctly Disney.
MULTI-BRAND DESIGN SYSTEM FOR THE WALT DISNEY COMPANY | DESIGN MANAGER
3 YEAR DISCOVERY, MVP, LAUNCH AND GROWTH
introduction
The Walt Disney Company creates and curates iconic media, delivering it to a global audience 24/7. In an ever-evolving tech landscape, Disney has continued to lead the industry with innovative digital products that inform, entertain, and inspire the households that use these products daily.
In order to drive Disney’s mission of building the ultimate storytelling platform, the Disney Entertainment and ESPN Technology design team must deliver high-quality, hand-crafted experiences at an industrial scale.Looking across the products in our portfolio, we have a large number of overlapping scenarios which we had historically approach in silos.
So it was critical we evolve the way we design.
the opportunity
Artfully implement and market a white-label, multi-brand, multi-platform design system that enables efficient and consistent product, design and development delivery while promoting brand uniqueness and high-quality user experiences. The proposed ecosystem would empower teams to spend more time innovating by creating a foundation of reusable foundational features- enabling more Disney magic across sports, news, entertainment, studios, and streaming.
Final deliverables would include an internally hosted Design Documentation Website, Figma Component and Variable Library Resources to support teams globally, with accompanying code repositories ready for use in production.
the process
An audit was conducted, encompassing all products in the Disney portfolio, to analyze experiences down to the atomic level. This uncovered high value areas in need of alignment across the vast suite of products. Collapsing these differences down into a single source of truth became the north star for the design system, leading to a suite of best-in-class design solutions for all brands and products.
∆
Beginning by crafting streamlined design documentation for an internal Prism website solidified a single source of truth for design, engineer and product stakeholder teams. It also clarified the architecture for the final design component library deliverables.
Meticulous design component specs were drafted and finalized for engineers, detailing a newly enhanced set of adjustable variables for each design element. This flexibility was integral for the design system’s success across multiple brands.
Based on the detailed blueprints in the design specs, brand-agnostic, lightweight Figma components housed in an intuitive Prism Design library structure were crafted and launched.
Creating branded version of these libraries was a top priority for streamlining day-to-day design work across dozens of brand teams.
Universal systems for Color and Typography compatible with the design components were established to systematize brand visual identity.
Universal styles became Figma Variables that were used to create Brand Themes that could be translated into design tokens across iOS, android, and JSON as well as almost a dozen Connected Devices platforms.
Templates for highly-repeated pages and user flows across the products were launched using each piece of the design system. Using these templates decreased design and engineering hours spent building and improved crucial subscription and DAU/MAU metrics.
Production-quality code was produced from component, style and template specs to create a proprietary ReactJS front-end infrastructure, tooling and technology repository and native SwiftUI and Jetpack Compose code repositories. Since their creation, they’ve been responsible for the launch of 4 mobile applications and countless web feature improvements.
∆
The Prism design system visual identity was integral in ensuring stakeholder trust and adoption. Prism is an agnostic system, unrelated to any brands in our portfolio but still distinctly Disney. The goal with its branding was to inspire delight using classic Disney traits while reflecting the expert finish associated with high-quality products. A scalable identity was crafted that felt distinctly consumer-facing and aligned to the standards set by the design system itself, creating a roadmap for other brands to do the same. References to classic Disney themes inspired a soft and approachable logotype (had to give a small ode to the Mickey head!) and an appropriate use of blues, while more dramatic themes taken from Marvel and Star Wars inspired a mix of isometric and 2D illustration styles.
the solution
The Prism Design System unifies a behemoth portfolio of diverse brands, products and platforms through a comprehensive set of design frameworks, tools, documentation and code. It does this by being unwaveringly rooted in a deep understanding of and respect for the nuances across the landscape it must support to be successful. Since its introduction in team workflows, the design system has proven to not only drive efficiency and consistency- it has proven to be a best-in-class solution for driving design quality, innovation and scalability. Its impact has been seen through a measurable increase in design consistency, user perception and happiness, speed to market, cross-platform feature integration, and effective collaboration across product, design and engineering teams. The design system offered a novel, scalable approach to reimagining the future of Disney’s direct-to-consumer products through a well-crafted and effective design ecosystem.
Prism continues to actively support live products and experiences across sports, news, entertainment and streaming.
A Note About My Role
My journey with Prism began in 2019 as a junior designer, eager to contribute to the company's design vision. As I delved into the project, I gained a deep understanding of Disney's diverse product portfolio and the challenges faced by design, product, and engineering teams. My passion for design and problem-solving led me to take on a more prominent role, managing a team of designers and overseeing the development of Prism's core components, documentation and it’s impact across a Fortune 100 company.