DISNEY STREAMING DESIGN SYSTEMS

Multi-brand Design Systems for Disney+ / Star+ / Hulu

Multi-brand Design Systems for Disney+ / Star+ / Hulu

Multi-brand Design Systems for Disney+ / Star+ / Hulu

Team

Disney Streaming

Scope

Design Operations Component Creation Program Management

Platforms

Web, Mobile, Connected TV

Date

2020 - 2022

The Disney Streaming Design Systems group is a horizontal team that collaborates across product design and engineering partners. Starting out initially supporting only Disney+, we grew to support Star+ and Hulu design systems. I was the Product Design Manager of the team, which grew from 3 team members, to 8 members. Spun up originally under a Design Ops team, I was able to establish the end-to-end engagement process for designers working with designers, and led Design Systems and Design Delivery to engineering.

The Disney Streaming Design Systems group is a horizontal team that collaborates across product design and engineering partners. Starting out initially supporting only Disney+, we grew to support Star+ and Hulu design systems. I was the Product Design Manager of the team, which grew from 3 team members, to 8 members. Spun up originally under a Design Ops team, I was able to establish the end-to-end engagement process for designers working with designers, and led Design Systems and Design Delivery to engineering.

The Disney Streaming Design Systems group is a horizontal team that collaborates across product design and engineering partners. Starting out initially supporting only Disney+, we grew to support Star+ and Hulu design systems. I was the Product Design Manager of the team, which grew from 3 team members, to 8 members. Spun up originally under a Design Ops team, I was able to establish the end-to-end engagement process for designers working with designers, and led Design Systems and Design Delivery to engineering.

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.

From Product Designer to Design Systems Years 0-1

I came into Design Systems like many others carving out a niche, and managing 2 primary areas as one of the first 5 product designers on Disney+.

  1. Web platform lead: Managing all our components and screen designs produced for our content discovery team (consumer facing, video watching and browsing experience).

  2. Video player lead: Designed full end-to-end UX for our video player for web, mobile, and connected TV.

After our launch at the end of 2019, I spent the 6 months prior getting buy in to be our first official Design Systems IC, took on a team of 2 other IC, and later built out a team of 8 product designers, a design program manager, and a design technologist.

Simpifying our design deliverables

  • Facilitated workshops 2x a week for this 1st month

  • Heavy focus on better management of Sketch files in Abstract, then organizing of components to common schema across the 3 component libraries.

  • In diagram above, tested a pilot of doing a white-label, unthemed component library that we can theme our Disney+ components over to Star+.

  • Audit of existing component libraries to understand how we can better abstract components that have simple variants, like buttons 

  • We had tried to transfer the same thinking to Figma, but at the time, the theming and nested component functionality we needed didn’t exist yet.

Routines and engagement

  • Fortunate case of being embedded in Design Ops to start, we were able to mandate designers reviewing work with design system team via our office hours, and created xs-sized JIRA tickets that we utilized DPM to enforce. 

  • We helped the product design team with a JIRA framework for task tracking to document activities from design discovery to design delivery

Running a Pilot

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

Hi I'm Davy, a Product Design Lead supporting Meta Business Design Systems

Hi I'm Davy, a Product Design Lead supporting Meta Business Design Systems

Hi I'm Davy, a Product Design Lead supporting Meta Business Design Systems