Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jean Servaas and Mirko Azis - The 100 year system - UX Y'all 2022.pdf

UX Y'all
October 12, 2022

Jean Servaas and Mirko Azis - The 100 year system - UX Y'all 2022.pdf

UX Y'all

October 12, 2022
Tweet

More Decks by UX Y'all

Other Decks in Design

Transcript

  1. The 100 year 
 system Mirko Azis
 Design Principal
 IBM

    Design Program Office e Jeannie Servaas
 Design Principal
 IBM Design Program Office
  2. 2 Jeannie + Mirko IBM Design Program Office The 100

    year system © IBM Corporation 2
  3. IBM Design Program Office The 100 year system © IBM

    Corporation 3
  4. IBM Design Program Office The 100 year system © IBM

    Corporation 0.5% 4
  5. 5 “Design” + “system” IBM Design Program Office The 100

    year system © IBM Corporation
  6. 6

  7. Why? How? What? Design = decision 7 IBM Design Program

    Office The 100 year system © IBM Corporation 7
  8. System = governance 8 IBM Design Program Office The 100

    year system © IBM Corporation 8
  9. There Here 9 IBM Design Program Office The 100 year

    system © IBM Corporation 9
  10. The Philosopher King How are decisions made and governed? 10

    IBM Design Program Office The 100 year system © IBM Corporation 10
  11. The City States The Philosopher King How are decisions made

    and governed? 11 IBM Design Program Office The 100 year system © IBM Corporation 11
  12. The Empire The City States The Philosopher King How are

    decisions made and governed? 12 IBM Design Program Office The 100 year system © IBM Corporation 12
  13. The Republic The Empire The City States The Philosopher King

    How are decisions made and governed? 13 IBM Design Program Office The 100 year system © IBM Corporation 13
  14. 14 IBM Design Program Office The 100 year system ©

    IBM Corporation 14
  15. Part 1: The Philosopher King IBM Design Program Office The

    100 year system © IBM Corporation 15
  16. 16 IBM Design Program Office The 100 year system ©

    IBM Corporation 16
  17. 17 T.J. Watson, Jr. IBM Design Program Office The 100

    year system © IBM Corporation 17
  18. 18 Eliot Noyes IBM Design Program Office The 100 year

    system © IBM Corporation 18
  19. IBM Design Program Office The 100 year system © IBM

    Corporation 19
  20. Unity, not uniformity.” “ A corporation should be like a

    painting; everything visible should contribute to the correct total statement.” “ Eliot Noyes IBM Design Program Office The 100 year system © IBM Corporation 20
  21. IBM Design Program Office The 100 year system © IBM

    Corporation 21
  22. IBM Design Program Office The 100 year system © IBM

    Corporation 22
  23. None
  24. None
  25. 25 Part 2: The City States IBM Design Program Office

    The 100 year system © IBM Corporation 25 25
  26. Need image 26 IBM Design Program Office The 100 year

    system © IBM Corporation 26
  27. LO IT Consumer 27 IBM Design Program Office The 100

    year system © IBM Corporation 27
  28. IBM PCjr The easy one for everyone IBM Design Program

    Office The 100 year system © IBM Corporation 28
  29. Phil Gilbert, GM of IBM Design 2010–2021 IBM Design Program

    Office The 100 year system © IBM Corporation 29
  30. IBM Design Program Office The 100 year system © IBM

    Corporation 30
  31. Products VPs & Fellows Distinguished Designers 
 & Directors Design

    
 Principals 
 & Design Managers Craft
 & leadership Consulting VPs Distinguished Designers 
 & Directors Design 
 Principals 
 & Design 
 Managers Craft
 & leadership Corporate VPs Directors Design 
 Principals 
 & Design 
 Managers Craft
 & leadership Sales & Marketing VPs Distinguished Designers 
 & Directors Design 
 Principals 
 & Design 
 Managers Craft
 & leadership Executives Teams
  32. 97 locations 37 countries IBM Design Program Office The 100

    year system © IBM Corporation 32
  33. IBM Design Program Office The 100 year system © IBM

    Corporation 33
  34. Need image

  35. IBM Design Program Office The 100 year system © IBM

    Corporation 35
  36. IBM Design Program Office The 100 year system © IBM

    Corporation 36
  37. IBM Design Program Office The 100 year system © IBM

    Corporation 37
  38. IBM Design Program Office 38

  39. ~16 IBM Design Systems 39 IBM Design Program Office The

    100 year system © IBM Corporation 39
  40. Presentation Title Section Title Abu Dhabi Government Departments Abu Dhabi

    Agriculture and Food Safety Authority Abu Dhabi Chamber Abu Dhabi Housing Authority Abu Dhabi Investment Of fi ce Abu Dhabi Pension Fund Abu Dhabi Police Abu Dhabi Quality and Conformity Council Abu Dhabi Sewerage Services Company Abu Dhabi Social Support Authority Abu Dhabi Waste Management Center Department of Community Development Department of Culture and Tourism Department of Economic Development Department of Education and Knowledge Department of Energy Department of Health Department of Municipalities and Transport Environment Agency - Abu Dhabi Family Care Authority Family Development Foundation General Administration of Customs - Abu Dhabi Human Resources Authority Integrated Transport Center Khalifa Fund for Enterprise Development National Rehabilitation Center 40
  41. Melvin Conway Software Architect Organizations […] are constrained to 


    produce designs which 
 are copies of the communication structure 
 of the organization Conway’s Law Touchpoint Touchpoint Touchpoint Touchpoint 41 IBM Design Program Office The 100 year system © IBM Corporation 41
  42. Melvin Conway Software Architect Organizations […] are constrained to 


    produce designs which 
 are copies of the communication structure 
 of the organization Touchpoint Touchpoint Touchpoint Touchpoint Customer Use Case Customer Use Case Customer Use Case Customer Use Case Customer Use Case Customer Use Case Customer Use Case Journey Conway’s Law 42 IBM Design Program Office The 100 year system © IBM Corporation 42
  43. Abu Dhabi Smart Solutions & Services Authority “One Government” journeys

    on TAMM Find and Secure a Job Get Education Get Married Start Your Business Setup and Manage Your Farm Investor Journey Register a Foreign Company Organise an Event Buy or Sell a Car Obtain a Golden Visa Get a Driver’s License Get a Professional License Apply for National Housing Support Discover Abu Dhabi as a Business Destination Abu Dhabi Government Departments Abu Dhabi Agriculture and Food Safety Authority Abu Dhabi Chamber Abu Dhabi Housing Authority Abu Dhabi Investment Of fi ce Abu Dhabi Pension Fund Abu Dhabi Police Abu Dhabi Quality and Conformity Council Abu Dhabi Sewerage Services Company Abu Dhabi Social Support Authority Abu Dhabi Waste Management Center Department of Community Development Department of Culture and Tourism Department of Economic Development Department of Education and Knowledge Department of Energy Department of Health Department of Municipalities and Transport Environment Agency - Abu Dhabi Family Care Authority Family Development Foundation General Administration of Customs - Abu Dhabi Human Resources Authority Integrated Transport Center Khalifa Fund for Enterprise Development National Rehabilitation Center 43 IBM Design Program Office 43
  44. Abu Dhabi Smart Solutions & Services Authority “One Government” journeys

    on TAMM Find and Secure a Job Get Education Get Married Start Your Business Setup and Manage Your Farm Investor Journey Register a Foreign Company Organise an Event Buy or Sell a Car Obtain a Golden Visa Get a Driver’s License Get a Professional License Apply for National Housing Support Discover Abu Dhabi as a Business Destination
  45. 45 IBM Design Program Office The 100 year system ©

    IBM Corporation 45
  46. 46 Part 3: The Empire IBM Design Program Office The

    100 year system © IBM Corporation 46 46
  47. 47 IBM Consulting IBM Software Red Hat Hybrid Cloud Platform

    IBM Systems Enterprise Systems IBM Cloud Edge Computing Other clouds (AWS, Azure, 
 etc.) Software partners System integrators – Digital Transformation – Application Modernization – Intelligent Workflows — Mainframes — Storage — Quantum computing – Automation – Data & AI – Integration – Networking – Security – Industry capabilities
  48. → Platform ecosystem 3 simple principles for teams to uphold

    our platform ecosystem strategy. Works together No real solution relies on 
 only one IBM offering. Products & services must 
 be interoperable. Works the same Complex workflows require users to work across offerings. Products & services must 
 act consistently everywhere. Works for me Our users’ trust is earned one excellent experience at a time. Every product & service must deliver a desirable experience. IBM Design Program Office The 100 year system © IBM Corporation 48
  49. IBM Design Program Office The 100 year system © IBM

    Corporation 49
  50. Stand for = Stand out IBM Design Program Office The

    100 year system © IBM Corporation 50
  51. What does the world need? What’s special about you? 51

    IBM Design Program Office The 100 year system © IBM Corporation 51
  52. 52 IBM Design Program Office The 100 year system ©

    IBM Corporation 52
  53. 53 IBM Design Program Office The 100 year system ©

    IBM Corporation 53
  54. 54 IBM Design Program Office The 100 year system ©

    IBM Corporation 54
  55. 55 IBM Design Program Office The 100 year system ©

    IBM Corporation 55
  56. 56 IBM Design Program Office The 100 year system ©

    IBM Corporation 56
  57. 57 IBM Design Program Office The 100 year system ©

    IBM Corporation 57
  58. 58 IBM Design Program Office The 100 year system ©

    IBM Corporation 58
  59. None
  60. 60 IBM Design Program Office The 100 year system ©

    IBM Corporation 60
  61. Page 15 IBM BX&D Solid Logotype 90 degree interior and

    round exterior and Serif  Slab Serifs Vertical Interiors/ round exteriors Distinct point on the ‘M’ 61 IBM Design Program Office The 100 year system © IBM Corporation 61
  62. 62 The 100 year system © IBM Corporation 62

  63. 63 IBM Design Program Office The 100 year system ©

    IBM Corporation 63
  64. 64 IBM Design Program Office The 100 year system ©

    IBM Corporation 64 64
  65. System 360 PANTONE® Reflex Blue

  66. 66 IBM Design Program Office The 100 year system ©

    IBM Corporation 66
  67. 67 IBM Design Program Office The 100 year system ©

    IBM Corporation 67
  68. 68 IBM Design Program Office The 100 year system ©

    IBM Corporation 68
  69. 69 ~16→1 IBM Design Systems IBM Design Program Office The

    100 year system © IBM Corporation 69 69 69
  70. IBM Design Program Office The 100 year system © IBM

    Corporation 70
  71. Explore Carbon

  72. IBM Brand
 Brand strategy, promise, voice, assets, 
 guidance, tools,

    governance IBM Design Language Visual elements, assets, tools, guidance, governance Carbon Design System
 Code packages, grid, type, tokens, components, patterns, governance IBM Plex® $token-01 32 24 16 Primary button IBM Accessibility Let’s
 create IBM Design Program Office The 100 year system © IBM Corporation 72
  73. Philosophy & Principles Design Essentials IBM Con fi dential

  74. 74 _Expanding the system
 _Learn about what PALs need
 _Community


    _Built relationships w/ teams
 _Created a steering committee
 with PAL leaders/owners
 _Opportunities to be consistent
 in our documentation
 _Identify duplication Good IBM Design Program Office The 100 year system © IBM Corporation 74
  75. _No sharing between PALs
 _Contribution process is
 _Teams need to

    maintain their PAL site
 _No data on who’s using what
 _Inconsistent assessment of quality
 _Every process is manual / inconsistent
 _Different naming / classes /schemas Bad 💩 IBM Design Program Office The 100 year system © IBM Corporation 75
  76. 76 Reflect IBM Design Program Office The 100 year system

    © IBM Corporation 76
  77. IBM Design Program Office The 100 year system © IBM

    Corporation 77
  78. IBM Design Program Office The 100 year system © IBM

    Corporation 78
  79. IBM Design Program Office The 100 year system © IBM

    Corporation 79
  80. Part 4: The Republic IBM Design Program Office The 100

    year system © IBM Corporation 80
  81. A 100 year system perpetuates ways 
 of knowing, acting

    
 and making. IBM Design Program Office The 100 year system © IBM Corporation 81
  82. Our future platform will catalog a vast array of resource

    types, expanding the traditional definition of a design system. Standards
 Business goals, customer requirements & definitions 
 of “excellence.” All the resources a team needs The 100 year system © IBM Corporation 82
  83. Our future platform will catalog a vast array of resource

    types, expanding the traditional definition of a design system. Standards
 Business goals, customer requirements & definitions 
 of “excellence.” Assets Reusable components, patterns, templates, libraries, content blurbs. All the resources a team needs The 100 year system © IBM Corporation 83
  84. Our future platform will catalog a vast array of resource

    types, expanding the traditional definition of a design system. Standards
 Business goals, customer requirements & definitions 
 of “excellence.” Practices Behaviors, processes, methods, and other ways of acting. Assets Reusable components, patterns, templates, libraries, content blurbs. All the resources a team needs The 100 year system © IBM Corporation 84
  85. Our future platform will catalog a vast array of resource

    types, expanding the traditional definition of a design system. Standards
 Business goals, customer requirements & definitions 
 of “excellence.” Practices Behaviors, processes, methods, and other ways of acting. Assets Reusable components, patterns, templates, libraries, content blurbs. Insights Knowledge that we've gathered about our users and customers, domains and markets. All the resources a team needs The 100 year system © IBM Corporation 85
  86. _Components (building blocks)
 _Patterns (reusable combos of components & content)


    _Functions (code with no fixed UI)
 _Templates (specify order/placement of patterns)
 Asset Type IBM Design Program Office The 100 year system © IBM Corporation 86
  87. _Asset type (component vs. pattern)
 _Asset status (draft vs experimental

    vs stable)
 _Asset tags (data display, input control)
 _Asset framework (React, Angular, Svelte)
 _Asset platform (web, cross-platform, mobile)
 _Asset demos (Storybook URLs) Asset Schema IBM Design Program Office The 100 year system © IBM Corporation 87
  88. 88

  89. 89

  90. A 100 year system isn’t built on the back of

    an individual. IBM Design Program Office The 100 year system © IBM Corporation 90
  91. Contribute Build Community-fed. Expert-curated. The System supports a vibrant ecosystem

    of makers and contributors at every point of their lifecycle with IBM. IBM Design Program Office The 100 year system © IBM Corporation 91
  92. Community-fed. Expert-curated. The System supports a vibrant ecosystem of makers

    and contributors at every point of their lifecycle with IBM. Contribute Build Learn Govern IBM Design Program Office The 100 year system © IBM Corporation 92
  93. A 100 year system makes it easier, faster 
 and

    cheaper to participate than not. IBM Design Program Office The 100 year system © IBM Corporation 93
  94. 94

  95. Learn experience standard QwikDemo service Data scientist persona Cloud Pak

    for Data WalkMe service Project Excel Globalization standard One system.
 No silos. The System breaks 
 down information silos and establishes direct relationships between related resources Product page Content standard SEO optimization IBM Design Program Office The 100 year system © IBM Corporation 95
  96. 96

  97. None
  98. Carbon Platform (beta)

  99. A 100 year system respects the expertise of its constituents.

    IBM Design Program Office The 100 year system © IBM Corporation 99
  100. IBM Design Program Office The 100 year system © IBM

    Corporation 100
  101. IBM Design Program Office The 100 year system © IBM

    Corporation 101
  102. Team resources Domain resources Global resources Local lenses.
 Global visibility.

    The System is home to both universally applicable and domain- specific content, enabling the global community to learn from any team’s experience. IBM Design Program Office The 100 year system © IBM Corporation 102
  103. Carbon Steering Committee IBM Design Program Office The 100 year

    system © IBM Corporation 103
  104. A federated model Carbon for_ _AEM _AI Apps
 _Cloud
 _IBM

    Products _IBM.com _iX
 _Security _Salesforce
 
 
 IBM Design Program Office The 100 year system © IBM Corporation 104
  105. → → → → 4. Develop 2. Scope 3. Iterate

    1. Intent Focus on user empathy by defining clear pain points 
 and problem statements, along with a to-be scenario. Get to know more about user need, existing resources, 
 similar use cases, and sync 
 with DSAG team. Use the knowledge you 
 gained in the first two sections to iterate on your designs. Build your designs in code, following our best practices. IBM Design Program Office The 100 year system © IBM Corporation 105
  106. 106

  107. 107

  108. A 100 year system 
 needs to support 
 an

    enterprise’s ability 
 to survive 100 years. IBM Design Program Office The 100 year system © IBM Corporation 108
  109. The Republic The Empire The City States The Philosopher King

    Every solution works until it doesn’t. IBM Design Program Office The 100 year system © IBM Corporation 109
  110. “System” is a verb IBM Design Program Office The 100

    year system © IBM Corporation 110
  111. IBM Design Program Office The 100 year system © IBM

    Corporation 111
  112. IBM Design Program Office The 100 year system © IBM

    Corporation 112