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

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