Essential Design Systems for Product Managers
Best practices and examples from top companies for creating effective design systems
What is a Design System?
A design system is a valuable tool that helps create and maintain consistent visual design and user experience in digital products and software development. By providing guidelines, components, and rules, design systems establish a common language and standard guidelines for teams involved, including designers, developers, product managers, and content managers. This promotes collaboration, eliminates barriers, and enhances workflow for a more streamlined and productive outcome.
Interestingly, the origins of design systems can be traced back to the 1960s when Christopher Alexander mentioned design criteria in the NATO Software Engineering Conference. In the 1970s, Alexander, along with Murray Silverstein and Sara Ishikawa, published a book named “A Pattern Language” that discussed interconnected patterns in architecture in an easy and democratic way. This gave birth to what we know today as “Design Systems.”
In 1994, design systems gained popularity in software development after the publication of the book Design Patterns: Elements of Reusable Object-Oriented Software. The mainstream interest about pattern languages for UI design resurged in 2006 with the opening of Yahoo! Design Pattern Library and Yahoo! User Interface Library (YUI).
Google’s Material Design in 2014 was the first to be called a “design language” by the firm. Since 2016, the term “Design System” gained more popularity, thanks to the book about Atomic Design, which describes an approach to design layouts of digital products in a component-based way, making it future-friendly and easy to update.
Design systems have come a long way since their inception. They are now widely used by companies to maintain consistency in branding, speed up the design and development process, and promote collaboration and communication between different teams and departments.
Ways Product Managers can Contribute to Design Systems
Product managers can play a crucial role in contributing to the design system. While designers and engineers may have the expertise to build the system, here are some ways product managers can do so:
- Align the design system with the organization’s goals and user needs: Product managers can ensure that the design system meets the specific needs of the product and its users. They can collaborate with designers, developers, and other stakeholders to understand which components and features are most important.
- Prioritize the roadmap: Based on organizational goals and user needs, product managers can work with the design and development teams to prioritize the roadmap for the design system. They can help determine which features should be developed first and which components should be included.
- Develop a communication strategy: A communication strategy can help drive adoption of the design system. Product managers can create documentation, training materials, and other resources to help teams understand how to use the system effectively. They can also build feedback loops with teams and stakeholders to ensure their needs are addressed.
- Measure the impact: Product managers can track metrics such as usage rates, page views, and user feedback to identify areas for improvement. They can use this data to continually improve the design system and ensure that it meets the needs of the organization and its users.
- Maintain ongoing investment: To ensure that the design system remains up-to-date with the latest technologies and best practices, product managers can invest in ongoing maintenance. They can encourage adoption of the system in new products and across different teams to maximize its impact.
A Good Design System
A good design system is one tailored to the specific needs of the organization and its products, while also meeting the needs of its users. Here are some key characteristics that make a design system effective:
- Consistency: A design system should establish and maintain consistent visual and interaction patterns across all products and platforms, creating a cohesive and seamless user experience.
- Flexibility: While consistency is important, a design system should also be flexible enough to accommodate the unique needs of different products and user groups. This means providing modular components and guidelines that can be customized as needed.
- Usability: A design system should prioritize usability and accessibility, ensuring that it is easy for designers and developers to implement and that it meets the needs of all users, regardless of their abilities or circumstances.
- Scalability: As products and organizations grow, the design system should be able to scale and adapt accordingly, providing guidelines and tools that can support a wide range of use cases and scenarios.
- Sustainability: A design system should be maintained and updated regularly, ensuring that it remains relevant and useful over time. This means establishing governance processes, creating documentation and training materials, and investing in ongoing support and development.
Learn Design Systems from Great Examples
Studying great examples is one of the most effective ways to learn about design systems. Exploring the design systems of top companies can provide valuable insights and inspiration for crafting exceptional systems that meet the needs of users. These design-centric companies have set the bar high for creating exceptional design systems. Here is a list of 10 design systems:
1. Google Material Design System
Google’s design system offers guidelines, components, and tools to help designers and developers create a consistent user experience across platforms and devices. It is known for its use of bold color, typography, and animation.
2. Apple Human Interface Guidelines
Apple’s design system provides principles, patterns, and guidelines for designing apps and interfaces for iOS, macOS, watchOS, and tvOS. It emphasizes simplicity, clarity, and elegance.
3. Microsoft Fluent Design System
Microsoft’s design system focuses on creating a coherent and expressive design language across devices and platforms. It offers guidelines, tools, and components to help designers and developers create intuitive and engaging user experiences.
4. Amazon Cloudscape
Amazon’s design system offers design patterns and guidelines for creating cloud-based applications. It emphasizes modularity, flexibility, and scalability.
5. Shopify Polaris
Shopify’s design system provides a set of principles, guidelines, and tools for designing interfaces for e-commerce platforms. It emphasizes clarity, accessibility, and consistency.
6. Uber Base Web
Uber’s design system offers a set of reusable components and guidelines for creating interfaces that are fast, accessible, and scalable. It is known for its use of simple, clear, and intuitive design.
7. Mailchimp Pattern Library
Mailchimp’s design system provides a set of design patterns and guidelines for creating interfaces for email marketing. It emphasizes visual hierarchy, clarity, and ease of use.
8. Salesforce Lightning Design System
Salesforce’s design system offers a set of design guidelines, components, and tools for creating interfaces for sales, service, and marketing. It emphasizes consistency, flexibility, and usability.
9. Atlassian Design System
Atlassian’s design system provides a set of design principles, guidelines, and tools for creating interfaces for collaboration and project management tools. It emphasizes clarity, simplicity, and ease of use.
10. IBM Carbon Design System
IBM’s design system offers a set of guidelines, components, and tools for creating interfaces for enterprise applications. It emphasizes modularity, consistency, and accessibility.
Wrapping Up
Design systems are crucial for creating digital products that are consistent and scalable. By learning from the contributions of product managers and studying examples from top companies, you can gain valuable insights into creating effective design systems that align with your organization’s goals. The ten design systems listed here offer unique approaches and strengths to inspire your own design efforts. Explore, learn, and take your design system to the next level!
Reference
- Design system (Wikipedia)
- What do design system product managers do? (Knapsack)
- 12 Leading Design Systems You Can Learn From (Dribbble)
- Top 8 Design System Examples (UXPin)
- 10 Best Design Systems and How to Learn (and Steal) From Them (DesignerUp)
