Netflix
Netflix
Netflix

Netflix: Hawkins Design System

Streamlining the creation of local design libraries.

Overview

Systems Design at Netflix works across a variety of mediums and different external and internal products around the company. A large majority of this work is designated to component design, management, and deployment, as well as creating the fundamental system architecture for managing these robust design systems.

Approach

During my time at Netflix, I was placed on multiple diverse projects. 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.

roles

Product Design
Systems Design
Info. Architecture

Timeline

10 Weeks

Teammates

Expansion Pack Working Group

Expansion Pack
Working Group

Tools

Figma, FigJam, Jitter

Figma,
FigJam,
Jitter

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!

Featured Projects

Two of my most featured projects that I presented to all of Netflix's Design Department.

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.

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

Without guidance, editors felt unsure how to edit or create new docs.

Manual Updates

Any 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.

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.

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.

01. Increase editing efficiency

02. Understandable for designers & engineers

03. Scalable across other design systems

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.

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.

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.

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.

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

Impact & Outcomes

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.

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.

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.

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.

This Project is Under NDA

Thank you for showing interest in my work.
If you'd like to learn more about this project, please reach out!

OurReef

24h Design Challenge

OurReef

24h Design Challenge

OurReef

24h Design Challenge

Superbloom

Website Redesign

Superbloom

Website Redesign

Superbloom

Website Redesign

All projects