Enterprise Design System (Netflix)

An expanded design system based upon product-specific requirements. The new library empowers designers to meet the unique business-needs of their customers via ‘Content Hub’

Context: What is Content Hub?

Content Hub is a robust platform that supports post-production workflows & studio operations teams (over 7k daily users). There are 5 primary surfaces that cover various stages in the production cycle. Below are screenshots of the tool prior to the work I completed.

Problem

Content Hub designers lack the components needed from Hawkins (ie Netflix’s Enterprise Design System) to serve the business goals of their users.

Solution: Deliver an ‘Expansion Pack’

My role was to deliver an extended net-new library – specific to the Content Hub product. This expansion pack would serve the needs of 5 product designers across all surface areas.

My role: Lead product designer

Collaborated with: Design manager, 5 product designers, 2 product managers, 1 engineering lead

Goals

Standardize

Offer consistency across all surfaces areas including within each. Upon identifying key opportunities, I should to not only up-level the library, but also standardize components across the platform.

Guide

Provide clear, actionable guidance for how components are used including the use cases which they should be leveraged. The guidance should cover foundational styles, in addition to more mature components.

Templatize

Build one ‘component-ized’, out-of-the-box template for designers to grab as a starting point to eliminate the need to re-design their surfaces. This template should serve all 5 members of the design team.

Discovery

Step 1: Audit

The first step was to conduct a large scale audit across all surface areas, evaluating typography, color, iconography, components, layouts, and more. I identified a robust list of opportunities.

Step 2: Team Workshop

Based upon the opportunities I identified, I had the team think about which ones would ultimately offer the most impact in their workflows. I ordered the impact areas, synthesized high level takeaways, and concluded with listing the items in a roadmap format.

Step 3: Visualize

In an effort to help stakeholders visualize my plan, I created this artifact based on the atomic model.

Typography

As a key foundational style, I kicked off the project with typography, starting with an extensive audit. I observed opportunities for consistency across each surface area, including standardizing style types.

After the audit, I developed a ‘data’ style system. ‘Data’ includes 2 type concepts: Values and Labels – the two most common styles across Content Hub. These became atoms. From there, I built up into ‘Data Blocks’ and ‘Data Groups’. Designers can use these building blocks to create various type-heavy layouts.

Color

Through my color audit, I identified 15 different colors – used differently across all surface areas including labels, badges, icons, etc. I was able to distill this color library down to 7. These colors also needed to account for dark / light mode.

Additionally, one of the teams this library serves needed a feature-specific palette with complex components across both solid and transparent styles. As an extension of the color library, I created usage principles and application concepts depending on the use cases.

Iconography

Iconography plays a critical role in Content Hub since they not only signal actions, they represent highly nuanced production concepts in the film industry. Beginning with an audit, I identified style inconsistencies, and usage differences across surfaces areas.

Our Product partners had a stake in iconography given their deep knowledge of production processes. In order to align on a consistent set of icons, I facilitated an association exercise to identify concept mental models. Additionally, I ended up creating new icons to account for gaps.

Cards

Cards contain complex production data that lives within the Side Panel. Each card functions differently depending on the surface area.

After completing an audit across the surface areas, I began an exercise in standardizing the patterns, components, and overall layout using the foundational styles I established from the start. The second image shows the 8 use cases created from a single Side Panel component.

Side Panel