Merging brand and product through the Netflix design system

How many times have you launched a new series on Netflix and a few hours later saw the familiar screen: “Are you still watching?” Of course, yes, and the algorithm knows it.

There are many visual elements and components behind each experience.

All of this can be directly linked to a design system that can allow teams to reuse these elements for more effective consistency at scale.

My specialty is creating centralized and distributed frameworks for design systems. I am currently working at Netflix as a Design Systems Lead and developing the Hawkins Design System. Before that, I worked at Spotify where I formalized the Encore framework with a very talented team.

Effectively scaling and expanding a brand within a company s product is a common problem that I have noticed more than once throughout my career. If we deconstruct visual attributes and technical constraints into scalable elements, we can begin to influence the brand from the product side and vice versa.

By assigning a goal to each element, creating an overall perspective together, and ultimately connecting it to code, you can scale your product quickly and efficiently as it evolves.

Give them a purpose

When design elements have no purpose, the visual decisions made for the product will be subjective. People will ask questions like “How do I use color?” “What components should I use?” or “Should I use animation here?”

When I started working on Hawkins for Netflix Studio, our team created an efficient toolbox to automate and maintain twelve themed toolboxes. Yes, we have questions about the use of color.

To better understand the relationship between the growing set of applications, I started mapping the navigation architecture. As part of this process, I wanted to test how we can use the color spectrum to create a more coherent experience when scaling.

However, I was missing the broader visual storytelling. I attracted to work Martin Beckerman from the brand team to develop a design language for Hawkins. Our goal was to consolidate a visual style that was closer to the Netflix brand.

We worked with several teams to validate the chosen direction in the context of active projects, and collect feedback on styles and interactions. Instead of 12 proprietary toolboxes, we switched to one, which gives our products a more monochrome look.

Color now serves a specific purpose, enhancing brand attributes or aspects of the interface such as status, data visualization, etc.

Through the joint development of the design language, the Studio teams contributed from the outset, which accelerated the adoption of the strategy. Designers were able to present recent decisions to their teams, thereby becoming a proponent of the Hawkins design system.

Build a design system together

It is unreasonable to expect people to know every possible piece of context. By creating together, we can share different experiences to better understand the intended results.

When you create an isolated space, you may lose sight of where the user might come from. On Spotify, this is how we found inconsistencies in our premium subscription.

From a brand ad campaign to a sales funnel, different teams have used different visual interpretations and different ways of using the design language. There was no single source of truth enshrined in the documentation.

Through a global workshop, I decided to understand the inconsistencies and use the findings as a basis. The goal was to convince management to formally form a team that would build a centralized and distributed design system for Spotify. This was the beginning of the Encore design system.

Since the process was limited in the past, it created an inclusive work environment that allowed the designers working on the system to immerse themselves in context and gain the expert opinion of designers dealing with specific products and brands. What started out as a perspective-building exercise has easily morphed into a functional test.

Connect it with the code

Ultimately, to make these design decisions truly effective for the business, we must recognize that code is the source of truth. It is he who brings the designer s ideas to life.

At Spotify, it took more than six months to transition from the old green brand to the new one because it was created with hardcode. The introduction of platform-independent token or variable design allowed Spotify to bring branding solutions such as color, typography, animation, and more directly into the DNA of the company s infrastructure, giving Spotify a scalable perspective.

At Netflix, we try to bridge the gap between designers and developers in a similar way. We automate the workflow in Figma to exchange components on the fly, rather than manually. Our plugin can help designers quickly personalize content.

Connecting to code can allow designers to instantly personalize content. Naoufal Kadhom, from the Design Technology team and I are exploring a technical infrastructure based on design tokens.

Our goal is to blur the boundaries between tools so that designers and developers can use the same language more effectively. and create a more engaging and recognizable experience for Netflix subscribers.

These are high costs in the beginning, but the business must make similar investments for future growth. While the brand may change sporadically, scalable infrastructure proves the need to reinvent the wheel and accelerates innovation.

Let the brand and product be friends

I have found that shaping perspective is an exercise in building trust between all of your partners.

When you centralize and diversify people s contributions to a design system, you accelerate the process of effective team decision making on brands and products. These related points allow you to ask with confidence, “Are you still watching?”