The Great Product Unlock: Why Product Managers Should Champion Design Systems to Supercharge Production Operations

Business value is created when useful product features meets customer needs in a timely way. Design Systems are the key to that high velocity value delivery.

Intersection: An artwork by me that shows beautiful patterns that comes from overlapping parts.

I have a dream job where I get to speak to hundreds of product, design, and engineering professionals about their work. These conversations give me a privileged view of what companies are doing behind the scenes. In an odd way, I’m channeling some combination of Malcolm Gladwell and Barbara Walters in that I’m interviewing wicked smart people and then sharing their experiences with the wider community. In my current work with Knapsack, I have access to engineering, product, and design leaders at some of the most admired companies in the world. In these conversations, I’ve observed a concerning mythology that’s slowing down product development cycles and adding significant costs to product teams.

That myth is that design systems are strictly the domain of designers and engineers.

Fortunately, not everyone is under the spell of this myth. To the contrary, the seasoned product leaders I’ve been talking to see design systems as a way to bring products to market more quickly and with fewer resources. Leaders from companies like Meta, Verizon, GSK, JP Morgan, Target, Home Depot, Sherwin Williams, CVS, and dozens more all agree that design systems are not just the domain of the designer or the developer; they are a critical product operations platform.

That might sound like hyperbole, but I don’t think that statement goes far enough. In fact, I’m going to make a case that design systems are probably the single most important technology innovation for product organizations in the past two decades. Using the insights gained from hundreds of interviews from leaders at Fortune 100 companies, I’m going to show you why design systems are not just beneficial but essential for product teams, product managers, and product leaders. Let’s start with the obvious reasons why design systems are:

Bridging Communication Gaps

Imagine this; using the PRD your design team has created a beautiful mockup for a new feature. The developers, eager to get started, begin coding based on those designs. But somewhere along the way, things get lost in translation. The final product looks nothing like the mockup, and now you’re stuck in a cycle of revisions, rework and delays. Sound familiar?

This would be funny if it wasn’t so horribly expensive. Rework, revisions, and tech debt aren’t just a jab at product teams; they’re the multi-million-dollar anchor dragging teams into an unhealthy relationship with their production process and with each other.

This is where a design system steps in like a superhero with a cape (but in a more subtle, systematized way). A design system serves as a common language between designers, developers, and product managers. It’s a set of standards, guidelines, and reusable components that everyone can refer to. This shared reference reduces misunderstandings and ensures that everyone is on the same page.

Think of it like this, without a design system, your team is like a group of musicians trying to play a symphony without sheet music. They’re producing notes, but the result is a lot of noise and frustration. With a design system, everyone has the same sheet music, and suddenly, beautiful harmonies emerge.

The Single Source of Truth

The holy grail of digital product production has always been to close the gap between design and engineering. The pain we all feel in digital production can be resolved with a more unified platform. Assuming that platform can close expectation gaps and connect all the ways the design system is managed, you have a real solution. But is this even possible?

Until recently, the answer would’ve been no. There have been too many pieces of the production puzzle for workflow to be unified. That is no longer the case. It is now not only possible, but also necessary, for the unification of the product production process. From discovery or prototyping to documentation and planning code to implementation and end user experience, this all needs to align.

Once they have this unified architecture, PMs unlock new capabilities that dramatically accelerate the process of going from design intent to high-quality code output. Whether that’s Figma to code, code prototyping, API-based consumption, connected systems of systems architecture, or even the promised AI-based product generation. Knapsack has been able to build the foundational infrastructure that combines structured data with dynamic connections to design and code sources.

Maybe this doesn’t sound sexy or visionary enough, but it’s already been delivered to enterprises around the world and the results are tangible and real.

In one example the design system platform implementation was 50% faster than estimated, saving $1M. That’s impressive considering there are 2,500 users of the design system. Once up and running, the enterprise saw a 15% acceleration in time-to-market, which means an estimated saving of $2M+ in annual operations costs.

In the world of product development, a single source of truth is akin to a GPS that keeps everyone on the right path. A design system provides this centralized reference point. Whether it’s the elemental stuff like color codes, typography, and button styles, or the composable stuff like cards and flows, everyone knows exactly where to look.

Why is this important to PMs? Because it saves time and reduces errors. Imagine a scenario where your designer updates a button style. Without a design system, this change might not get communicated to the developers, leading to inconsistencies in the product. With a design system, the update is made once and automatically reflected across all components.

To put it in perspective, it’s like going on a road trip with friends. Without a map, you’ll constantly argue about which turn to take. With a reliable map (aka the design system), everyone gets updated on the route as progress is made, and the journey becomes smoother and more enjoyable.

Aligning with Strategic Goals

As PMs, our ultimate goal is to deliver products that align with our strategic objectives and deliver value to customers. This requires everyone to be on the same page, working towards the same outcomes. Design systems play a crucial role in this alignment.

Geordie Kaytes who leads design at Heroku proposes a Goalstorming exercise to connect corporate problems or initiatives with the value of a design system. The primary value of this exercise is to make the day-to-day practicalities of the design system tightly linked to the high-level strategies and initiatives of the business, thereby making a direct path between what IC’s and teams are doing and what executives expect from the business. Here’s how it works:

