Design System Engineering at Scale with Kathleen McMahon
Sep 20, 2023
auto_awesome
Kathleen McMahon, senior design systems engineer at Northwestern Mutual and contributor to W3C Design Tokens Community Group, discusses the versatility of design systems and their impact on workflows in design and engineering. She explores her experiences in both small and large teams, highlighting the benefits of design systems in promoting consistency and efficiency while allowing flexibility for innovation. The conversation also covers the importance of collaboration, scalability, and accessibility in design system engineering.
Design systems streamline design and engineering workflows, promoting consistency and efficiency while allowing flexibility for innovation.
Building a design system on the existing platform reduces reliance on external libraries and frameworks, enabling easier adoption and integration.
Design systems strike a balance between flexibility and consistency by providing reusable components with defined styles and behaviors.
Deep dives
The Importance of Design Systems
A design system is a collection of patterns and efficiencies that streamline design and engineering workflows to improve the design and development experience. It can include design patterns, a component library, and a CSS framework, depending on the needs of the company or product. Design systems aim to promote consistency and efficiency, allowing designers and developers to focus on solving more complex problems rather than recreating basic components. They are flexible and ever-evolving, requiring maintenance and continuous improvement.
Building a Design System on the Platform in Use
When starting a design system, it is recommended to build it on the platform, framework, or language that the team is already using. This approach helps stakeholders see the value of the design system and reduces reliance on external libraries or frameworks. By leveraging the existing platform, teams can quickly get a return on investment and ensure easier adoption and integration.
Balancing Flexibility and Consistency
Design systems should aim to provide flexibility for customization while maintaining consistency and adherence to brand guidelines. By creating a set of reusable components with defined styles and behaviors, teams can strike a balance between flexibility and consistency, empowering designers and developers to create innovative solutions within the guardrails of the design system.
Starting with Tokens and Common Components
When initiating a design system, it is recommended to start with defining tokens, such as color, typography, spacing, and font systems. This helps create a consistent visual language and serves as the foundation for other components. Additionally, identifying and prioritizing the most commonly used components allows teams to focus their efforts on creating reusable and well-tested components that solve real-world needs.
Avoiding Over-Abstraction and Franken Components
When developing components, it is essential to strike a balance between abstraction and usability. Over-abstraction can lead to complex and hard-to-use components, making it challenging for developers and designers to understand and leverage them effectively. Instead, components should aim to be simple, intuitive, and guided by real-world use cases, keeping in mind the goal of promoting consistency and usability across the design system.
In this podcast episode, Rob Ocel chats with Kathleen McMahon, a senior design systems engineer at Northwestern Mutual and a key contributor to the W3C Design Tokens Community Group.
Kathleen McMahon kicks off the conversation by defining design systems as versatile collections of patterns and efficiencies that streamline workflows in design and engineering. She emphasizes that design systems can encompass diverse elements, such as design patterns, component libraries, CSS frameworks, and more, tailored to the unique needs of a company or product. The focus isn't on rigidity but rather on promoting consistency and efficiency while allowing flexibility for innovation.
The dialogue then shifts to Kathleen's role as a design systems engineer and the dynamic nature of her work, influenced by factors like team size and company maturity. Kathleen shares her experiences in both small, multifaceted teams and larger, specialized teams at Northwestern Mutual. She provides insights into the varied responsibilities, from creating design tokens and components to ensuring accessibility and collaborating with diverse stakeholders.
Rob and Kathleen delve into the invaluable role of design systems in simplifying workflows for designers and developers. Kathleen highlights how design systems liberate creative energy by offering reusable patterns, enabling teams to focus on solving more complex problems. They also explore the strategic decision of whether to build a design system within a specific framework or keep it framework-agnostic, shedding light on the considerations and potential challenges associated with third-party component libraries.
The episode culminates with a discussion of ARIA (Accessible Rich Internet Applications) and its pivotal role in enhancing accessibility within design systems. Kathleen discusses the opportunities and challenges of leveraging libraries like Adobe's React ARIA hooks for accessibility.
This episode is sponsored by This Dot Labs.
Get the Snipd podcast app
Unlock the knowledge in podcasts with the podcast player of the future.
AI-powered podcast player
Listen to all your favourite podcasts with AI-powered features
Discover highlights
Listen to the best highlights from the podcasts you love and dive into the full episode
Save any moment
Hear something you like? Tap your headphones to save it with AI-generated key takeaways
Share & Export
Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more
AI-powered podcast player
Listen to all your favourite podcasts with AI-powered features
Discover highlights
Listen to the best highlights from the podcasts you love and dive into the full episode