The Challenge
In 2017 the Walt Disney Company formed a new business segment called The Walt Disney Direct-to-Consumer & International group. Many technology divisions from previous segments of the Walt Disney Company were merged in creating a new centralized engineering group. ABC, ABC News, Disney.com, Disney Movie Club, DisneyNOW, ESPN, ESPN+, ESPN Fantasy, FiveThirtyEight, Fox, Freeform, FX, Good Morning America, National Geographic, Marvel, Movies Anywhere, National Geographic, Oscars.com, Radio Disney, Star Wars, and Twentieth Century Studios were just some of the products merged in.
Scaling to support multiple brands and products quickly became a concern for the new group. A cross brand team was quickly formed and they began working on a design system project they would call Prism. Prism is a highly ambitious project. Most of these products did not have a preexisting design system and Prism needed to be able to scale to support a wide variety of applications while not feeling restrictive.
UX Engineering and Prism
Leading a unique group of hybrid of frontend engineering and designers, we were leveraged a lot to help develop the Prism design system. We provided technical expertise with the architecture and planning, built tooling, develop prototypes to stress test stuff, and finally built the Prism website documenting the entire system.
Prototypes and Stress Testing
Prism Universal Responsive Grid
To help demonstrate many of the concepts of Prism the UX Engineering team built prototypes and stress tests. One example of this is through how we helped build Prism’s universal grid system.
A grid system is one of the most important foundational elements of any good design system is its grid system. Prism has a universal grid with a variant called a detailed grid. These two grids are used to create every screen level layout in the Prism designs system. The team assist with developing these grids and built out prototypes demonstrating how the grid systems work in responsive and adaptive environments.
Prism Design System Website
The website acts as the source of truth for the Universal Design Framework, UX Guidelines, and Brand Style Guides, where no designer or engineer has to worry about information being out-of-date.
Aligning on approach and taxonomy across teams increases efficiency in conversations and product development and reduces the amount of time spent on day-to-day design elements that are repeated across brands.
The site was built with Next.js which allowed for rapid development of a static site. The team worked closely with the cross brand team design building components, layouts, doing deploys, and even design work.
Sketch plugin
I built and designed a Sketch plug-in called the DTCI Design Assistant will allow designers to grab symbols from Prism and quickly apply their brand styles or grab a full-screen experience from another brand and switch styles to their own.
The hope is that the plugin will speed up creation of layouts and comps that adhere to the Prism design system. We have hopes to expand the plugin to help manage library dependencies and automatically layout objects based on Prism’s universal grid system.
Results
Prism is just starting to become integrated into the design workflow of all of our products, starting with Marvel Unlimited and National Geographic. Prism has already helped our design team not only accelerate its workflow but also help us communicate. With one large common spec, working cooperatively across multiple teams has been a lot easier. Prism will continue to grow and shape the way we think about design here at the Walt Disney Company.