Unlocking Design Efficiency: How Netflix's Hawkins Design System Revolutionizes User Experience

As a seasoned product designer with a passion for creating seamless and intuitive interfaces, I was fascinated by Netflix's internal design system, Hawkins. In this article, I will delve into the reasoning behind Hawkins and explore how it leverages design efficiency, making it an indispensable tool for designers within the Netflix ecosystem.

The Problem: Inconsistent User Experience

Imagine navigating a suite of applications with disparate user experiences. The learning curve is steep, and the burden on users and engineers alike is significant. This was the challenge Netflix faced with its growing application catalog, which powers content production from pitch evaluation to financial forecasting and asset delivery. To address this issue, the Netflix team developed Hawkins, a design system that ensures a consistent user experience across all applications.

What is Hawkins?

Hawkins is composed of two main aspects: design elements and a React component library. The design elements are foundational, consisting of Figma components used throughout the design team to build mocks for the engineering team. The React component library is a JavaScript library for building user interfaces, ensuring that each component is reusable, configurable, and composable.

The Benefits of Hawkins

Hawkins brings numerous benefits to the Netflix design and engineering teams:

• Consistent User Experience: Hawkins ensures that users can intuitively navigate different applications, reducing the training required.
• Reduced Engineering Burden: With a single implementation of components, the engineering organization can focus on improving one set of components, reducing bugs and enhancing overall application health and performance.
• Efficient Onboarding: New team members can quickly adapt to the design system, thanks to comprehensive documentation and examples.
• Shared Knowledge: Hawkins acts as a common language for designers and engineers, aligning their efforts in building applications.

Building and Implementing Hawkins

The Netflix team took a hybrid approach to building Hawkins, combining the benefits of building from scratch with leveraging existing solutions. On the design side, they built it themselves to maintain creative control. On the engineering side, they utilized Material-UI to gain a head start with a robust component library.

To generate buy-in across the engineering organization, the Hawkins team tracked key metrics, such as component usage and application adoption. They also implemented an on-call rotation for support, conducted "road shows" to demonstrate Hawkins' value, and helped bootstrap features for teams as proof of concept

Handling Complex Components

To address the need for more complex components that didn't fit into the original design system, the team created a parallel library. This library, set up as a Lerna monorepo, allows for the sharing of complex components while benefiting from the work done on Hawkins. The open-source approach encourages engineers to contribute and share the responsibility for each component

Conclusion

Netflix's Hawkins design system is a testament to the power of design efficiency in enhancing user experience and reducing engineering burdens. By understanding the reasoning behind Hawkins and its implementation, designers and engineers can appreciate the value of a well-crafted design system.

As someone passionate about creating intuitive and efficient interfaces, I am inspired by the work done on Hawkins and look forward to exploring how similar principles can be applied in various design contexts.