Katerina
Kaleta

Senior Product Designer, Design Systems

Katerina is a product designer who started her design career in 2016, with a previous background in music. Over the years, she has contributed to the development of design systems for two companies: Realtor.com and T-Mobile. She is currently a member of the user experience design team at ADT, focusing on building and maintaining the Nebula design system.

Nebula Design System at ADT

People using the DS:

People using the Design System

Supporting platforms:

Supporting platforms

Most used component in 2023:

List item

Most used component in 2023:

List item

400+

400+

400+

4

4

4

261.130

261.130

261.130

inserts

inserts

inserts

Can you walk us through the current state of the design system you're involved with?

Our Design System is called Nebula.

Nebula already had a solid structure when I joined the team around ten months ago. At that time, Patrick Tunga-Lergo, our Nebula Lead Designer, was the sole design system designer on the team. I was surprised to see how everyone—product designers, senior design managers, content designers, researchers, and developers—was actively contributing to and supporting the system. This has helped in structuring Nebula and the working processes faster and more efficiently.

Nebula plays a significant role in developing multiple apps within ADT, running on various platforms and serving tens of thousands of users. We strive to develop a single library with platform-agnostic components. This involves striking a balance between maintaining consistency and ensuring our components work seamlessly everywhere while respecting each platform's unique rules and styles.

Our current focus for Nebula, while consistently assisting teams with ongoing product and business requirements, is on revisiting foundational elements. This involves re-establishing a design tokens foundation, refining the component naming conventions, subcomponent structure, and optimizing the design-development hand-off processes. Strengthening these foundations will not only enhance our existing library but also position us for easy scalability in the future.

OUR TOOLS:

Figma

FigmaJam

Zeroheight

Bitbucket

Jira

Slack


Figma is our primary design tool for components and patterns libraries, lately heavily relying on Figma variables for our design tokens.

Bitbucket is our storage hub for tokens, icons, and illustrations.

Zeroheight is our source of truth for documentation.

Jira helps us track our progress.

Slack is our primary communication tool.

Figjam is our workshop tool.

How do you balance the need for consistency with the desire for creative freedom among your designers?

A crucial aspect of finding that balance is for both sides to understand each other's purpose and objectives. As design system designers, we aim to create components with maximum flexibility, considering how designers can have creative freedom by envisioning potential future use cases. Similarly, when designing experiences, product designers also explore the possibilities within the system. When striving for that balance, you will unavoidably have some friction between people. It is impossible to avoid. Our job is to make it the best possible, and the key to achieving this is collaboration.

To get a better understanding of how we collaborate at ADT, let's take a look at the Card component-creating process as an example.

When we identified the need for the card component in various product flows, each with distinct requirements and potential subcomponents, we conducted workshops with design system and product designers. In these sessions, we collectively established requirements. Each designer made their own version of the card, and as a team, we voted and selected four versions. Our team has the luxury of having two UX researchers who run testing with users for the selected cards. After getting the results, we held another workshop with a larger group, including product and developers, where we analyzed and chose the final version. Allowing everyone—designers, developers, and product teams—to contribute to the component-building process helps develop that system thinking skill set.

I resonate with a quote I once heard, although I can't recall who said it: "When a company starts having a design system, you never build a component in isolation; it's always within a system." This means that our design work is consistently interconnected and collaborative.

How do you stay true to your vision for the design system, even when faced with external pressures or trends?

Criticism doesn't just come out of nowhere; there's usually a good reason behind it. Receiving criticism means that there might be something we can improve in our Design System. I usually take it as a suggestion and think about how we can improve.


Sometimes, criticism happens because the other person might not know all the details. In those cases, it's essential to stick to your vision and help people understand why we make certain design choices. Always keep in mind that one of the main goals of the Design system, besides making things better for end users, is to encourage understanding and support inside the company.

How does your team collaborate on the design system?

We have implemented various practices, such as regularly organizing workshops with the design team to work on new components collectively.

For centralized documentation, we transitioned from documenting usage guidelines next to the component in Figma to using Zeroheight. This shift allows us to expand the usage documentation beyond the design team.

We introduced design system-specific channels on Slack and hosted bi-weekly meetings to showcase progress, discuss the roadmap, and receive feedback. This approach helps bring all teams and stakeholders together. In Nebula, where we have platform-agnostic components, bringing stakeholders from every platform together in one meeting helps us discuss platform-specific differences and develop the best single option.

Additionally, we have a weekly hangout where anyone can drop in and chat about anything related to Nebula. These efforts help us keep Nebula and ADT products moving in the right direction.

