← Back to Projects
Netflix·2020 – 2022·Design Systems

Hawkins Design System.

While at Netflix, I mostly worked on creating, extending, and maintaining components for Hawkins Professional — the design system used to build internal tools at Netflix.

Hawkins Design System
Hawkins Design System

What is Hawkins?

Hawkins — named after the fictional town where Stranger Things events occur — is Netflix's Design System. It comes in two flavors: Hawkins Consumer, tailored for any member-facing experiences including streaming, and Hawkins Professional, tailored for enterprise-level workflow built by Netflix Studio and also internal tools.

Hawkins Town illustration
Hawkins Town by Martin Bekerman

From request to release.

I'd like to walk you through how we operated — from the request of a feature to its publishing.

01

Backlog

Most requests came through Slack channels. Sometimes the ask was to create a brand-new component, sometimes to extend an existing one, and other times simply a bug report. Everything was logged into our backlog in Trello.

Backlog in Trello
Backlog in Trello
02

Voting

Each quarter we'd pack all our requests and over 50 Product Designers would vote on the tasks they wanted us to work on. Designers were excited to participate in shaping our roadmap.

Quarterly voting system
Quarterly Voting System
03

Roadmap

After voting closed, we'd prioritize based on number of votes, estimate each task, and build the quarterly roadmap.

Roadmap communication
Roadmap Communication
04

Design progress

Once the roadmap was announced, I'd start working on each task and move it from Backlog to In Progress. Most of the time I'd create a branch in our Figma library and work directly there. When the task was done, I'd request feedback — either internally or from the designer or team that originally requested the feature.

Design process using Figma branches
Design process using Figma branches
05

Working with engineers

Once the request was done, I'd move the task to Ready for Engineering and engineers would take over. Depending on the component I'd create specs, but most of the time it wasn't needed thanks to the use of foundational tokens and re-utilizing components while building bigger patterns. Once engineering work was done, they'd send me a link where I could review and sign off — we'd then agree on a release day so the feature shipped in sync with eng.

Engineering documentation
Engineering Documentation
06

Merging, publishing, and announcing

The last part of the process was merging the branch, publishing the library, and announcing the changes on Slack and through our changelog page. This was my favorite part — I really loved shipping new stuff and seeing the reaction of the designers and engineers who'd use the new features.

Update announcement
Update Announcement
07

Support

I regularly helped with support over Slack, Office Hours, and ad-hoc 1:1s.

Office hours
Office Hours

Wrapping up.

I really enjoyed helping improve and extend Hawkins Professional adoption across the company to over 400 projects. If you'd like to learn more about Hawkins, you should watch this video.

Hawkins Professional dark theme
Hawkins Professional — Dark Theme
Wiki joined Netflix's design systems team as a contractor; his impact was so immediate that we decided to convert him to a full-time role after a few weeks. Over my entire career, I have rarely seen someone so quick, efficient, and at the same time detail-oriented as Wiki. He's a fast learner, a responsible colleague, and a friendly person. — Former Netflix teammate