Elevating design systems: A holistic framework for maturity
A proven, comprehensive guide to design system maturity and growth beyond accessibility, interaction design and digital branding.
Written by Jim Chung with contributions and proofreading by Ronnie Battista.
Counting from 2019, over 480 Medium articles have dived deep into design systems. Perhaps this would be the first aiming to cover a holistic view of driving the maturity of an organization’s design system beyond the usual design and developer kits. So, in this playbook, I’m here to spill the beans and share some insights for fellow designers and leaders, helping us all level up in the design game.
Tailored for designers and leaders immersed in design systems, this article is also useful for sponsors and stakeholders seeking a deeper understanding. Brace yourself for a journey where we inject some serious business mojo into our design practices — think meticulous goal-setting, benchmarking, and strategic roadmapping. The star of the show? A maturity framework that’ll be your guiding compass as you steer towards that next level of design greatness.
A brief disclaimer: while this framework reflects our journey with a multinational insurance firm and our progress along the maturity curve, we’ve encountered challenges in certain areas, often influenced by factors beyond our control. This playbook delves into the complexities of design systems within intricate organizational structures, exploring multidimensional considerations and potential pitfalls.
Three pillars of design system maturity framework
Design systems are unique in their enterprise-wide impact, influencing product, digital, engineering, business, brand and marketing realms. A well-established system serves as a unified design language, evolving enterprise digital engine spanning teams, stakeholders, business lines and regions. As such, the multidimensional maturity framework goes beyond assessing design and code kit quality and quantity, delving into organizational conditions crucial for overall design system success, asset maturity and outcomes. The upcoming framework details three dimensions, each with five sub-dimensions, encapsulating the full spectrum of drivers as an enterprise product.
1. Leadership and approach
The dimension assesses design system maturity, focusing on strategic vision, practical methodologies, and collaborative processes. It evaluates leadership effectiveness, organizational support, team structures, design philosophy, and the seamless integration of design and development processes.
1.1. Leadership evaluates the leader’s vision, strategic depth, understanding of the organization’s digital design landscape, and ability to roadmap for the design system’s evolution.
1.2. Organizational support assesses the level of support and appreciation from stakeholders and leadership, as well as the perceived value of the design system within the organization.
1.3. Team model examines the effectiveness of the multidisciplinary team structure responsible for research, design, code development, and rollout.
1.4. Design approach focuses on iterative and continuous improvement, emphasizing a contribution model for community collaboration.
1.5. Design-to-development approach assesses the effectiveness of the design-to-development process, ensuring seamless translation of design assets into development.
2. Design system assets
This dimension focuses on elements empowering designers and developers to create cohesive digital experiences, addressing various angles related to design system assets.
2.1. Quality of design assets evaluates accessibility, visual and brand identity adherence, consistency, flexibility, and features offered for design tokens, components and patterns.
2.2. Coverage by design assets examines the design kit’s breadth and depth, aligning with diverse audience needs and organizational variations, assessing how well design assets cover the spectrum of experience requirements.
2.3. Quality of documentation and guidance emphasizes comprehensive guidelines, scrutinizing the user guide’s quality, comprehensiveness, and adequacy for effective utilization of design assets.
2.4. Code kit assesses the speed, quality, robustness, and flexibility of the code kit, irrespective of the team model (1.3. Team model).
2.5. Versioning focuses on iterative aspects, evaluating how versioning is managed across design kit, code kit, and documentation, ensuring synchronization and clear communication to the digital community.
3. Outcomes
The dimension explores the tangible impact and success metrics of the design system, assessing its ability to foster a thriving digital ecosystem and contribute to organizational health and efficiency.
3.1. Community management evaluates the digital community’s health and utility, emphasizing effective community management practices for community vitality.
3.2. Design system coaching examines the learning opportunities provided to the community, fostering collective understanding through training programs, lunch and learn sessions and office hours.
3.3. Adoption focuses on the adoption and effective use of design system assets, addressing challenges in integration across various cases and evaluating its organization-wide impact.
3.4. Measurement discusses methods for measuring design system effectiveness, emphasizing rigorous reporting to ensure quantifiable impact aligned with organizational goals.
3.5. Governance recognizes the design system as an enterprise product, emphasizing governance model, approach, and effort, including design audit, linting[1] and review process to ensure efficient and monitored use across diverse product teams.
Incorporating business rigor in the framework
The componentized maturity framework provides clarity on focus areas. Not all problems can be solved by the design system team, and it enables holistic evaluation of pain points and opportunities. This approach further aids in creating roadmaps, strategic plans and well-defined goals for both the team and the organization. Now, let’s dive into each sub-dimension’s definition for each maturity phase.
Maturity phases for design system leadership (1.1.)
This sub-dimension evaluates the vision, strategic depth, and roadmap of the design system leader.
Beginner: Design system leadership is identified, but may have limited vision and strategic depth, showing emerging capabilities for guiding evolution.
Developing: Leader has a clear vision and strategic understanding and forward-looking approach, shaping goals and priorities based on a roadmap.
Advanced: Robust and strategic leader envisions a clear trajectory for evolution, influencing strategic direction effectively.
Leader: Leader well-versed in the industry-leading practices and trends. The visionary and influential leader shapes enterprise digital brand experiences across the organization.
Champion: The organization is led by a leader not only influencing the globalization of the design system but also guiding localization.
Maturity phases for organizational support (1.2.)
This sub-dimension assesses support from stakeholders and the perceived value of the design system within the organization.
Beginner: Minimal organizational support despite investment and funding approval. Limited appreciation and perception of the design system’s role.
Developing: Stakeholders and leadership begin to appreciate its value. Support is increasing, though not yet universal across all levels of the organization.
Advanced: Well-established organizational support with sustainable funding allocated for a small team. Support is consistent across various levels of the organization.
Leader: Recognized as a key enabler and accelerator, functioning as an enterprise product team with extended global funding. Stakeholders advocate its role in driving digital design excellence.
Champion: Deeply embedded in organizational culture, becoming a fundamental aspect of strategic initiatives and practices.
Maturity phases for team model (1.3.)
This sub-dimension examines the effectiveness of the multidisciplinary team structure.
Beginner: Early stages of forming a multidisciplinary team. Potential separation of designers and engineers resulting in dependencies and gaps.
Developing: The design system team comprises both designers and engineers contributing and collaborating toward the common goal.
Advanced: Structured as a functional product team under a design system leader, with key roles fully allocated and supported, fostering integration and efficient communication.
Leader: Three sub-teams (design, engineering, product management) led by dedicated leads under the design system leader. The product manager orchestrates and drives the success of design system while the design and engineering leads enhancing capabilities.
Champion: Global expansion, regional teams supporting localization, incorporation of business and cultural needs, showcasing a comprehensive and adaptable structure.
Maturity phases for design approach (1.4.)
This sub-dimension focuses on iterative improvement and community collaboration.
Beginner: Design system approached as a fixed design library, limited iterative improvement, perceived as a one-time project, minimal community engagement.
Developing: Growing emphasis on iterative improvement, continuous refinement, and community collaboration, involving stakeholders and gathering feedback.
Advanced: Recognition of the needs for iterative improvement, active community participation and evolution based on collaborative efforts and feedback.
Leader: Well-established iterative design approach through community contribution and defined feedback loops, adapting based on user needs and industry trends.
Champion: Industry-leading practices, proactively seeking of feedback from internal and external sources, highly responsive to changing requirements, strong culture of continuous improvement.
Maturity phases for design-to-development approach (1.5.)
This sub-dimension assesses the effectiveness and rigor of the design-to-development process.
Beginner: The design-to-development follows a waterfall structure, potential handoff issues or inefficiencies and limited communication.
Developing: Resembles a high performing waterfall structure, with clear process for translating design assets, improved communication and collaboration.
Advanced: Adopts product management practices, co-creation approach, seamless translation of design requirements, comprehensive understanding of intricacies.
Leader: High-performing product team, smooth code kit creation and modification, superior product management, swift implementation of design updates.
Champion: Mature assets enable simultaneous creation and development, close collaboration between designers and engineers, showcasing a sophisticated design-to-development approach.
Maturity phases for quality of design assets (2.1.)
This sub-dimension assesses accessibility, consistency, and flexibility of design assets.
Beginner: Primary focus is on establishing a consistent library aligned with brand identity with emerging UX best practices and foundational accessibility considerations.
Developing: Incorporates UX best practices and basic accessibility standards while ensuring the translation of brand identity. Growing awareness for flexibility within consistency.
Advanced: Prioritizes accessibility, establishes structured interaction design and demonstrates a comprehensive understanding of UX.
Leader: Accessibility exceeds standard compliance, seamless integration of consistency and flexibility and actively contributes to defining digital branding through the creation of branded assets such as modular-based illustration, animation and motion graphics.
Champion: Sets industry trends and standards, continuously challenges the status quo.
Maturity phases for coverage by design assets (2.2.)
This sub-dimension examines the breadth and depth of the design kit.
Beginner: The design kit covers foundational assets (typography, colors, layout) along with basic UI components for immediate use.
Developing: Includes a broader range of component areas such as actions and inputs, content display, feedback display, status display, and navigation, aligning with diverse use cases.
Advanced: Well-established and comprehensive coverage minimizes the need for custom components and patterns and begins to cover data visualization and technical UX.
Leader: Comprehensive resource for diverse components, supports rapid prototyping and widget creation.
Champion: Spans different mediums (e.g., web, iOS, Android) and frameworks (e.g., native/open-source, fixed frame). Supports localization needs, making it comprehensive and adaptable resource for design and development across various platforms and contexts.
Maturity phases for quality of documentation and guidance (2.3.)
This sub-dimension scrutinizes the user guide’s quality and adequacy.
Beginner: Provides basic documentation for foundational assets and basic components.
Developing: Utilizes a Content Management System (CMS) for evolving guidance, starts functioning as a design guide, addressing practical usage and application.
Advanced: Well-established, comprehensive user guide with detailed insights and best practices, ensuring appropriate application of design assets.
Leader: A key asset, sets standards, covers rationale behind design decisions and supports both beginners and advanced users, fostering a deeper understanding of design standards.
Champion: Innovative user guide with interactive elements, multimedia, and real-world examples, a benchmark for scenario-based patterns and best practice references.
Maturity phases for code kit (2.4.)
This sub-dimension evaluates the speed, quality, robustness, and flexibility of the code kit.
Beginner: Focus on translating design assets into functional code, limited flexibility hindering adaptability diverse development needs.
Developing: Code kit evolves with NPM assets made available for import, DevOps practice enables continuous integration (CI), continuous development (CD), and version updates; the team may opt for a specific front-end framework to build and maintain the code kit.
Advanced: Code kit developed, iterated, and released at speed, keeping pace with changing requirements and design updates; an essential tool across front-end projects, known for its reliability, robustness, and quality.
Leader: Code kit extends its flexibility, framework-agnostic, addresses styling for fixed-frame platforms.
Champion: Ready-to-use options for seamless import, integrates with micro-frontends[2], demonstrating advanced adaptability to emerging architectural patterns.
Maturity phases for versioning (2.5.)
This sub-dimension examines how versioning is managed and communicated across the design system.
Beginner: Basic versioning, mostly in the code kit; communication about versions may be informal and not consistently documented.
Developing: More structured versioning for design and code kits, with consistent communication ensuring stakeholders are aware of changes.
Advanced: Well-established, systematic versioning, employing industry-standard versioning practices, such as Semantic Versioning, SemVer[3]; changes are documented and communicated clearly.
Leader: Simultaneous release between design and code kits for cohesive community support, proactive dependency management.
Champion: Custom plugins developed to preview the impact of version updates for designers; a similar developer tool implemented to demonstrate the impact and anticipate the heavy-lifting needs, showcasing advanced and innovative versioning practices.
Maturity phases for community management (3.1.)
This sub-dimension evaluates the health and utility of the digital community.
Beginner: Minimal effort on community building, relying on email and/or intranet updates.
Developing: Early community building with initiatives like office hours and online support (e.g., Slack, MS Teams, etc.).
Advanced: Methodical community management, a structured cadence for office hours and extended support; community nurtured in accordance with a content calendar.
Leader: Community expands globally, active participation facilitated by the design system team.
Champion: Global community with regional representation and improved language support, fostering vibrant collaboration and knowledge exchange.
Maturity phases for design system coaching (3.2.)
This sub-dimension examines learning opportunities and collective understanding within the community.
Beginner: No formal coaching, focus on adoption over structured learning.
Developing: Informal coaching through office hours, community channels and individual support; onboarding sessions offered for new users to ensure basic concepts are covered.
Advanced: Robust and in-depth documentation for self-guided learning; coaching expands beyond the “how to use” guide, elevating knowledge in UX and interactive design.
Leader: Periodic webcasts complement office hours, targeting both beginners and advanced users, as well as a wider audience across the company.
Champion: Integrated training into the company’s Learning and Development (L&D) platform, offering certification for advanced knowledge, fostering continuous learning.
Maturity phases for Adoption (3.3.)
This sub-dimension focuses on widespread adoption and effective use of design system assets.
Beginner: Design system used primarily by designers as an asset library. Developers rely on non-conforming libraries that may not align with the design system standards.
Developing: Adoption broadens among designers; concept introduced to a broader audience, including engineers and product owners. Product teams start incorporating the design system for their implementations, adhering to its guidelines.
Advanced: In-house designers proficient in using design system assets in their daily work, act as ambassadors across the organization; most product teams adopt and implement the design system with existing applications and platforms gradually integrating the new design system, undergoing improvements, migrations, and refactoring.
Leader: Consistent and cohesive digital experiences achieved with key existing applications and platforms undergo redesigns or design updates; extends coverage and adoption across complex applications.
Champion: Design system mandatory in all digital projects across the company; collaboration with central design team required.
Maturity phases for Measurement (3.4.)
This sub-dimension discusses methods for measuring effectiveness, emphasizing breadth and reporting rigor.
Beginner: Limited measurement; basic usage data reported monthly.
Developing: Structured approach and methodical process for collecting reach and usage data, with initial exploration into measuring impact more comprehensively.
Advanced: Ongoing effort to measure impact more methodically, with a particular focus on assessing productivity and efficiency gains.
Leader: Systematic user feedback to continuously collect, calculate and report on the design system’s impact on productivity; sophisticated measurement aligned with strategic goals.
Champion: Comprehensive approach to track the usage and reach of design system assets in UI projects; real-time reporting capabilities implemented, offering insights into the design system’s impact. The usage data becomes instrumental in feature planning and maintenance.
Maturity phases for Governance (3.5.)
This sub-dimension focuses on the governance model, approach, and effort, ensuring adequate monitoring and consultation.
Beginner: Limited governance, with emphasis on utilizing an enterprise solution like Figma Enterprise for design projects; exploring monitoring mechanisms.
Developing: Structured guidelines for digital governance; improved structures for intake, review and consultation of new projects; initial steps in engineering to explore options for implementing linting processes.
Advanced: Active adoption of governance; teams participate in reviews and incorporate these steps into their delivery timelines. A linting process is established to generate accessibility and design system scores in the dev environment, providing insights to all project teams.
Leader: Self-governance norm; the governance process is widely acknowledged from project inception; linting and scoring accessible to the governance body, offering visibility.
Champion: Scoring run on all live applications, generating scores for accessibility and design system conformance. Scores made visible to global experience leadership and the governance body, keeping product teams responsible for meeting the established minimum standards, emphasizing the significant impact of a mature governance model on overall project success.
How to utilize the framework
Customize the framework to your organization’s nuances, considering factors like size and the maturity of design, engineering, and product management. Start by evaluating your team’s current state through self-assessment questions, uncovering strengths and areas for growth. Set cohesive goals for alignment across your team and the broader organization.
This isn’t a one-time assessment but a dynamic roadmap. Chart a clear trajectory for growth based on the identified maturity phases. Encourage iterative progress, consistently revisiting to ensure your design system evolves harmoniously with organizational needs. Leverage the framework for cross-functional collaboration beyond the design team. Establish key metrics aligned with the framework’s criteria for effective progress monitoring. Celebrate milestones, recognizing the positive impact on digital experiences.
Feel free to share thoughts on areas needing elaboration or specific details. If you’d like to discuss your design system journey or have questions, reach out — I’d love to hear about your experiences.
Originally posted at medium