1. Identify Corporate Initiatives: Determine the key business problems or initiatives that the company is focused on. This could be anything from improving time-to-market, enhancing customer satisfaction, to reducing operational costs.
2. Link Design System Benefits: Map these initiatives to the benefits provided by a design system. For instance, a design system can reduce rework and repetition, leading to less technical debt and faster shipping of new products.
3. Provide a Clear Link To Revenue: Show how the design system directly contributes to solving these corporate problems, thereby aligning the design system’s goals with those of the organization.

When everyone uses the same design system, it ensures consistency and coherence across the product. This consistency is not just about aesthetics; it’s about creating a unified user experience that reflects our brand and values. For example, if your company’s goal is to be seen as innovative, a consistent and polished user interface reinforces that image.

Communicating the business value of design systems to leadership is crucial for securing buy-in and funding. Product managers need to articulate how design systems drive efficiency, reduce costs, and enhance product quality. Case studies and real-world examples from companies like Airbnb and Meta can be powerful tools in this communication. Additionally, highlighting the potential for significant ROI through reduced rework and faster production cycles can resonate well with leadership focused on the bottom line.

Now, let’s dive deeper into the specific features and how they contribute to business value.

Connecting Specific Design Systems Features With Organizational Alignment and Business Value

Achieving organizational alignment with design systems requires a concerted effort from product managers. This involves educating teams about the benefits of design systems and ensuring everyone understands their role in the system’s success. Regular training sessions, workshops, and clear documentation can help in this regard. Moreover, involving key stakeholders in the development and evolution of the design system fosters a sense of ownership and alignment with organizational goals.

Let’s take a look at the features in a design system platform like Knapsack and see how those features connect to business value:

Dynamic Documentation

Overview and Business Value: Knapsack provides a dynamic connection between code and design tools, ensuring that documentation can automatically update when changes to source design or code occur. This real-time synchronization streamlines maintenance, and closes expectation gaps between disciplines to help teams ship in fewer, faster cycles.

Central source of truth: A single set of documents means a single source of truth across design and code frameworks, supporting all the ways your design system is maintained, used, and experienced.

Automatic updating: Knapsack’s dynamic connection uses Figma’s REST API and our deep Git integration to auto-update design and code documentation and demos, reducing maintenance overhead and ensuring teams are on the same page.

Cross-functional contribution: Easy to use, browser-based contribution — backed by Git — allows developers, designers, and product managers to provide real-time feedback, accelerating decision-making and reducing bottlenecks.

Managed Access: Enterprise-level security lets you easily manage visibility and permissions based on user roles to control who can see, access, and edit documents and assets

Component & Pattern Management

Overview and Business Value: Knapsack allows you to manage components across design, code, and documentation, and connect and compare properties and data to ensure consistency and alignment as your system scales. Visualize and organize patterns from a birds-eye view to keep your teams organized across all the ways your system is used, managed, and experienced.

Patterns Overview UI: A bird’s-eye-view of your components and patterns across design, code, and documentation helps you efficiently manage statuses and orchestrate the bi-directional flow of work.

Spec Alignment: Knapsack uses the Figma REST API and our deep integration with Git to collect specs in a centralized location where maintainers can easily manage alignment and see where to focus their efforts.

Suggested Connections: When new components are created or added to your design system source libraries in Figma or Git, Knapsack will automatically suggest connections to Pattern Pages in your workspace, minimizing manual maintenance and helping you keep everything organized, up-to-date, and ready for use.

Status Management: Keep everyone on the same page with a centralized source of truth. Status updates let you know if a component is ready for production or needs to be updated.

Design Tokens & Theming

Overview and Business Value: Easily manage multiple brands with Knapsack’s theming capabilities. Quickly update your digital properties and products by connecting brand decisions to style implementation in product UIs, ensuring a cohesive brand experience across your portfolio.

Theme Manager: Centralized and automated management of design tokens, variables, collections, and modes through knapsack lets you manage multiple themes in one place.

Figma import: Use Figma’s REST API to import themes into Knapsack for easy management, automatic updates used in production workflows.

CI/CD integration: Leverage automation and AI tools to ensure theme and token changes flow directly into engineering workflows, making development faster and easier.

Real-Time Rendering: See changes to themes rendered on production code components as you make them, allowing designers to iterate faster and accelerate digital production timelines.

Prototyping & Composition

Overview and Business Value: Knapsack lets you use production components to prototype and share UIs, allowing your team to explore possibilities, validate assumptions, test accessibility, and see what users will see if you ship with the code you already have.

No-code assembly: Allow product managers and designers to assemble and share UIs using existing, production-ready code; accelerating production and ensuring that design intent and production realities are aligned.

Configure properties and testing: Using production-ready code to assemble and test prototypes let’s you minimize engineering efforts and reduce bottlenecks.

Accessibility: Reduce duplicated effort, increase innovation, and create high-quality accessible experiences by centralizing guides and standards, and using tried and tested components that accelerate production and ensure cohesion.

Permissions & Controls