Are you tracking your design system? If you had to choose one metric to measure the success of your design system, what would it be and why?

We don’t currently use specific metrics to measure Nebula, though we are considering starting to integrate them. We recognize that our design system is moving in the right direction when we receive unsolicited feedback about Nebula from individuals outside the design team.

If I had to select only one metric to measure, it would be usability. A more usable design system means that teams work efficiently, find it valuable, and can create a cohesive and consistent experience for the end user.

If you could go back and change one decision you made in your design system journey, what would it be and why?

The mistake was thinking that first, I needed to have defined and designed components with all their states and interactions before including developers.

Do you use any kind of automation or AI tools?

I use the EightShapes Specs Figma plugin for automation. I like how it breaks down components, showing their anatomy and specs.

In Figjam, I sometimes use an AI Jambot widget to summarize workshop answers or just play around with the ideation feature.

↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️

Automation helps us seamlessly modify language from one source to the destination language.

Automation helps us seamlessly modify language from one source to the destination language.

Where do you see design systems heading in the next few years?

Automation plays a bigger role in creating and maintaining design system assets. Propagating changes from the main design system library to all components on different platforms like Android, iOS, and the web is challenging. Automation can help us cross those borders more easily by modifying language seamlessly from one source to the destination language. This shift will allow us, as design system designers, to put more energy into the adoption and collaboration aspects of the design system.

What's one thing you wish more people understood about design systems?

One thing I wish people knew about the design systems is that they're never really finished. It’s not a one-time creation but an ongoing process that adapts to the changing needs of designers, developers, and end users. As a design system designer, it's essential not to be frustrated if adjustments are needed frequently. Design trends shift and user needs change, so staying flexible and growing with your design system is the key.

↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️

As a design system designer, it's essential not to be frustrated if adjustments are needed frequently.

As a design system designer, it's essential not to be frustrated if adjustments are needed frequently.

In your opinion, what are the most overrated and underrated aspects of design systems?

The attention to creating components is often overrated, while the communications role is underrated. Although component creation is crucial, it is equally important to consider how we collaborate between teams. As design system designers, our role is to provide solutions that help users build better products faster, and it's crucial to ensure that what we provide truly meets their needs.

↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️

The attention to creating components is often overrated, while the communications role is underrated.

The attention to creating components is often overrated, while the communications role is underrated.

If you could have a coffee chat with any person from the design (system) space, who would it be and why?

If I had to pick someone from the design world, it would be Pablo Stanley. He has influenced various aspects of my life beyond just design.

When I was just starting my design journey, I learned a lot from him by practicing drawings and sketches using his “Sketch Together” YouTube channel and I really enjoyed his comic series called “The design team”.


Later on, when I was learning Spanish, I came across Pablo's Diseño Cha Cha Chá podcast. It's all about design and stories of Latinos in the tech world, and it's in Spanish.

Coffee with Pablo Stanley?

What's one piece of advice that you would like people to remember from this interview?

Throughout my design career, I've developed a few personal principles about design systems, and one of them is my belief that a design system is not just a project or a product; it is a way of working. The role of the design system designer is a coordinator. It’s not about building and styling components and reusable patterns; our job is coordinating all elements that create a cohesive product.

↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️↘️

It’s not about building and styling components and reusable patterns; our job is coordinating all elements that create a cohesive product.

It’s not about building and styling components and reusable patterns; our job is coordinating all elements that create a cohesive product.

What's your favorite thing to do when you are not in design systems?

You'll often find me reading a book when I'm not designing. I like physical books—the touch and smell add something to the reading experience. I also practice yoga; my favorite style right now is aerial yoga. Spending time with my husband, traveling, exploring new places, and trying different foods are some of my favorite things.

📚

📚

📚

🥘

🥘

🥘

🌍

🌍

🌍

I want to say a huge thanks to the entire ADT XL team! Without them, we wouldn't have Nebula where it is today.

Kevin O Smith (sr. UX researcher), Hans Koehler (sr. product designer), Monique Zamir (sr. content designer), Mai Nakhala (sr. UX researcher), Matt Obrakta (sr. product designer), Patrick Tunga-Lergo (sr. design system designer), Marisa Pacitti (sr. product designer), Katherine Koons (sr. product designer), Kevin Greenland (sr. product designer), Patrick Siemer (motion designer), Steve Hurley (sr. product designer), Abhijeet Bhattacharya (sr. director of product), Gary Coker (sr. manager of product).

Katerina Kaleta

Katerina Kaleta