ow many times have you started a new Netflix show, only to see — hours later — that familiar screen pop up: “Are you still watching?” Of course you are, and the algorithm knows it.
Behind every experience are a variety of visual elements, language, and components.
All of that can be tied directly to a design system that can enable teams to reuse those elements in more places, globally, providing more effective cohesion at scale.
My specialty is in creating centralized and distributed frameworks for design systems. Currently, I’m a Design Systems Lead at Netflix working on the Hawkins Design System. Before that, I worked at Spotify formalizing the Encore framework with a very talented crew.
Effectively scaling and extending a brand into a company’s product is a common challenge I’ve noticed throughout my career. If we deconstruct visual attributes and technical constraints into scalable elements, we can begin to influence the brand from the product, or vice-versa.
By giving each element a purpose, co-authoring a shared perspective, and ultimately connecting it to code, you can scale effectively, faster over time.
Give it a purpose
When design elements don’t have a purpose, visual decisions remain subjective in the product. People will ask questions like, “How do I use color?”, “What assets should I use?”, or “Should I use motion here?”
When I started working on Hawkins for our Netflix Studio, where we build solutions that bring creators’ stories to life–from pitch to post, our team created an efficient toolchain to automate and support twelve themed toolkits. Yes, we got questions on color usage.
In order to better understand the connection between our growing suite of apps, I began to map out our navigational architecture. As part of this process, I wanted to validate how we could use our color spectrum to create a more cohesive experience as we scaled.
However, I was missing a piece of the broader, visual narrative. To take a step back, I collaborated with Martin Bekerman on our Product Brand team, to develop a design language for Hawkins with the intent of consolidating a visual style that felt closer to the Netflix brand.
We partnered with several teams to validate the direction in the context of active projects and gather feedback on styles and interactions. Instead of using 12 branded toolkits, we moved to one, bringing a more monochromatic look across our products.
Now color began to serve a purpose, reinforcing brandable attributes or intentional aspects of the UI like status, data visualizations, etc.
By improving our design language together, teams across the Studio were more invested from the beginning, accelerating our adoption strategy. Designers could represent our newly shared decisions in their broader team settings, becoming advocates for Hawkins.
Build it together
Domain expertise is real. It’s unreasonable to expect that people can know every possible piece of context. By co-creating, we can share different expertise to better understand the intended outcomes.
When you build in a silo, you can miss where a user may be coming from. At Spotify, that’s how we discovered inconsistencies in the Premium journey.
From a brand campaign through the payment funnel, different teams were using different visual interpretations and different uses of language. There was no documented source of truth.
Through a global workshop across business areas, I set out to understand the inconsistencies and use that foundation to build a more engaging future state. The goal was to initiate conversations with leadership to formalize a team that would build a centralized and distributed design system for Spotify. Hello, beginnings of Encore.
Since there was limited process in the past, this created an inclusive working environment that made it easier for system designers to immerse themselves in the context and domain expertise of their product and brand design partners. Something that may start as a perspective-building exercise could easily turn into a feature test.
Connect it to code
Ultimately, to make these design decisions truly effective to the business, we must acknowledge that code is the source of truth. It’s what brings design intentions to life.
At Spotify, it took upwards of six months to go from the old brand green to the new because it was hardcoded. Implementing Design Tokens, or platform-agnostic variables, enabled Spotify to bake branded decisions like color, typography, motion, and more right into the DNA of the company’s infrastructure, future-proofing how Spotify can scale.
At Netflix, we’re trying to bridge the gap between design and engineers in similar ways. Within Figma, we’re automating the workflow to swap assets on the fly, rather than a manual process. A plugin can help designers personalize content quickly.
Connecting to code could enable designers to personalize instantly. Naoufal Kadhom, on our Design Technology team, and I are exploring a technical infrastructure, rooted in Design Tokens.
Our goal is to remove the boundaries of tooling so that designers and engineers can more efficiently share the same language and build more engaging, brandable experiences for Netflix’s members.
Upfront, this is a heavy cost — but a business has to invest in the marathon for future growth. While a brand may not change regularly, scalable infrastructure future-proofs the need for reinventing the wheel and speeds up how you deliver innovative solutions.
Brand and Product, let’s be best friends
Maybe this is just a love letter to brand and product designers. I’ve found that shaping a perspective is a trust fall exercise between all of your partners.
When you centralize and diversify how people contribute to a design system, you accelerate how teams can adopt brand and product decisions, effectively. These connected moments enable you to confidently ask, “Are you still watching?”