Overview and Business Value: Built with the specific workflow, infrastructure, and security needs of enterprise teams in mind, Knapsack provides the governance capabilities you need to control your design system and digital production processes.

User permissions: Control visibility, access, and editing capabilities for your documents and assets to ensure the fidelity of your design system.

CI/CD workflow integration: Open up contribution and collaboration, supported by the security of Giit backups and SSO authentication.

Approvals & Change Management: Customize workflows to automatically trigger reviews, approvals, pull requests, and production controls, reducing manual effort while ensuring process and quality control.

Overcoming Defunding Risks

Many enterprises PMs have attempted to create design systems, only to have them defunded when executives do not see a clear path to revenue or cost savings. To avoid this, it is essential to demonstrate how the design system solves broader company problems, not just those faced by designers and engineers. Here is a list of common company-level problems or initiatives that design systems can be associated with:

1. Misalignment in Technology: When product teams are misaligned or working in silos, there are frictions and inefficiencies that lead to unnecessary rework and technical debt. The current market is demanding that PMs and execs make stack consolidation decisions that prevent the dreaded Frankenstack. Identifying and remediating these misalignments will help avoid becoming a target for defunding.
2. Lack of Consistency: Teams desire consistency while maintaining creative originality. Without the single source of truth provided by a design system, teams will often find themselves creating “original” designs only to find these designs are either incapable of being supported in code or similar examples already exist in the archives of the design files. To budgeting decision makers this lack of consistency can look like pouring good money after bad behavior.
3. Inefficiency: Absence of clear paths to efficiency. While seasoned product teams universally understand the value of a design system, implementing it in a way that the company can see efficiency improvements isn’t always obvious. Differing levels of support, differences in context, and timing make this calculation more complicated. Implementing training and correct onboarding ensures efficiency and positive reasons for continued funding.
4. Competitive Lag: Competitors moving faster and shipping better features. This is a big problem for companies forced to keep us with competitive options. Slow feature cycles means a loss in competitiveness.
5. Customer Misalignment: Customers not seeing the value in the company’s offerings. To decision makers, a misalignment with customer’s expectations can be a reason to defund a project. For PMs, it’s critical to show how customer value was created upstream by the design system efficiencies.
6. Legal Risk: Issues stemming from poor accessibility experiences and inconsistent design practices. Design systems that have accessible elements provide built-in guarantees that components are compliant.
7. Brand Management: Challenges in managing multiple brands and agency relationships can result in defunding and budget reductions. System of systems brand management is the highly valuable promise of a design system platform like Knapsack.
8. Feature Bottlenecks: Slow feature releases due to frontend development bottlenecks. Design systems reduce front-end development rework and bugs by systematizing the workflow of component and asset use.
9. Partner Ecosystem: Partner relationships suffering due to delayed feature releases can be ameliorated by having a reliable way to deliver product and product support assets via a design system.

One or all of these problems might be present in an organization of scale. As mentioned before, PMs can identify the highest priorities and link those to your design system benefits.

Responsiveness to User Needs

Of course, user expectations are constantly evolving. To stay ahead, we need to be agile and responsive to user feedback. Design systems make this possible at both the early prototyping phase and the user testing phases. With a design system in place, PMs can quickly iterate on our products without compromising on quality or consistency. Need to change the color scheme based on user feedback? No problem. The design system ensures that this change is applied uniformly across the product with a single property update.

Think of it like this: user expectations are as unpredictable as the weather. One moment, they want sunshine (a bright and colorful UI), and the next, they prefer a cool breeze (a minimalist design). A design system allows us to adapt to these changes swiftly and efficiently.

Understanding the Right Metrics to Measure Design System Effectiveness

One of the most common questions product managers ask is, “How do we know if the design system is helping?” The answer lies in understanding the right metrics and connecting those metrics to the larger initiatives of the organization. While initially, metrics such as design system adoption rates will be useful, metrics need to evolve to show reduction in design and development time and consistency in user interface elements. By tracking these metrics, product managers can quantify the impact of the design system on their production operations. For instance, a high adoption rate indicates that the design system is being widely used but what can we measure to also show contribution to efficiency? Metrics must connect to the product goals like reduction in design and development time. Translating adoption and usage translates to cost savings and faster time-to-market will ensure PMs are connecting the right behavior to the right measures.

Conclusion

Design systems are a catalyst for collaboration among product teams. By providing a shared language and common reference points, design systems break down silos and encourage cross-functional collaboration. Teams can work together more seamlessly, leveraging the design system to ensure consistency and coherence in their work. This collaborative approach not only enhances product quality but also fosters a more innovative and productive work environment.

The bottomline is that design systems are not just tools for designers and developers. They are fast becoming the PMs BFF. They are powerful platforms that drive efficiency, consistency, and collaboration across product teams. By understanding the right metrics, communicating their business value, achieving organizational alignment, and fostering collaboration, product managers can unlock the full potential of design systems and supercharge their production operations.

Need more details? Knapsack has used the dozens of real-world enterprise customer implementations to developed a design system ROI calculator. Additionally, Knapsack hosts intimate leadership summits for design system managers and execs. Apply to the next event in your city.