Design System Kickoff

Checklist

• Vision and Mission
  • What is the vision and mission statement of the company?
  • How will the design system support that vision and mission?
    • What is the mission of the design system?
      • What value do we bring to customers?
      • What value do we bring to cross-functional teams?
      • What value do we bring to the company?
    • What are the core principles of the design system? see examples from other design systems
      • What will it enable the company or teams or customers to do?
      • What does the leadership, stakeholders, teams, and customers expect?
      • What problems will it solve?
      • How will we differentiate from our competitors?
      • How do we want to make customers, designers, engineers or others feel?
• Who will the Design System serve?
  • Internal
    • Branding
    • Product Owners
    • User Experience Research
    • User Experience Design
    • Product Designers
    • Interaction Designers
    • Engineers
    • Marketing
    • Content Editors
  • External
    • Customers
    • Partners
• Who should be considered as stakeholders and what category are they in?
  • Supporters
    • Typically leadership and management who are interested in reports on progress and key metrics.
  • Informed
    • Not actively involved but are influential with supporters and have an opinion on the decisions and direction of the design system.
  • Contributors
    • Manage, design, develop, document, and maintain the design system.
  • Consumers
    • Those that utilize design system through documentation, release notes, tooling and providing feedback.
• What will be delivered?
  • Branding
  • Principles
  • Visual Language
    • Color, typography, size, spacing, and grid.
  • Light, Dark and System Defined Mode
  • Content
    • Writing style, capitalization, punctuation, formatting, abbreviations, acronyms, numbers, percentages, dates, and times.
  • Lexicon
  • Localization
  • Accessibility
  • Functional Components
  • Component Best Practices
  • Patterns
  • Interactions and motion
  • Icons, Illustrations, photography
• What aspects of the delivered product are public, what is private, and is anything open source?
• What technologies will the design system support?
  • Desktop app
  • Web app
    • Latest browsers or legacy
    • Progressive Web App (offline support) or online only
  • Mobile Devices
  • Tablets
  • Smart Watches
• How will the design system be structured?
  • Decisions on who the design system will serve, what will be delivered and the technologies, there are a few ways of structuring the design system.
    • Single, centralized, unified system
    • System of systems, foundation elements with verticals built on top
• What products and sites will the design system support?
  • Products (Current and Future)
  • Product Sales Website
  • Community Site
  • Marketing Website
  • Company Website
• What skills are required to address the needs currently and in the future when scaling the design system?
  • Leadership
    • Buy-in, adoption, and funding
  • Product Owner
  • Project Management
    • Delegate work, manage schedules, and status updates
  • Product Management
    • Needs of customers/users/stakeholders are captured and prioritized
  • DevOps
  • Data & Analytics
    • Track installs, usage, devices, measure performance, and sentiment.
  • Research
    • Evaluate, discover insights, and advocate for the customers/users.
  • Branding
    • Description
  • Content Strategy & Design
    • Description
  • Localization
  • Accessibility
    • Ensure design system adheres to industry standards like WCAG
  • Testing / QA
    • E2E Tests, Unit Tests, Visual Regression Tests, Integration Tests
  • Front-end Engineering
    • Component creation and coding best practices.
  • User Experience
    • Develop best practices and guidelines for patterns.
  • Interaction & Motion Design
    • Description
  • Visual Design
    • Define visual style for components
  • Illustrator
    • If illustration is a key element for the brand.
• How will you communicate?
  • Don't work in a silo
  • Ruthlessly over-communicate... until people tell you they heard enough and you are repeating yourself.
• How will you build feedback mechanisms?
  • Weekly office hours
  • Design system team partnering and assisting teams with delivery to understand what is working and what is not.
  • Select product designers and front-end engineers from different product lines as representatives on steering committee.
  • Have clearly defined ways for how to submit feedback
  • Describe what happens once someone provides feedback and be as transparent as possible
  • Track usage where possible so trends can be analyzed by:
    • Version
    • Component
    • Technology
    • Product
• Definition of Success
  • Adoption or Collaboration
    • Designers and Engineers must all trust and use daily for success.
    • Designers and Engineers must be involved in community of practice and help drive success.
  • Coverage
    • Percentage of product(s) that are covered by the design system. The greater the coverage, the less ad-hoc custom solutions will be created.
  • Shared Ownership or Empowerment
    • For those the design system serves, the more they are involved in the process, the more they will trust it.
    • Empowerment for entire team to feel involved in scaling and improving the design system. Rules should reduce the simple without limiting creativity on the unique aspects of the business.
• Measurement
  • Measurement should be based on what you are trying to solve with the design system.
  • Subjective
    • Does the design system improve your workflow?
    • How ofter do you use the design system?
    • What would you improve in the design system?
    • Do we effectively utilize compounding components to reduce repetition withing the design system?
  • Objective
    • Does design system include a component library?
    • Does design system include interactive components?
    • Does design system include design documentation on usage and best practices?
    • Does design system include engineering documentation?
  • Technical
    • WAI-ARIA Coverage
    • Google Chrome Lighthouse scores or sitespeed.io
    • System Usability Scale (SUS), User Index, SUPR-Q
    • A/B Tests
    • Page weight reduction of HTML, JS, CSS, Images, and Fonts
• Timeline
  • What deadlines currently exist?
  • Roadmap for creation and maintenance
    • Scope, MVP, Iterate, Extend, ...
