Design Systems: Building Success Through Efficiency and Consistency

In this article, Cody Thistleward, a seasoned UX leader, manager, and designer, presents his insights into how design systems significantly improve efficiency, consistency, and business impact for organizations. Thistleward shares his extensive experience working on design systems at companies like Leaf, Mindbody, and Grafana Labs.

The key to Design System success is business success

What is a Design System?

A design system is a comprehensive collection of documentation, tools, and reusable patterns that guide teams in maintaining visual consistency across products. While the implementation may vary across organizations, the core goal is to provide efficient, reusable standards that unify the user experience and expedite development.

A design system functions as a standalone product that provides immense business value for the company that creates it.

Even a 5% improvement in team velocity for a 200-person engineering organization can generate approximately $1.8 million in additional value.

I have built and implemented design systems at Grafana Labs, Mindbody, and Leaf.

Why Design Systems Matter

Design systems are crucial because they:

1. Improve Efficiency: By offering reusable components and patterns, teams can deliver more features with reduced effort, speeding up the time-to-market.
2. Increase Business Impact: Consistent interfaces contribute to customer success, reduce churn, and enhance customer lifetime value.
3. Ensure Consistency: Predictable user experiences reduce cognitive load, enabling seamless usage.

Design systems are more than just a sticker sheet of buttons.

Key Aspects of a Design System

Creating a design system requires strategic architectural planning, collaboration with engineering teams, continuous testing, and adapting to unique business needs.

Key user goals include:

1. Contribution: I want a easy way to contribute to and expand the design system so I may produce quality user experiences as quickly as possible.
2. Adaptability: I want the design system to be adaptable and reusable for my team’s needs and platform so that it can easily support responsiveness and customization.
3. Documentation: I want comprehensive and thorough documentation of the design system so that I can understand usage guidelines, best practices, and real-world examples for seamless implementation.
4. Accessibility: I want the design system to adhere to WCAG and other accessibility standards to ensure inclusivity and allow all users to have an equitable experience.

Our colleagues are our users. Interview them. Understand their needs.

Uncovering Barriers of Use & Adoption

Effective design systems start with understanding the core problems teams face. Common issues include inconsistent component libraries, incomplete documentation, and fragmented codebases. Workshops, interviews, and “Hopes and Fears” sessions with engineers reveal problem areas and help focus efforts.

Key challenges often identified in our workshops include:

• Lack of a single source of truth
• Poorly constructed or incomplete code and documentation
• Fragmented or inconsistent Figma libraries
• Difficulty contributing to and using the design system

Hopes and Fears exercises can help us understand whats working and whats not working.

Addressing Our Issues & Building it Better

Key strategies for uplifting and maintaining a successful design system include:

1. Unify Resources: Establish a central hub with a single source of truth for design system information.
2. Prioritize Components: Audit component usage to identify the most common and impactful components, which helps prioritize refactoring and improvements.
3. Refactor Components: Allocate resources to address design debt and improve code quality. Emphasize ROI to gain leadership buy-in.
4. Enhance Documentation: Provide detailed guidelines, real-world use cases, and best practices to empower engineers and designers.

Planning work and being open with progress is key to getting your fellow designers involved.

Improving the Figma Component Library

A unified design system requires a well-maintained Figma library:

1. Identify Key Focus Areas: Address inconsistencies and gaps between the Figma and engineering libraries while improving auto-layout.
2. Improve Atoms: Fix or replace missing components, ensuring alignment with developer libraries.
3. Educate Teams: Ensure cross-functional partners understand and utilize available tools by providing training and support.
4. Unify Libraries via Token Studio: Utilize Token Studio to ensure long-term consistency between engineering and design.

Overly complicated flowcharts for contributions scare people away and make the issue bigger than it need be.

Simplifying Contributions

For a design system to thrive, contribution should be simple:

• Allow Flexibility: Teams can build custom components as long as core themes and atomic components are used.
• Use Team “Recipes”: Individual teams should develop custom recipes that align with their needs and contribute relevant ones back to the core system.
• Foster Trust: Build relationships with engineering leaders to establish a culture of shared ownership.

Grafana Labs co-founder, Torkel, unveiling the latest Explore Metrics tooling (built entirely with design system)

Measuring Success

Measuring a design system’s success involves tracking several metrics:

• Efficiency Metrics: Monitor team velocity and Figma component detach rates.
• Consistency Metrics: Analyze error rates, feature utilization, and time to task completion.
• Customer Satisfaction: Conduct surveys and clickstream analysis to assess the design system’s effect on user experience.

Conclusion

Design systems are indispensable for delivering efficient, impactful, and consistent software experiences. They align business goals with user satisfaction, reduce costs, and improve the lives of colleagues. By fostering efficient processes, understanding business needs, and focusing on user success, a well-implemented design system provides immense value.

Cody Thistleward welcomes further discussions on implementing design systems. Feel free to reach out to check out his website or email him at codythistleward@gmail.com

Also, please take a look at Saga, the Grafana design system.