Overview
The article discusses the Hawkins Design System developed by Netflix to create a consistent user experience across its suite of applications. It highlights the importance of design systems in reducing engineering burdens and improving user experience, while detailing the development process and future plans for Hawkins.
What You'll Learn
1
How to create a design system that enhances user experience across multiple applications
2
Why a consistent design language reduces training time for users
3
When to leverage existing solutions versus building a design system from scratch
4
How to obtain buy-in from engineering teams for a new design system
Prerequisites & Requirements
- Understanding of design systems and their components
- Familiarity with Figma and React(optional)
Key Questions Answered
What are the main components of the Hawkins Design System?
The Hawkins Design System consists of design elements, which are Figma components, and a React component library. These components ensure consistency and reusability across Netflix's applications, making it easier for engineers to build and maintain them.
How does a design system improve the user experience?
A design system improves user experience by providing a cohesive interface across applications, reducing the learning curve for users. This consistency allows users to intuitively navigate different applications, as they share similar design patterns and functionalities.
What approach did Hawkins take for building its design system?
Hawkins adopted a hybrid approach by building its design components from scratch while leveraging Material-UI for its React component library. This allowed them to customize the design system while benefiting from pre-built components.
What metrics were used to measure the success of the Hawkins Design System?
The success of the Hawkins Design System was measured by tracking the number of uses of each component, the number of package installs, and how many applications were using Hawkins in production. These metrics helped gauge adoption and effectiveness.
Key Statistics & Figures
Number of applications using the Hawkins Design System
80+ applications
These applications support various aspects of Netflix's content production, from pitch evaluation to asset delivery.
Initial build phase duration for Hawkins
2 quarters
The build phase was split into creating the design language and the implementation phase.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Design Tool
Figma
Used for creating design components that form the foundational layer of the Hawkins Design System.
Frontend Framework
React
Utilized for building the component library to ensure reusability and configurability.
Frontend Library
Material-ui
Leveraged to provide pre-built components that can be customized for the Hawkins Design System.
Development Tool
Storybook
Used for documenting components and providing examples for developers.
Key Actionable Insights
1Develop a design system that is reusable, configurable, and composable to streamline application development.By focusing on these principles, engineering teams can reduce redundancy and improve efficiency, allowing for faster application updates and a more cohesive user experience.
2Engage with engineering teams early in the design system development process to ensure their needs are met.Gathering feedback and demonstrating the value of the design system can foster buy-in and increase adoption rates among developers.
3Utilize existing libraries like Material-UI to accelerate the development of your design system.Leveraging established libraries can save time and resources, allowing teams to focus on customizing and enhancing the user experience rather than building components from scratch.
Common Pitfalls
1
Underestimating the initial cost and time required to build a design system.
Many organizations may not realize the significant upfront investment needed for research, design, and implementation, which can lead to incomplete systems or lack of adoption.
2
Neglecting to document components and provide support for users.
Without proper documentation and support channels, engineers may struggle to adopt the design system, leading to frustration and inconsistent usage.