Design Systems with Soul | Product Designer at Google | Reed Enger

Summary

Reid shares his journey from print design to working at Google Cloud, highlighting his experiences with design systems. He emphasizes the importance of building systems that are actionable, measurable, and user-focused, with principles that can evolve over time. Key recommendations include ensuring principles are clear and actionable, creating glanceable documentation, seeking regular feedback, and designing with intentionality by focusing on the unique purpose—or 'soul'—of each element in a design system. His insights provide a comprehensive framework for maintaining effective, adaptable design systems that grow with their ecosystems.

Takeaways

• 😀 Reid's design career evolved from print design to working at Google, where he currently maintains design systems for Google Cloud and artificial intelligence.
• 🌍 A design system defines and organizes elements to make ecosystems teachable and scalable, allowing teams to work together efficiently on complex projects.
• 🏛 Historical examples, like Vitruvius' architecture, highlight how design systems have been used throughout time in various fields to create cohesive and functional systems.
• 💻 Modern design systems are essential for large-scale platforms, such as Google Cloud, which has over 300 people working on its UX and engineering teams.
• 🧩 Design systems are broken down into functional patterns (logic) and perceptual patterns (style) that define the user experience through components and design elements.
• 📊 The Cloud Design System includes typical elements like styles, components, and patterns, as well as best practices and resources for data display.
• ⚙️ Design systems require continuous evolution and maintenance through practices that keep them alive and adaptable to changing user needs and ecosystem growth.
• 🎯 Principles in a design system must be actionable and measurable to guide effective design decisions. Google Cloud's approach to this includes breaking down vague principles into specific, testable actions.
• 📝 Feedback is essential for improving design systems. Regular surveys and user feedback help identify gaps, such as miscommunication between designers and engineers about available features.
• ❤️ Every element in a design system has a 'soul,' a unique purpose that drives its design. Reid uses this concept to create more intentional and meaningful user experiences in his projects, like Trivium.
• 🖋 Design principles and decisions should be rooted in intentionality, with each element serving a specific function that contributes to the overall experience, from typography to UI components.

Q & A

What is Reid's background and current role?

Reid has a diverse background in design, starting in print design before moving through small agencies, freelance work, and teaching. He later worked at Huge in Brooklyn and now works at Google in Seattle, focusing on design systems for Google Cloud and, more recently, artificial intelligence.

What is the main challenge that Reid faces in his current work on Google Cloud?

Reid is responsible for maintaining a system that allows a large team to work efficiently on Google Cloud, a platform that is vast and complex. The challenge lies in managing a design system for a system that serves hundreds of users and is built and maintained by a large team.

How does Reid define a design system?

A design system is a set of organized elements of logic that makes up an ecosystem, designed to be teachable and scalable. It is a set of shared rules, components, and principles that help teams collaborate efficiently on complex tasks.

What are the key components that make up a design system?

Key components of a design system include functional patterns (such as individual elements and code), perceptual patterns (colors, styles, typography), and practices that keep the system alive and relevant, like feedback and growth strategies.

What are some historical examples of design systems?

An example of an old design system is Vitruvius' 'Ten Books of Architecture,' a Roman-era text that set out principles for architectural design. Later examples include graphic standards manuals and transit system guidelines, which also served as design systems for large-scale, collaborative efforts.

How does Reid apply his own design system to the work he does at Google Cloud?

Reid breaks down his design system into four main components: principles, guidelines, patterns, and practices. Principles define the values of the system, guidelines are actionable steps for applying those values, patterns are the core components, and practices help keep the system up to date.

What is the importance of actionable and measurable design principles?

Actionable and measurable design principles are crucial for aligning a large team with a common vision. They need to be specific enough to guide decision-making and should be assessable through concrete benchmarks to ensure they are being followed effectively.

Why does Reid emphasize the need for frequent feedback in design systems?

Frequent feedback ensures that the design system remains useful and efficient for all its users. It helps identify areas where the system may be lacking or causing issues, such as confusion between design and engineering teams or misunderstandings of available components.

What does Reid mean by the 'soul' of a design system?

Reid refers to the 'soul' of a design system as the unique purpose and intention of each element within the system. Drawing inspiration from historical thinkers like Leibniz, he believes that every component should have a clear and meaningful role, which helps drive intentional and cohesive design decisions.

Can you explain the concept of a 'soul-focused' design system using Trivium as an example?

In the case of Trivium, Reid developed a soul-focused design system by identifying the purpose of each component in the platform, from typefaces to layout. This approach ensured that every design decision was intentional and served a larger experience, such as creating a tangible connection with artwork by displaying images in a larger format.