Summary of Welcome to design systems - Lesson 1 : Introduction to design systems
Summary of "Welcome to design systems - Lesson 1: Introduction to design systems"
This lesson introduces the concept of design systems, explaining what they are, their components, benefits, challenges, and how to decide if and when to implement one. It also outlines a methodology for starting a Design System journey, including conducting audits and planning for ongoing maintenance and advocacy.
Main Ideas and Concepts
- What is a Design System?
- More than just a style guide or component library.
- Encompasses the entire product ecosystem, reflecting an organization’s vision, values, and strategy.
- Communicates not only what the design elements are but how and why they are used.
- Components of a Design System:
- Style Guides: Define visual standards like color, typography, voice, and tone.
- Component Libraries: Building blocks such as UI Components, layouts, templates, and interaction patterns with documentation and code integration.
- Why Use a Design System?
- Increases efficiency by reducing redundant work and enabling faster design and development.
- Helps scale teams by serving as an onboarding resource.
- Aligns design and development through shared language and resources.
- Improves product consistency, usability, accessibility, and customer trust.
- When to Consider a Design System:
Look for signs such as:- Inconsistencies across styles, components, or behaviors.
- Multiple brands or products needing unified experiences.
- Multiple themes (e.g., light/dark modes) or device types.
- Redundancy and repeated debates over design decisions.
- Inefficient onboarding or difficulty finding product information.
- Desire to improve speed and efficiency in prototyping and iteration.
- Challenges and Considerations:
- Design systems require ongoing time, effort, and resources to build and maintain.
- Leadership buy-in can be difficult due to delayed visible benefits and resource demands.
- Socializing the Design System within the organization needs champions and cross-team collaboration.
- Not every team or product needs a Design System immediately; timing and needs vary.
Methodology / Instructions for Starting a Design System
- Identify the Need:
- Observe inconsistencies and inefficiencies.
- Discuss as a team to assess whether a Design System might help.
- Perform an Audit:
- Gather all existing product elements (colors, typography, icons, components, interactions).
- Include all device types and themes.
- Interact with the product to capture dynamic states (loading, hover, modals).
- Sort and categorize elements, further subcategorizing where necessary.
- Analyze findings to identify redundancies, inconsistencies, and accessibility issues.
- Engage Cross-Functional Partners:
- Include developers, support teams, and others to get a comprehensive view.
- Present Findings:
- Use audit results to open conversations and build leadership support.
- Plan the Design System Journey:
- Understand the non-linear phases:
- Approval: Secure leadership buy-in and resources.
- Discovery: Research, audits, and problem identification.
- Definition: Decide on solutions, contributors, and approaches.
- Building: Assemble the Design System components.
- Documentation: Create accessible guides on usage.
- Maintenance: Keep the system updated and aligned with product/code.
- Advocacy: Promote adoption within the organization.
- Understand the non-linear phases:
- Consider Contributors and Audience:
- Contributors can be individuals or teams across design, development, product, marketing, etc.
- Audience includes designers, developers, UX writers, brand and marketing teams, and others who will use or benefit from the system.
- Plan for ongoing feedback and iteration.
- Decide on Implementation Approach:
- Build from scratch for a fully customized system (resource-intensive).
- Adapt or borrow from existing design systems or components to save time and budget.
- Often a hybrid approach is used.
- Evaluate Project Fit:
- Align Design System goals with company objectives.
- Assess contributor bandwidth and leadership resource commitment.
- Start Small if Needed:
- Incremental improvements can add value while preparing for a larger system later.
Example Scenario: Kai and the Habits App
- Kai, a product designer on a multi-device habit app, notices inconsistencies and inefficiencies in design components across themes and devices.
- Kai and the team conduct an audit with leadership approval, uncovering issues and potential solutions.
- The Design System emerges as a promising solution, with leadership support obtained after multiple discussions.
- The team prepares to build and evolve their Design System as the company grows.
Speakers / Sources Featured
Category
Educational