MOVE TO FIGMA + THEMING
Team
Disney Streaming
Scope
Design Operations Component Creation Program Management
Platforms
Web, Mobile, Connected TV
Date
2020 - 2022
OKR: Increase velocity of the product development process through system usage
Cut down design deliverables handed off to engineering by 30%.
Scale Asian-Pacific launch with unified type ramp.
OKR: Increase adoption of design system across design and engineering
Achieve 80% usage of new design system components for Star+ launch deliverables.
For Star+ and future pilots with modifications to existing templates, achieve 60% of specs via theming our decoder ring framework (focus on deltas).
OKR: Integrate design system program with product design process
Track newly created DSNSYMS board, every design system task in parallel to product design JIRA board 1:1 and triage 1x a week with DPM.
Meet with design leads to give status up to design leadership daily.
Co-lead a front ends dev design system working group with engineering leads where we can get early feedback on design system deliverables once-a-week.
Training
In addition to us jumping from 0-1 in Figma, our team held moderated training sessions for a quarter, where we would break down common Figma behavior and reinforce how to utilize our component and template libraries. We utilized our 2x weekly office hours to answer any follow up questions and showcase our new components by live pairing with designers in the Figma.
Outcomes
This was the work of the entire team under myself as the Product Design Manager. Over the course of 6 months we got the new library launched. With the previous work on Star+ with developing tokens, we were able to swap themes easily within Figma to help speed up and simplify the amount of work to create the libraries themselves. Over the course of 3 months, we were able to provide training to our Figma Advocates group, 2 members per product team, and through the help of our design leads, help touch base with every designer on the team to pair on building components in their feature area.
Transition
As we start centralizing our brands under 1 design system team, we moved brands under 1 Figma team, and have been workshopping new ideas of Figma project statuses.
My principal designer on the Hulu design systems team had introduced to us effective ways to manage teams/projects/files, while our 3 core system designers on Disney+ spent 6 months rebuilding our component and template library in Figma. As our team expanded to support multiple brands, we evolved our taxonomy and file hygiene practices that worked well for Sketch, and kept whatever would translate to Figma.
A major portion of our design system team duties and maintenance of the product design canon for Disney+. A large part of this previously was maintaining our component library, in addition to the core screen designs that we help deliver to engineering. We utilized this time to double down on what we learned from our Star pilot, and focused on maintaining screen templates per feature.
Refactoring the libraries to support white-label and sub-components
The timing of forming our team right after we were starting work on a new app, Star+ that we needed to launch within 9 months. Starting in Jan 2021 for design discovery and launching the app in Latin American markets in Aug 2021. We took this opportunity to tackle various facets of the product design process to ensure the design systems team (currently 3 members) could effective support and scale in the future.
JIRA task templates, on product design board <> design system team board
design system engagement and governance utilizing office hours
simplified design delivery process, with focus on delivering less screen artifacts to engineering