8000
Skip to content

JasonGrant/design-system-kickoff-checklist

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
.gitattributes
.gitattributes
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation

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
  • 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

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?

About

Design System Kickoff Checklist < 598F /p>

Resources

Readme

License

MIT license
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

0