• Governance
  • What deadlines currently exist?
  • Roadmap for creation and maintenance
    • Scope, MVP, Iterate, Extend, ...

Initial Sprints

Sprint 00

• Sprints
  • Decide on length of sprint and cadence of planning & post-sprint meetings.
• Inventory
  • Review screens, stylesheets, and code to determine:
    • Colors
    • Typography
    • Grids
    • Spacing
    • Icons
    • Accessibility
    • Components
    • Patterns
  • Document elements of modular front-end architecture.
  • Collect data and summarize analytics
  • Visualize findings to share insights
• Meet with stakeholders and future users
  • Understand their needs and desires
• Review checklist with leadership and key stakeholders to understand assumptions

Sprint 01

• Inventory Report
  • Present the findings and where there was consistency and inconsistency.
  • Describe how inconsistencies affect user experience, contribute to debt, and increase cost of software development.
• Purpose and Values
  • Define why you are creating a design system
  • Set some short term measurable goals
• Principles
  • Should be detailed enough to support team in decision making
  • Memorable - Team should be able to memorize and recite
  • No less than 3, no more than 5
• Team
  • Utilize stakeholder feedback and principles to develop the core focus of the design system team.
  • Share who is making the key decisions and what decision making process will look like.
  • What are the core skills required to kickoff initial stages of the design system?
  • What skills will be required as the design system scales?

Sprint 02

• Key Decisions
  • Utilize an existing product or technology as basis or start from scratch with new technology.
  • How will system be distributed.
    • Design Tooling
    • Engineering Tooling
    • Documentation
• Name the system
  • Acronym, abbreviation, related proper noun, unrelated proper noun, "adjective" Design System, "noun" Design System, "Company" Design System
• Future Press Release
• Define color palette
  • Corporate branding or divergent
  • Naming convention
  • Check colors for contrast compliance
  • Check colors against color blindness simulators
  • Evaluate
• Define initial feedback mechanisms
• Define versioning
  • Semantic Versioning SEMVER
    • Major.Minor.Patch
      • Major
        • version when you make incompatible API changes
      • Minor
        • version when you add functionality in a backwards compatible manner
      • Patch
        • version when you make backwards compatible bug fixes
    • Decide if versioning will be only system wide or by component.

Sprint 03

• TBD

Team Evolution

Initial - Start Small

• Outline a small team

Start to Grow

• Outline of a growing team

Maintain

• Outline of a team maintaining system

Supporting Information

Design System Resources

• Books
  • Laying the Foundations by Andrew Couldwell
  • Design Systems by Alla Kholmatova
  • Expressive Design Systems by Yesenia Perez-Cruz
  • Atomic Design by Brad Frost
  • Design Systems Everything you need to know to get started by Maxime Rabot
• Conferences
  • Clarity
  • Front Conference
  • Design Systems London
• Tools
  • Figma
  • Storybook
    • Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
  • Zero Height
    • Central hub for designers, engineers, product and marketing teams. Create a single source of truth for all aspects of your design system, bringing together the tools your teams already love.
  • SuperPosition
    • Use the design system you already have. Extract design tokens from websites and use them in code and in your design tool.
  • Toolabs
    • Design, Prototype, Document and Development Platform
  • Lingo
    • Create and share living brand style guides, digital asset libraries and more.
  • Supernova
    • Enables the whole team to collaborate using the tools they love to deliver products faster. Manage and share design systems coherently across design and code to a degree never seen before. No more "hand-off."

Core Principle Examples

• Salesforce Lightning Design System
  • Clarity
  • Efficiency
  • Consistency
  • Beauty
• Google Material Design
  • Material is the metaphor
  • Bold, graphic, intentional
  • Motion provides meaning
• IBM Design
  • A focus on user outcomes
  • Restless Innovation­
  • Diverse empowered teams
• Airbnb Design
  • Unified
  • Universal
  • Iconic
  • Conversational
• VMware Clarity
  • Product-based
  • Rapid development
  • Evolving
  • Reliable
• Intuit Harmony Design
  • Drive cohesive customer experiences across devices and product ecosystem.
  • Steward design innovation and excellence throughout the Intuit organization and beyond
  • Support internal and external Intuit teams through a centralized design system and re-usable components

Team Structure Examples

• SaaS Company
  • 3rd Iteration of a Design System
    • (13) Products
    • Platforms (Web, iOS, Android)
    • 5,000 Employees
    • 250,000 customers
    • 900 Designers, engineers, writers
  • Team
    • (4) Designers
    • (9) Engineers
    • (1) Illustrator
    • (1) Prototyper
    • (2) Tooling
    • (1) Content Design
    • (1) Design Manager
    • (1) Engineering Manager
    • (1) Product Manager
• Travel Site
  • Creation of a Design System
    • (1) Product
    • Platforms (Web, iOS, Android)
    • Users (Customer, partner, 3rd party)
  • Measurement
    • <1% Negative a/b test performance
    • 72% felt processes were improved
    • 89% felt designs were improved
  • Team
    • (4) User Experience Designers
    • (6) Developers

New Component Checklist

• Is the new component unique and cannot be a generalization of an existing component?
• Does the new component solve a problem that cannot be solved with existing components?
• Does the new component meet customer, product, and business needs across multiple areas?
• Does it meet accessibility standards?