Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Teams and workflow inside design systems

198 visualizaciones

Publicado el

Design System y su organización de equipo y de carga de trabajo

Publicado en: Diseño
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Teams and workflow inside design systems

  1. 1. IN MY OPINION… TEAMS & WORKFLOW IN DESIGN SYSTEMS
  2. 2. IN MY OPINION…
  3. 3. Visual UX Visual DSL Design Team
  4. 4. Visual UX Visual DSL Design Team DSL Dev Team Dev Dev Dev Dev
  5. 5. DSL Team? Visual UX Visual Dev Dev Dev Dev
  6. 6. DSL Product Team ResearchLead QA ScrumVisual UX Visual Front-end Arch. Front-end Arch.Front-end Front-end
  7. 7. THE WORKFLOW
  8. 8. Discovery Prototype Validate Build QA Doc Publish Adoption Measure success
  9. 9. Prototype ValidateDiscovery Identify squad needs Jira issues Survey study Squad interviews User research Audit Front end architecture Identify adhoc components needs Set security requirements Research UX Team Support & Management Lead ScrumFront-end Arch. Identify the impact Do we already have solutions for that problem inside the system? What is the impact cross squads of the problem? How the users are getting arround the problem today? Is it a Squad problem or is it an organization cross platform problem? Which is the most suitable technology to build components based apps? Which are the custom components needed for this project? Which security policies and systems are implemented in the organization and is required to comply with?
  10. 10. Prototype Validate Build QA Doc Publish Adoption Measure suc Research UX Team Support & Management Lead ScrumFront-end Arch. Insight Low fidelity archifact creation to fix the problem Setup engine for token generation Develop prototype atom components Initial version of component catalog and tooling Visual Front-end
  11. 11. Validate Build QA Doc Publish Adoption Measure success Team Support & Management Lead ScrumResearch Squads &User validation Present the solution to a group of people and listen to their reaction and feedback.
  12. 12. Build QA Doc Publish Adoption Measure success QA Checklist #1 Visual Quality #2 Su!cient States &Variations #3 Responsiveness #4 Content Resilience #5 Composability #6 Functionality #7 Accessibility #8 Browsers &Device Compatibility Research UX Team Support & Management Lead ScrumFront-end Arch.Visual Front-endQA Build &Iterate Produce a high fidelity solution Create the Design Token architecture Develop Web Components consuming Tokens Web Components Catalog Components builder, Components Generator, Demo environment Set up of a npm private registry to host components and dependencies
  13. 13. Doc Publish Adoption Measure success Focus on communicatiom Design documentation. Code/example demonstrations. Compose illustrations, interactive demos, and screenshots. Components documentation Training &Workshop materials Certification guides Research UX Team Support & Management Lead ScrumFront-end Arch.Visual Front-endQA
  14. 14. Publish Adoption Measure success Platform release Migrating DOC to the publishing platform. Uploading assets like images, design templates, and interactive demos. Finalizing live code/example demos. Testing page display, links, and other publishing QA. Web Component catalog release Private npm registry instance release UX Team Support & Management Lead ScrumFront-end Arch. Front-endVisualQA
  15. 15. Adoption Measure success Support & Management Lead ScrumResearch UX Dev Team Measuring Design System Success % Components Adoption % Squad interest in critiques, review sessions, etc. % Feedback % of certified Squad-developed components OKRs to Set Goals &Track Progress - Objective: Where do we want to go? - Key Result: How will we see if we are getting there? Enforce adoption Release presentation meeting (Provide all new documentation) Answer questions channel (DSL Team availabe for squads) Overcomunicate (Newsletter, Talks, Presentation) Github or similar new issues channel Training and workshops Evangelization Certification of Squad-developed components
  16. 16. Adoption
  17. 17. Adoption Distribution Tooling Education System The design language and UI components The fun stuff! Streamline how people use the system - Sketch plugins - VScode plugins - Component Catalog Automating release and communication of updates - Deploying npm private registry - Slack - Invision DSM Helping people use the system better - Docs - Guidelines - Onboard training - Component certification criteria - Workshops
  18. 18. AREN’T STEPS A WATERFALL?
  19. 19. Discovery Prototype Validate Build QA Doc Publish Adoption Measure success
  20. 20. Discovery Prototype Validate Build QA Doc Publish Adoption Measure success
  21. 21. Discovery Prototype Validate Build QA Doc Publish Adoption Measure success
  22. 22. Track 1 Discovery Delivery Backlog Sprints DSL Release Sell Release Publish Adoption Adoption DocBuild Discovery Backlog Design Team Kanban ValidatePrototypeDiscovery Validated Ideas Track 2 Delivery
  23. 23. 0% 25% 50% 75% CAPACITY Adoption time commitement DSL TEAM time commitement VisualVisual UXLead Research ScrumQA A A A A A A A Front-end Arch. Front-end Front-end Arch. Front-end
  24. 24. THE CRACKING MONOLITH
  25. 25. Fundamentals Components Templates Pages
  26. 26. Fundamentals Components Templates Pages Design System S PP P Product
  27. 27. Design System S PP P PPPP P P Product
  28. 28. Fundamentals Components Templates Pages
  29. 29. B CountryBrand Design System S P P 5 Platform Tools P 3 B M asterBrand Design System S Speci!c DSL BrokerApps S P 30 StandarProduct P Brazil P M X P UK B CountryBrand Design System S P Spain B Corporate Brand P 5 Adm in Consoles P 5 Content& M edia ProductA P M edia ProductB P Content ProductC P 5 Platform Tools Design System S B Division Brand P 15 Custom Stes Micro Design Systems: Breaking the Monolith
  30. 30. THANKS!

×