Unlocking seamless design handoffs: The critical intersection of Design Systems and Design Ops

In the last quarter, my team conducted a research project aimed at uncovering the challenges and opportunities for the Design System in the process of hand off from Product Designers to Frontend Engineers.

The research results were extremely insightful. However, when transforming the insights into action points, it kept on raising this question in my mind: Who should take the findings and make them a reality — the Design System or Design Ops? This might seem like a minor detail, but it’s crucial for making sure we’re focusing on the right tasks and not spreading ourselves too thinly.

Taking on tasks that aren’t really ours can lead to an overwhelming amount of work and can also mask underlying problems that need to be addressed. It may create a precedent where we’re expected to continue covering tasks that aren’t ours, making it less evident to everyone that there’s a gap in the responsibility structure — because we’re the ones continually filling that gap.

To get to the bottom of this, we need to understand the roles of Design Ops and Design Systems:

• Design Ops is all about making designers’ lives easier. As a team, its focus is on identifying the best tools, methods, and processes so that designers can produce and deliver their best work.
• Design System provides a toolkit of design elements that ensure consistency and quality across what a company creates. It’s a foundation that helps both designers and engineers build products more efficiently and consistently.

While both aim to improve the design process, they do so in different ways. Design Ops focuses on refining how designers work, and Design Systems provide the components that make it easier to implement designs consistently.

Summary of the differences between Design Systems and Design Ops

Design Ops

Short for Design Operations, Design Ops is an emerging discipline within the design field focused on optimising the operational aspects of the design process.

Its core mission is to streamline and enhance the efficiency, scalability, and impact of design teams within organisations. By addressing the ‘how’ of design work, Design Ops aims to bridge the gap between the strategic importance of design and its day-to-day implementation.

Some key responsibilities of Design Ops include:

1. Optimising processes and workflows, aiming for increased efficiency and transparency. This involves identifying bottlenecks, implementing project management tools, and establishing workflows to ensure design projects meet quality standards.
2. Managing tools and platforms, ensuring the design team has access to the technologies that best suit their needs.
3. Cross-functional collaboration, connecting the dots between design teams and other departments, such as engineering, product management, brand and marketing.
4. Analysing metrics and performance is not uncommon, with the goal of measuring the impact of design within the organisation.
5. Advocating for design culture, championing design thinking, and user-centric approaches at all levels, aiming to elevate the strategic role of design in business outcomes.

Given the organisational context, these responsibilities may vary, and the scope of Design Ops can become more narrow or broader.

In essence, Design Ops empowers design teams to do their best work — removing obstacles, providing the right tools and resources, and ensuring that design can fully contribute to achieving business goals.

Design System

Design Systems are comprehensive sets of guidelines, principles, and components used in digital product design and development. They serve as a blueprint, ensuring consistency, efficiency, and quality across an organisation’s products and digital experiences.

A well-implemented Design System enables teams to create cohesive user interfaces (UI) and user experiences (UX) that align with the brand’s visual and functional standards.

Some of the core components of Design Systems are:

1. UI Toolkit — the heart of a Design System, including reusable design elements (such as buttons, form elements, typography styles, colour palettes, icons, and more). Each component is defined with specified design properties and behaviours, ensuring visual and functional consistency across platforms and usages.
2. Design Principles and Guidelines that reflect the brand’s ethos and approach to UX. These principles guide decision-making and design practices within the team, striving for a shared understanding of design values.
3. Code Libraries bridging the gap between design and development. This ensures that the released product closely aligns with the intended design and reduces the time needed for development.
4. Documentation and standards covering how to use the components, apply the design principles, adhere to best practices, and contribute to the system. The documentation acts (ideally) as a single source of truth for both designers and developers.
5. Accessibility guidelines for component usage, including considerations for colour contrast, keyboard navigation, screen reader compatibility, and more.
6. Patterns and templates for common UI layouts and interactions, helping to ensure consistency and streamlining the design process.

How do these two coexist?

In some companies, the Design System team is part of Design Ops, which might suggest a lot of overlap. However, each has a special focus. For example, the Design System team shouldn’t be dictating how designers hand over work to engineers or setting rules for the design process.

Here are a few statements that help illustrate the difference between the scopes of Design Systems and Design Ops:

Statements that help illustrate the difference between the scopes of Design Systems and Design Ops.

*Note: Both Design Systems and Design Ops are responsible for ensuring accessibility standards are met. However, the Design System team focuses on building accessible components, while Design Ops ensures that the design process and team workflows prioritise and incorporate accessibility considerations.

So… what was the conclusion of the research pursued by my team?

Returning to the original research project, our final understanding was that there is not much the Design System team can do regarding specific ways of working. Most of the pains points stemmed from a lack of knowledge on how to use Figma efficiently. We did identify some improvement points regarding our documentation. However, tackling design file templates, alignment on ways of working, as well as providing training to design teams is, unfortunately, beyond what a design system and its team can do.

Considering the differences between the roles of Design System and Design Ops, this is an example of where the two disciplines can complement each other in areas common to both.

Looking specifically at the design handoff (from product designer to frontend engineer), here’s an attempt to summarise the concrete items that Design Systems and Design Ops can cover:

Summary of concrete items that Design Systems and Design Ops can cover regarding the design handoff to engineering.

Both Design System and Design Ops aim to reduce the layers of decisions Product Designers need to think about while designing, but from different perspectives.

On a general scale, Design Systems provide the UI elements that enable efficiency for Product Designers during the design phase, as well as scalability for the solutions they create.

On the other hand, Design Ops provides the tooling and guidelines for Product Designers to follow, so that they work better and in streamlined ways.

Both Design Systems and Design Ops aim for efficiency, but Design Systems care for the deliverables, and Design Ops care for the ways of working.

In short, in the handoff process, Design Systems provide UI elements that are common to both designers and engineers, making it easier for engineers to implement what designers deliver; Design Ops ensures designers have the necessary tools and guidelines so that they can focus on designing and delivering within the set timelines.

In conclusion

Design System and Design Ops, while aiming for the same outcome (increased efficiency and consistency), are separate disciplines.

The concrete example of the role these two play in the design handoff to engineering illustrates clearly how these areas complement each other but do not coincide.

Even though it is not uncommon to have Design Ops teams creating Design Systems, it’s important to understand that they’re not the same. One focuses on ways of working, and the other is the product/technology that product teams use.

Maintaining clear boundaries between Design System and Design Ops is vital for a well-coordinated and effective design workflow. By understanding the unique roles these disciplines play, we pursue a transparent and efficient design process that enhances the overall productivity of the organisation.