Ben Callahan
Sparkbox
Course Description
This course is for technical and design leadership looking for strategies for leading, creating, and maturing your organization's design system beyond the technical perspective. This course is a comprehensive exploration of design systems, from anatomy and maturity models to adopting stakeholders, balancing consistency with flexibility, and the influence of organizational culture.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: May 25, 2023
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 6 minutes
Ben Callahan introduces the course by providing some professional background and an overview of the course material. Student introductions, including one recent challenge and success, are also provided. - LINK TO SLIDES
Anatomy
Section Duration: 42 minutes
Ben discusses two key takeaways from previous consulting engagements. The intersection between scale and longevity when deciding if there is a need to create a design system is also covered in this segment.
Ben discusses the layers that comprise a design system, including foundations, tokens, core systems, and components. An organization's brand, codified design decisions, building block systems, and reusable parts of a digital interface are all parts of a design system.
Ben further breaks down the layers of a design system into three parts: assets, processes, and documentation. Examples of assets, processes, and documentation for each layer are also provided in this segment.
Ben discusses an overview of how the key takeaways mentioned previously connect with the model of a design system. Two main benefits of design systems consistency and efficiency are also discussed in this segment.
Ben answers student questions regarding how to continue building a design system with an incomplete foundation and what mistakes to avoid when in enterprise team building and a new design system. Student questions regarding handling teams that don't prioritize homegrown design systems and differences in approaches between a B to B app and a B to C app are also covered in this segment.
Maturity Model
Section Duration: 1 hour
Ben provides an overview of the four stages of the design system maturity model, including building version one, growing adoption, building an iterative product mindset, and maturing into stable leadership.
Ben walks through two origin stories regarding executive leadership involvement, the differences between the two, and how they can intersect. Top down where executive leadership is involved and grassroots where executive leadership was uninvolved.
Ben instructs students to identify their design system's origin story and current stage and then discusses some student answers. Student questions regarding how to gain executive support for stage two and handling third-party involvement.
Ben walks through a framework for how to mature a design system through education, engagement, and evolution for each stage of the maturity model.
Ben answers student questions regarding the definition of a design system, how to handle the interaction between design and engineering teams, and how to handle product color scheme decisions. An exercise for breaking steps into the three Es is also provided in this segment.
Ben dives deeper into stage one of the maturity model, discussing deciding on the right version one. Ranking potential subscribers, converting negative views into advocates, defining subscriber groups, and understanding subscriber metrics are discussed in this segment.
Growing & Improving the System
Section Duration: 52 minutes
Ben dives deeper into stage two of the maturity model, growing adoption by building a system people want to use. The relation between onboarding effort and the rate of people subscribing is also discussed in this segment.
Ben discusses managing expectations with time and effort for the adoption journey, defining the adoptable system parts, and defining adoption. Providing a path to follow can help potential subscribers adopt in a healthier way.
Ben discusses defining health metrics that are important for the design system to help articulate an adoption health score. A discussion regarding teeter-totter maturity, what causes it, and how to avoid continuing to move between stage two and three.
Ben dives into stage three of consistently improving the design system to prove that it can function as described in earlier stages. Designing system metrics and adding disciplines to the design system team are also covered in this segment.
Ben discusses managing a combination of flexibility and consistency in the system design. The system should enable creativity while the culture encourages restraint.
Ben demonstrates selling a design system by continuing to add value over time. Handling differences between concept and reality is also discussed in this segment.
Ben discusses the shift from stage three to four of the design system having consistent behavior. Avoiding the risk of falling back into stage three by codifying the maturity is also discussed in this segment.
Ben answers student questions regarding when to change tactics if the design system is stuck in stage one. How to unite multiple teams under one design system is also discussed in this segment.
Design System Culture
Section Duration: 1 hour, 12 minutes
Ben discusses how to combat destabilizing forces with a combination of authority, tradition, and value. Identifying risks such as regression and avoiding authority is also covered in this segment.
Ben discusses the layers of organizational culture, basic underlying assumptions, espoused beliefs, and artifacts.
Ben discusses the four primary types of organizational culture and where they fall on a scale of internal to external and focused to flexible. Examples of student's current organizational culture are also covered in this segment.
Ben discusses the collaborative and controlling types of design system subcultures. Healthy and unhealthy examples of prioritization, adoption, extension, and change management on the spectrum of collaborative and controlling subcultures are also covered in this segment.
Ben discusses the competing organizational cultures and their compatible counterparts. A discussion regarding if the design system subculture can change the organization's culture is also covered in this segment.
Ben discusses students' experiences with design systems and company subcultures. Handling being a part of a company with a culture that conflicts with your own is also briefly discussed in this segment.
Ben answers student questions regarding a team's ideal size and make-up, executives overestimating the design system team's capabilities, and opinions on white-label component libraries. Opinions on Storybook and other system design tools are also covered in this segment.
Wrapping Up
Section Duration: 9 minutes
Ben wraps up the course by providing an overview of some of the important concepts covered in the course and further design systems resources.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops