Netflix 

Netflix 

Netflix 

Back

Overview

Component Docs

Expansion Packs

Netflix: Hawkins Design System

Creating Design System Expansion Packs

During my time at Netflix, I was placed on multiple high-stake Design System initiatives. Some of my roles focused on updating components and redesigning documentation, while my primary project was delegated to leading the development of the in-file architecture for design libraries within Figma to help Product Design teams bootstrap and manage local design libraries.

project turn-around

<2

Weeks of internal research, design, and deployment throughout Figma.

Design adoption

100+

Consumer & Internal components now leverage my new doc system.

My first internship experience.

My summer was a great time of first experiences: working in a corporate team, trying out rock climbing, and learning system design! Not only was this my first experience, but I was also Netflix's first Product Design intern!

Jump to a Project

Component Documentation

Making Figma documentation easily editable and unified.

Expansion Packs

Enabling Product Teams to create and manage local design systems.

COMPONENT DOCUMENTATION

Making Component Docs Easy & Automated

To communicate the do's and dont's of a UI component, documentation is used within Figma files for designers and developers to read. However, Netflix's design system docs were inconsistent and cumbersome, creating confusion for readers or doc editors.

Visual Inconsistency

Component docs can vary in style and content in each Figma file.

No Prior Guidance

Editors were unsure how to update or add to existing docs.

Manual Updates

Updates to the component meant manually editing all doc visuals.

Understanding how teams use component docs.

With each design system's component docs looking different,
I outreached across design system teams to understand what patterns worked in their component docs and what didn't.

With each design system's component docs looking different, I outreached across design system teams to understand what patterns worked in their component docs and what didn't.

Creating measurable design features.

To make sure my design aligns with product teams' needs, I created goals that I could use to ensure my solution addressed the prior mentioned pain points successfully.

GOAL 1

Increase editing efficiency.

In order for the design system to adapt to the ever-changing needs of Netflix's platforms, any documentation should be equally adaptive to reflect new updates.

GOAL 2

Understandable across teams.

Any team, such as product design or engineering should easily understand the documentation without adding any additional learning curve.

GOAL 3

Scalable across all products.

With many internal and consumer-based products that Netflix houses, the documentation should act as a unifying guide, recognizable from file to file.

The Finalized Design

The result of my designs would lead to a complete over-hall of Netflix's component documentation going forward. These designs were then pitched to the entire Design Department (100+ people), to gain reaction and give feedback.

Modular Layout

Designers can plug and play with documentation sections and can add and filter for optional layouts to best suit the component's needs.

Swappable Components

From dropping in components, to changing dark/light mode variants, all can be done automatically without need to change the layer itself.

Seamless Integration

When new changes are done to the component library, all components within a doc. can immediately update, even if nested within other components.

EXPANSION PACKS

A System That Works for Everyone.

Creating and managing a multi-product design system can become stressful at scale. In order to establish successful communication and management practices across each product, I developed templatized architecture within Figma.

Hawkins Core Design System

Product Teams

Expansion Packs (Local Systems)

Ideation

Creating a Figma framework

Thorough attention was given as I worked hand-in-hand with product design teams to curate a categorized framework that would help build a template with broad usefulness across the department.

Shifting my role from UX Lead to Visual Design, I helped lead our revisionary meetings, correcting and communicating 2D elements into 3D atmospheres.

This stage within our process was extremely iterative, being careful to explore creative paths while still incorporating this year's CBS Super Bowl branding.

Thorough attention was given as I worked hand-in-hand with product design teams to curate a categorized framework that would help build a template with broad usefulness across the department.

Design

Crafting the visual experience

Once the framework was finally established, I developed file assets to help bootstrap content into each of their respective sections and pages.

Shifting my role from UX Lead to Visual Design, I helped lead our revisionary meetings, correcting and communicating 2D elements into 3D atmospheres. This stage within our process was extremely iterative, being careful to explore creative paths while still incorporating this year's CBS Super Bowl branding.

Once the framework was finally established, I developed file assets to help bootstrap content into each of their respective sections and pages.