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

Jean Servaas and Mirko Azis - The 100 year syst...

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

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

    Office The 100 year system © IBM Corporation 7
  5. The Philosopher King How are decisions made and governed? 10

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

    and governed? 11 IBM Design Program Office The 100 year system © IBM Corporation 11
  7. 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
  8. 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
  9. Part 1: The Philosopher King IBM Design Program Office The

    100 year system © IBM Corporation 15
  10. 17 T.J. Watson, Jr. IBM Design Program Office The 100

    year system © IBM Corporation 17
  11. 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
  12. 25 Part 2: The City States IBM Design Program Office

    The 100 year system © IBM Corporation 25 25
  13. LO IT Consumer 27 IBM Design Program Office The 100

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

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

    Office The 100 year system © IBM Corporation 29
  16. 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
  17. ~16 IBM Design Systems 39 IBM Design Program Office The

    100 year system © IBM Corporation 39
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 46 Part 3: The Empire IBM Design Program Office The

    100 year system © IBM Corporation 46 46
  24. 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
  25. → 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
  26. Stand for = Stand out IBM Design Program Office The

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

    IBM Design Program Office The 100 year system © IBM Corporation 51
  28. 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
  29. 69 ~16→1 IBM Design Systems IBM Design Program Office The

    100 year system © IBM Corporation 69 69 69
  30. 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
  31. 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
  32. _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
  33. Part 4: The Republic IBM Design Program Office The 100

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

    
 and making. IBM Design Program Office The 100 year system © IBM Corporation 81
  35. 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
  36. 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
  37. 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
  38. 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
  39. _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
  40. _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
  41. 88

  42. 89

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

    an individual. IBM Design Program Office The 100 year system © IBM Corporation 90
  44. 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
  45. 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
  46. 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
  47. 94

  48. 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
  49. 96

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

    IBM Design Program Office The 100 year system © IBM Corporation 99
  51. 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
  52. 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
  53. → → → → 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
  54. 106

  55. 107

  56. 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
  57. 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