Six and A Half Philosophies

1. Alex (Jun) Zhu , User Experience Manager, SAP

2. “ The physicist who is only a physicist can still be a first-class physicist and a most valuable member of society. But nobody can be a great economist who is only an economist - and I am even tempted to add that the economist who is only an economist is likely to become a nuisance if not a positive danger. ” Friedrich Hayek The Dilemma of Specialization

3. Multidisciplinary Landscape of Design: Urban Planning Economics Architecture System Dynamics Linguistics Art Business Design Literature Technology Philosophy Ethics Psychology Sociology Politics Anthropology Biography

4. What Is Design?

5. My Personal Definition of Design: “ Design refers to the human activity to invent a new structure for utility ” Note: This is a very general definition, and should apply to all kinds of design activities, including UX design, industrial design, architectural design, urban design, process design, organization design, you name it.

6. “Human Activity”: Design Non-design Structure created by design Structure created by nature (Mercedes-Benz Bionic Concept Car) (Boxfish) Please note that I didn’t use “artificial” here. Human activity does not necessarily create artificial design, but can also create so-called natural design or organic design. To be introduced later…

7. “New”: Design Non-design New structure created by design Existing structure materialized and copied

8. “Structure”: Design Non-design In year 2007, our revenue is 8.2M in manufacturing industry, 3.2M in professional service industry, 1.4M in wholesale/retail, and 1.2M in High-Tech. Structured elements Unstructured (or loosely structured) elements Please note that “structured/unstructured” is a fairly relative judgment. Finally you can find a structure in almost everything in the world.

9. “Utility”: Design Non-design (Art) Structure created for utility Structure created for expression (Schroder House, Gerrit Rietveld) (Composition in Red, Yellow and Blue, Piet Mondrian)

10. How Structure Is Structured:  Boundary: border with its environment  Entities  Substructures  Ties between entities or substructures Structure of Solar System

11. Tie between substructures Entity with attributes External Force Tie between substructures External Force Environment/Context Substructure Boundary

12. Types of Structures (by Entity): • Structure of Physical Entities • Structure of Informational Entities (visual elements, data, etc.) • Structure of People • Structure of Time • Structure of Logic • Structure of Behaviors/Events/Activities • Structure of Mind • Structure of Economy • Etc.

13. Structure of Physical Entities: Keyboard Layout of BlackBerry The Giant Swiss Army Life

14. Structure of Informational Entities: Typology Map of Metro Line A Typical Portal Layout

15. Structure of People: Organization Hierarchy Social Network Visualization (Jon Kleinberg & Lars Backstrom, Cornell University)

16. Structure of Time: Gantt Chart Outlook Calendar

17. Structure of Logic: Function show_hide_dynamicpane () { if (!show_flag) { dynamicpane.visibility = “visible”; } else { dynamicpane.visibility = “invisible”; } } A Process Flow If-Else Logic Structure

18. Structure of Mind: Taxonomy of “Cognitive Domain” (Professor Bloom, 1956) What’s On A Man’s Mind? (Image source: crazy-jokes.com)

19. Structure of Economy: GDP Structure of Year 2005 (Data Source: National Statistics Bureau) SAP Financial Performance from Google Finance

20. A Few Types of Structure (By Form): Linear Structure Unipolar Network Structure Matrix Structure Network Structure Multipolar Network Structure Nonpolar Network Structure

21. Linear Structure: Guided Activity (Wizard) Linear Structure

22. Matrix Structure: Horizontal/Vertical Information Architecture Function/Product Matrix Org Structure Matrix Structure Product Mgt. Product A Product B Product C Design Development

23. Unipolar Network Structure: Web Portals See Themselves as Hub of Internet Unipolar Network Structure Urban Structure of Beijing (image source from Google Map)

24. Multipolar Network Structure: Typical Information Architecture of A Website Multipolar Network Structure Urban Structure of Shanghai (image source from Google Map)

25. Multipolar Network Structure: Social Network Nonpolar Network Structure Semantic Network (e.g. Wikipedia) User Experience Architecture Design Human Scale Prototype

26.

27. “ The word ‘universe’ is derived from the Old Greek univers, from Latin universa, which combines uni- (the combining form of unus, or ‘one’) with versus (perfect passive participle of vertere, or ‘turn’). The word, therefore, means ‘all turned into one’ or ‘revolving as one’ or ‘orbiting as one’. ” Etymology of The Term "Universe” Wikipedia

28. Mathematic Formulas of Tao: Absolute Formula: Pragmatic Formula: M = 6.5

29. Proposed 6.5 Philosophies for UX Design: 1. The city creates the theater and is the theater 2. This is a semi-structured world 3. Goodness of fit: Environmental Fitness 4. Goodness of fit: Internal Fitness 5. The ecosystem, gene, invisible hand, and supply chain 6. Talk, write, and imagine using language 6.5. To design or not design, this is a question

30.

31. Kashgar, 2005 Mistério e melancolia de uma rua (Giorgio de Chirico, 1914) Trastevere, Rome, 2004 Delhi, 2007

32. “ The essential physical means of a city's existence are the fixed site, the durable shelter, the permanent facilities for assembly, interchange, and storage; the essential social means are the social division of labor, which serves not merely the economic life but the cultural process. The city in its complete sense, then, is a geographic plexus, an economic organization, an institutional process, a theater of social action, and an esthetic symbol of collective unity. … The city creates the theater and is the theater. It is in the city, the city as theater, that man’s more purposive activities are formulated and worked out, through conflicting and cooperating personalities, events, groups, into more significant culminations ” Lewis Mumford The Culture of Cities, 1937

33. “ In vain, great-hearted Kublai, shall I attempt to describe Zaira, city of high bastions. I could tell you how many steps make up the streets rising like stairways, and the degree of the arcades' curves, and what kind of zinc scales cover the roofs; but I already know this would be the same as telling you nothing. The city does not consist of this, but of relationships between the measurements of its space and the events of its past: the height of a lamppost and the distance from the ground of a hanged usurper's swaying feet; the line strung from the lamppost to the railing opposite and the festoons that decorate the course of the queen's nuptial procession; the height of that railing and the leap of the adulterer who climbed over it at dawn; the tilt of a guttering and a cat's progress along it as he slips into the same window; the firing range of a gunboat which has suddenly appeared beyond the cape and the bomb that destroys the guttering; the rips in the fish net and the three old men seated on the dock mending nets and telling each other for the hundredth time the story of the gunboat of the usurper, who some say was the queen's illegitimate son, abandoned in his swaddling clothes there on the dock. Italo Calvino Chapter 1, Invisible Cities ”

34. “ 宽宏大量的忽必烈汗啊，无论我怎样描述采拉这个有许多巍峨碉堡的城，都是徒劳无功的。我可以告诉你，像楼梯一样升高的街道有多少级，拱廊的弯度多大，屋顶上铺着怎样的锌片；可是我已经知道，那等于什么都没有告诉你。组成这城市的并不是这些东西而是它的空间面积与历史事件之间的关系：灯柱的高度、被吊死的篡朝者摆荡的脚与地面的距离；系在灯柱与对面铁栏之间的绳索、女皇大婚巡行时沿路张结的彩带；栅栏有多高、偷情的男子如何在黎明时分跃起爬过它；檐槽的斜度、他闪进窗子时一头猫怎样沿着檐槽走过；突然在海峡外出现的炮艇的火器射程有多远、炮弹怎样轰掉檐槽；鱼网的裂口、坐在码头上的三个老人怎样一面补网一面交换已经讲过一百次的炮艇和篡朝者的故事 — — 有人说他是在襁褓时就给遗弃在这码头上的、女皇的私生子。 ” Italo Calvino Chapter 1, Invisible Cities

35. “ In order to define this quality in buildings and in towns, we must begin by understanding that every place is given its character by certain patterns of events that keep on happening there. ” Christopher Alexander The Timeless Way of Building

36. Now, let’s go back to my definition of design: “ Design refers to the human activity to invent a new structure for utility. ”

37. “Ends” and “Means” of Design: Structure of Physical Objects + + + = = + Structure of Informational Objects Direct Manipulation Structure of Logic Structure of Time Structure of Behaviors/Events/Activities Structure of People Structure of Mind Structure of Economy Influence Ends

38. Example: Architecture Direct Manipulation Influence   Goal

39. Example: BlackBerry Direct Manipulation Influence   Goal

40. Conclusion:  The mission of design is to improve the human emotion (structure of mind), and economic outcome (structure of economy)  To achieve this mission, we have to influence the “structure of events” (e.g. the process flow) and the “structure of people” (e.g. social network), by manipulating the controls, screens, behaviors, information architecture, etc.  This also determines the design process: “define the mission” -> “design the stories” -> “design the UI”

41.

42. The “Hard” Part and The “Soft” Part in Cosmos: Three Nebulae in Narrow Band (Source: NASA Website)

43. The “Hard” Part and The “Soft” Part in Our Life: Relatively “Hard” Part Relatively “Soft” Part Solid Liquid Organization Community Managership Leadership Database Documents Law Morality Engineering Design BBS Wiki Process Practice Browse Search Left Brain Right Brain Reality Dream Science Art/Philosophy Explicit Knowledge Tacit Knowledge Analytic Thinking Intuition Quantitative Qualitative Structuralism Deconstructionism … …

44. The Benefit and Cost of “Structure”: Benefit:  Regularity & Stability  Controllability  Predictability  Internal force to balance with external force  Out-of-the-box Utility  Etc. Cost:  Cost to construct, deploy, and maintain  Inflexibility  Diversity Lose: opportunity cost to become other structures

45. Example: In-house Recruiting System Think about what are the benefits and costs for a company to develop an in- house system to manage their recruiting process. Benefit:  Regularity & Stability: process standardization  Controllability: accountability, policy reinforcement, etc.  Predictability: process transparency  Internal force: work flow, status management  Out-of-the-box Utility: best practices Cost:  Cost to construct, deploy, and maintain: development cost, implementation cost, maintenance cost, etc.  Inflexibility: what if the process changes dramatically? what a big re- organization happens? What if the approver is on vacation? …  Diversity lose: people are forced to use the same process and methods without exceptions

46. Metaphor: A Restaurant That Only Serves Combo Benefit:  No need to order one by one  Seems to reflect the best practice  Etc. But:  I like everything but the meat soup, since I am vegetarian!!!

47. “ The problem, like all those with which we are concerned, is one of balance. Too little liberty brings stagnation and too much brings chaos. ” Bertrand Russell

48. Conclusion: Be cautious not to over-structure or over-design. Reach a good balance between being structured and being flexible (unstructured) through: • Componentization and Configuration • “Soft Control” by offering guidance and best practices • Leave a “hole” to accommodate unstructured activities, and provide a convenient link if possible and necessary. Design Time Highly dynamic activities Medium dynamic activities Fixed activities Run Time Link ?

49. Componentization and Configuration: SAP NetWeaver™ PEOPLE INTEGRATION Multichannel access Portal Collaboration INFORMATION INTEGRATION Knowledge Mgmt Master Data Mgmt PROCESS INTEGRATION Integration Broker Business Process Mgmt APPLICATION PLATFORM J2EE ABAP DB and OS Abstraction Management Bus. Intelligence Service Oriented Architecture: SAP NetWeaver

50. Soft Control (Semi-Structure): Graphic Navigation in SAP Profitability Modeling Tool Business Process Foundation in SAP Consolidation Solution

51. Linked “Hole”: Save as PDF Structured Data Date: xxx City: xxx Purpose: xxx … Unstructured Data ? Attach emails Upload receipts Print out Submit + Paper Receipts Attach scanned receipts Ask For Clarifications Company Expense Policy

52. Linked “Hole”: Productive Applications (Unstructured) Transaction Systems (Structured) • Copy as a link/Paste • Automatically determined by Word using Smart Tags

53. Linked “Hole”: Outlook (Unstructured) Adobe Interactive Form (Semi-structured) Database (Structured)

54. Linked “Hole”: Duet™ - Seamless integrates Microsoft® Office and SAP Backend

55. Linked “Hole”: Customer-Uploaded Image (unstructured) System-generated Data (structured) SAP Performance Mgt. System

56.

57. Fallingwater (Frank Lloyd Wright, 1936)

58. Fitness: A well-designed structure needs to have 2 different kinds of fitness  Environmental Fitness (balance with external forces): Fitness between the structure and its environment/context  Internal Fitness (balance with internal forces): Fitness between the elements, substructures, and their ties.

59. Environmental Fitness: External Force Environment/Context External Force

60. Example: BlackBerry Existing Structure (Environment/Context) New Structure n Influe Cons t ce raint

61. Example: Ross Lovegrove’s Organic Design “Go” Chair Ty Nant Water Bottle (Ross Lovegrove) (Ross Lovegrove)

62. Example: Natural Language Search Normal Search Engine Natural Search Engine Search Engine 1 Search Engine 2 Usability Venders China List me the top 5 usability venders in China Search Search Virtual Company A Virtual Company A Virtual Company B Virtual Company B Virtual Company B was established in 2004 and now has 12 FTEs… Virtual Company B was established in 2004 and now has 12 FTEs… Virtual Company A is a Beijing-based usability service vender… Environment has to adapt to the new structure Virtual Company A is a Beijing-based usability service vender… Good Environmental Fitness

63. “ There is a quality even meaner than outright ugliness or disorder, and this meaner quality is the dishonest mask of pretended order, achieved by ignoring or suppressing the real order that is struggling to exist and to be served. ” Jane Jacobs Urban Thinker

64. “ The rightness of the form depends, in each one of these cases, on the degree to which it fits the rest of the ensemble. ” Christopher Alexander Notes on the Synthesis of Form

65. Challenges:  Indefinite possibilities are available to define the boundary between the structure and its environment/context  Usually the environment/context is ambiguous to the designers (consider the regularities and irregularities in the world)  Usually the environment/context changes over instances  Sometimes the environment/context evolves over time

66. Solutions: 1. Find an appropriate scope of the design (define an appropriate boundary) 2. An adapted “Reductionism” approach to solve ambiguity: Understand -> Generalize -> Imagine -> Scope -> Model -> Design -> Trial & Error -> Solve 3. Four mindsets: Skeptic -> Dreamer -> Architect -> Scientist 4. Adaptability of the structure, in terms of localization, customization, and personalization (e.g. the surface of sofa can always adapt to the people sitting there) 5. Provide an organic structure that emerges, adapts, and grows (to be addressed later)

67. 1. Define The Border with The Environment

68. Indefinite Possibilities to Set Boundary: Environment/Context ? Indefinite Possibilities to Set Borders

69. “ He who defines the problem, declares the solution. ” Bob Baxley Design Vision Conversation “ The greatest challenge to any thinker is stating the problem in a way that will allow a solution. ” Bertrand Russell Design Vision Conversation

70. Example: A. Improve the efficiency of my production and distribution B. Improve the efficiency of my supply chain Result A Internal Production Efficiency: • • • • Production Process & Technology Distribution Center Agile manufacturing, JIT (kanban) Etc. Result B Supply Chain Efficiency: • Vender Managed Inventory • Outsourcing • Information sharing • RFID

71. Example: A. Find new technologies to reduce the CO 2 emission B. Reinvent the ecosystem to reduce the greenhouse gas emission C. Solve or relieve the “global warming” problem Result A Result B • CO 2 -reducing Technologies • Policies (regulations, taxes, accounting, etc.) • Incentives • Market/Industrialization • Public awareness • Alternative Energy Result C • CO 2 Capturing and Reuse (e.g. plastic production, cryogen, petroleum mining, etc.) • Or even wilder idea: use CO 2 as cryogen to cool down our planet?

72. Example: A. Improve the usability of the registration form of our website B. Improve the registration process of our web site C. Improve the internet registration experience in general Result A Result B Non-registered user New User Registration Form: Full Name: * Alex Zhu Email Address: * Keepsilence.com@gmail.com Password: * XXXXXX Repeat Password: * XXXXXX Mailing Address: Line 1: * Other fields… # 1293, Pudong South Manual Registration Shopping Cart Place Order (enter name, email, mailing address, etc.) Automatic Registration Result C Google Toolbar

73. A More Radical Solution to Reduce “Transaction Cost”? Transaction History recorded Website A User Repository Call • Credibility • Transaction History • Favorites • Preferences • Profile • etc. Register Now Return Register once for all Visit Visit Call Register Now Return Transaction History recorded Website B

74. General Principles:  The broader you defines the boundary, the more likely your solution will have a strategic impact. This is where innovation often occurs.  However, this is an economic decision which means you need first consider the capacity (production possibility curve), feasibility, and then do an ROI evaluation 5 A B 4 C 3 D 2 E 1 0 F 1 2 3 4 5

75. 2. An Adapted “Reductionism” Approach to Solve Ambiguity

76. “ Architectural design problems can also be referred to as being ‘wicked problems’ in that they have no definitive formulation, no explicit ‘stopping rule’, always more than one plausible explanation, a problem formulation that corresponds to a solution and vice versa, and that their solutions cannot be strictly correct or false. ” Peter Powel

77. “ The first was never to accept anything for true which I did not clearly know to be such; that is to say, carefully to avoid precipitancy and prejudice, and to comprise nothing more in my judgment than what was presented to my mind so clearly and distinctly as to exclude all ground of doubt. The second, to divide each of the difficulties under examination into as many parts as possible, and as might be necessary for its adequate solution. The third, to conduct my thoughts in such order that, by commencing with objects the simplest and easiest to know, I might ascend by little and little, and, as it were, step by step, to the knowledge of the more complex; assigning in thought a certain order even to those objects which in their own nature do not stand in a relation of antecedence and sequence. And the last, in every case to make enumerations so complete, and reviews so general, that I might be assured that nothing was omitted. ” René Descartes Discourse on the Method of Rightly Conducting the Reason

78. Reductionism Methodology: 1. Filter away all that may be in doubt. 2. Divide difficulties to as small pieces as necessary. 3. Start with the simplest problems. 4. Make Lists, Tables, Diagrams. Source: Wikipedia (Term: “Discourse on the Method”)

79. Definition of Reductionism: In philosophy, reductionism asserts that the nature of complex things is reduced to the nature of sums of simpler or more fundamental things. Practical Benefits:  Break down complex problems into smaller parts which are more understandable and operable.  In this way, specialization and collaboration are possible, and the problem can be solved in a progressive manner  Select an order to solve these parts step by step, depending on the complexity of each part and its dependency with other parts.  Though reductionism has been criticized a lot in the past 2 centuries (mainly by Holism, Structuralism, and Emergentism who believe “the whole is more than the sum of its parts”), this is still a very pragmatic approach to solve complex issues regardless of its limitations.

80. Non-human animals could be reductively explained as automata (De Homines 1622) Paul Cézanne believed that all objects can be abstracted as cylinders, spheres, and cones.

81. Constraints of Reductionism:  Study a part in isolation, ignoring the interplay between the part and its context  Proven to be error-prone by biography science, linguists, chemistry, and many other disciplines (e.g. Being isolated from their contexts, words will lose their meaning; Water has totally different quality with oxygen or hydrogen)

82. An Adapted “Reductionism” Approach: ? Understand Generalize/ Filter Imagine ? ? Scope Design Trial & Error Solve x x Model

83. General Principles:  Macro -> Micro  Backbone -> Flesh  Enumeration: Abundance -> Choice  “Damped” Iteration

84. Macro -> Micro, Backbone -> Fresh Three perspectives to understand a new city:  Bird View (Macro thinking, big picture)  Night View (Noise filtering, structure, backbone, pattern identification)  Attendance (Micro thinking, experience, empathy, validate) Bird View Night View Attendance

85. “ Looks like a ridge from one perspective, Looks like a peak from another, Knowing not the true face of Lushan Mountain, ” For I am in its midst. Su Dongpo Handwriting on The Wall of Xilin

86. Metaphor: The Development Process of Baby Product Vision Blueprint Week 1 Week 4 Week 6 High-Fidelity Week 22 Week 24 Image source: http://www.pregnancy.org Low-Fidelity Week 30 Week 14 Week 18 Product Delivery Adaptation Birth 1 year old

87. Seven Bridges of Königsberg: Leonhard Euler Chapter 1, Invisible Cities

88. A “Micro -> Macro” Process: Macro Level SM Deliverables Virtual Company UX Deliverables <-> Model Company System-level Requirements <-> ersonas System-level design: Detailed use cases <-> Role Specifications • Function tree • System-level use cases Micro Level • Information Architecture • Screen flow (very low-fi) • UI specs for Common Behaviors Use Scenarios + UI Mockups + UI Specifications

89. Design Portal: Modal Company FutureTech System Modal Company • Company intro • Industries • Customers & Competitors • Organization Structure • Information Landscape Personas • Browse by name • Browse by organization • Search Business Processes • Browse Now, you are here: Design Portal > Modal Company > Organization Structure

90. Design Portal: Persona FutureTech System Modal Company • Company intro • Industries Now, you are here: Modal Company Portal > Personas > Kate Zhang Organizational data: Responsibilities: Name: Kate Zhang As a sales manager in Akron’s office in NY, Kate not only takes care of the sales performance in the east coast, but also needs to… • Customers & Competitors Company: FutureTech • Organization Structure Department: Office New York • Information Landscape Subordinates: Nancy Wang, Tony Lee, Xiaoyan Liu, Position: Sales Manager Direct Manager: Feng Tang Personas Other information: • Browse by name Computer Skills: Professional • Browse by organization • Search Business Processes • Browse Working Environment: shared office Equipments: Laptop, Blackberry, Fax, Printer, Telephone Software: SAP CRM, Outlook, Excel, Word, Powerpoint, WebEx, etc. Goals: • Wants to maintain a healthy opportunity pipeline in her team • Wants to achieve the sales quota • Wants the team to be motivated • Etc. Business Processes involved: • Order to Cash • Hire a new employee • Expense Reimbursement Management

91. Design Portal: System-Level Use Case FutureTech System Company Overview • Company intro • Industries • Customers & Competitors • Organization Structure • Information Landscape Personas • Browse by name • Browse by organization • Search Business Processes • Browse Now, you are here: Design Portal > Business Processes > ERM Process

92. “Abundance -> Choice” Image source: www.blog.speculist.com

93. “Damped Iteration”: Field Research Ad-hoc Research Lab Research ? ? ? Understand x x “Damped” Iteration

94. 3. Four Mindsets For Designers

95. Realist Some things are independent of mind Everything is mind dependent Architect Rationalist Some knowledge of the world is independent of our own experience Idealist Dreamer The structure of the mind Our mind structures the matches, in some respects, world the structure of the world  Kant  Plato  Descartes Scientist Empiricist All knowledge of the world We can gain knowledge of the world, but only comes from experience through experience  Aristotle Skeptic We have no better insight into the workings of our minds than into the world itself  Locke  Hume  Russell  Berkeley Categorization of Classical Epistemology

96. What Mindsets Are Required in Design? Architect • Scope Dreamer • Imagine • Model • Design Scientist • Validate Skeptic • Understand • Generalize/Filter

97. General Principles:  Since very few people really have all of these 4 very different mindsets, certain level of specialization in the design process seems to be necessary  However, the cost of specialization also needs to be evaluated (e.g. how to make sure the information fidelity across the researchers and designers, etc.). Refer to next section regarding internal fitness  “Focus with context” approach might be the best option

98. 4. Adaptability to deal with individual differences across instances

99. Different Levels of Adaptability: Localization Country Scale Industrialization Industry Scale Customization Personalization Company Scale Human Scale

100. Example: CSCW Design High Power Distance Culture (mono-nuclear) Medium Power Distance Culture (poly-nuclear) Low Power Distance Culture Organization Structure (Environment) (semi-homogenous) Environmental Fitness Collaboration Structure (Design) Centralized Model Decentralized Model (hierarchical communication) (hierarchical + collaboration) Distributed Model (Non-centered, social networking, clique)

101. Metaphor: Roadway Design in Urban Planning Urban Structure (Environment) Mono-nuclear Poly-nuclear (e.g. Beijing) (e.g. Shanghai) Low Power Distance Culture (semi-homogenous) Environmental Fitness Roadway Structure (Design) Centralized Model Decentralized Model Distributed Model

102.

103. Internal Fitness: Solomon Guggenheim Museum, New York (Frank Lloyd Wright, 1959)

104. Internal Fitness: This is a cutting board in your kitchen. It is built into the kitchen counter. When you are not using the cutting board it slides into the counter (Picture A). When you need to use it, you slide it out (Picture B). It is very convenient. But wait…you got a new problem. Reason: When you design a structure, you need to consider how all parts work together. Source: http://www.baddesigns.com

105. “ Form ever follows function. ” Louis Henri Sullivan Lippincott's Magazine “ Form follows function - that has been misunderstood. Form and function should be one, joined in a spiritual union. ” Frank Lloyd Wright

106. Interplay between Form and Function:  Function is the origin of the form  Form is constrained by the function, but not deterministic (the same function can be satisfied by various forms)  Diversity of forms embodies uniqueness (culture, personality, aesthetics, etc.)  Form can also have an influence over function and make the latter evolve

107. Internal Fitness: External Force Internal Force External Force Internal Force

108. What’s Internal Fitness? Balance among internal forces:  Conceptual Integrity (different goals and strategies)  Connection and communication (silos, misunderstandings, etc.)  Consistency (functional, behavioral, visual, mental model, etc.)

109. Challenges:  For complex systems, reductionism approach seems to be the only pragmatic way to make specialization & collaboration possible  Parts are studied and solved apart from the whole (context), and therefore there is a potential fallacy of composition (whole does not equal to the sum of parts)  A part’s neighbors are changing over time  Dilemma of specialization: different organizations, goals, knowledge, experience, skills, locations, culture, languages, personality, you name it  Hard to balance the efficiency and the communication intenseness among the people who work on these parts

110. A “Fallacy of Composition” Example in Economics:  If an individual farmer adopts a new cultivation technique , he will earn more from the improved production efficiency.  What happens if all famers adopt this new technology? Price S 1 D 1 Answer: A P 1 B P 2 Q 1 Q 2 S 2 Quantity The famers will earn less if all of them adopt the technology!

111. “ Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization's communication structure. ” Melvin Conway Datamation, 1968

112. Solutions:  Introduce systems thinking to understand the overall system landscape and interdependencies. This might be done by a few architects but with the whole group involved and informed  Carefully break down the whole into the parts, to avoid over fragmentation.  Standards, guidelines, governance, etc.  Patterns: share the same language (to be addressed later)  “Focus with context” when studying the parts  Try to align the organization structure with the system structure  Improve communication model in the entire organization, across disciplines (design, research, development, PM, marketing, support, etc.) and across functional parts (products, components, etc.)

113. “ If you wish to influence or control the behavior of a system, you must act on the system as a whole. Tweaking it in one place in the hope that nothing will happen in another is doomed to failure—that’s what connectedness is all about. ” Dennis Sherwood Systems Thinking

114. Systems Thinking: Systems Thinking, also known as System Dynamics, focuses on how the thing being studied interacts with the other constituents of the system. Therefore instead of isolating smaller and smaller parts of a system, systems thinking involves a broader view, looking at larger and larger numbers of interactions.

115. Systems Thinking Diagram: - Unit Price Example: + Technology Advancement + Quantity + Revenue + Visualize a more completed landscape of the farmer’s problem.

116. Example: Travel Management Cultural Model From SAPEnjoy Project (joint project with InContext, Enterprise)

117.

118. Plants in The Nature (Alex) Prosperity in A Market (Bab)

119. Challenges:  Environment changes over time  Mechanic structure does not scale  For complex problems, chaos ubiquitously exists in both environment and the internal organization, which makes up-front and centralized design/control impossible  We are witnessing a “Unipolar –> Multipolar –> Nonpolar” paradigm shift in the structure of our world in a lot of areas (which may be explained the Entropy theory), and design has to match in many cases

120. Environment Changes Over Time: For example, after a company has deployed an enterprise application:  The legal requirements may change  Business environment may change  Business process may change  Company policy may change  Organization structure may change  IT landscape may change  Etc.

121. Chaos (deterministic, unpredictable): “ A butterfly's wings might create tiny changes in the atmosphere that ultimately cause a tornado to appear. ” Edward Lorenz Image source from Wikipedia

122. Langton’s Virtual Ant: A 4-state 2-dimensional Turing machine invented in the 1980s. The ant starts out on a grid containing black and white cells, and then follows the following set of rules. 1. If the ant is on a black square, it turns right and moves forward one unit. 2. If the ant is on a white square, it turns left and moves forward one unit. 3. When the ant leaves a square, it inverts the color. Result from the Computational Simulation

123. Our World Is Getting More Homogeneous! Monopoly Economy /Command Economy Corporate Economy Consumer Economy (Liberalism) Economy Bipolar World (before 1990) Multipolar World (after 1990) Globalization (till ?) World Politics Realism Modernism Post-modernism Art Web 1.0 (Centralized Production) Web 1.5 (Integration) Web 2.0 (Mash-up, Collective Intelligence, etc.) Internet

124. Solutions:  Embrace the complexity, irregularity, and unpredictability of the environment. Shift from the “machine” metaphor to “organism” metaphor and “market” metaphor.  “Organism” metaphor: • • • • Ecosystem Seed Gene Evolves, adapts, and grows  “Market” metaphor: • • • • “The Invisible Hand” Self-interest and Incentive Supply Chain Specialization and Transaction cost

125. 1. The “Organism” Metaphor

126. “ Let the design: • be inspired by nature and be sustainable, healthy, conserving, and diverse. • unfold, like an organism, from the seed within. • exist in the "continuous present" and "begin again and again". • follow the flows and be flexible and adaptable. • satisfy social, physical, and spiritual needs. • "grow out of the site" and be unique. • celebrate the spirit of youth, play and surprise. • express the rhythm of music and the power of dance. ” Frank Lloyd Wright An Organic Architecture

127. “Organism” Metaphor: Cell Gene Seed

128. Sophistication Achieved by Genetic Algorithm: Complex or sophisticated outcomes derived from groups of individuals following simple rules. Simple Rules: 3.Separation 4.Alignment 5.Cohesion Craig Reynolds’s Computational Model “Boids”

129. Organic Model: T 1 T 2 Environment Environment Inorganic Structure Environmental Fitness at Time Point 1 T 1 Environment Environmental unfitness at Time Point 1 T 2 Environment Organic Structure Environmental Fitness at Time Point 1 Environmental Fitness at Time Point 2

130. Man-made Creature by Theo Jansen by using Genetic Algorithm

131. Wikipedia: A self-organized encyclopedia that grows everyday

132. Tags, Semi-structured , Collective Intelligence , Evolve , Flexibility , Democracy , Organic , Visualization, Discoverability , Information Decentralized Tagging: an emerging structure with no up- front planning or central control

133. Amazon’s Recommendation Engine: Intelligence based on simple algorithms

134. Social Network: Another example of growing structure

135. 2. The “Market” Metaphor

136. “ He generally, indeed, neither intends to promote the public interest, nor knows how much he is promoting it. … He intends only his own gain, and he is in this, as in many other cases, led by an invisible hand to promote an end which was no part of his intention. … By pursuing his own interest he frequently promotes that of the society more effectually than when he really intends to promote it. ” Adam Smith The Wealth of Nations

137. “ Motivation is the art of getting people to do what you want them to do because they want to do it. ” Dwight D. Eisenhower The Wealth of Nations

138. Order Achieved by Self-Interest: Complex or sophisticated outcomes derived from groups of individuals following simple rules (self-interest in this case). Simple Rules: D S 1 Free Market (Order Under The Chaos) 3.Buy more when price goes down 4.Sell more when price goes up

139. Market-driven Modal: T 1 T 2 Environment Environment Ego-centered Structure Environmental Fitness at Time Point 1 T 1 Environment Environmental unfitness at Time Point 1 T 2 Environment Open Structure and Open Market Environmental Fitness at Time Point 1 Environmental Fitness at Time Point 2

140. Supply Chain in Different Paradigms: Unipolar paradigm (e.g. web 1.0) Multipolar paradigm (e.g. web 1.5) Nonpolar paradigm (e.g. web 2.0) Value Supply (Design Time) Value Consumption (Run Time)

141. Specialization and Marketplace:  Each supplier only needs to take care of a much smaller scope of problem and with much more regularity  Each supplier is more responsive and adaptable to its local environment change (self-interest driven), and therefore the whole market is more adaptable  The mission of design is to reduce the transaction cost and reach the best economic efficiency

142. Transaction Cost Reduced by SOA: SOA High Transaction Cost (n=10) Lower Transaction Cost (n=5)

143. Open Source Example: Firefox’s Extensions

144. Yahoo Widget

145. Commonalities Between Wal-Mart & Yahoo Widget? Customer (One-stop Shopping Experience) User (Integrated User Experience) P&G Google Widget Repository VMI RFID Protocol Wal-Mart EDI Yahoo XML SDK Information Sharing Supply Chain of Wal-Mart Supply Chain of Yahoo Widget

146. “SOA” As A “Dissection Table”: “ Beautiful as the chance encounter of a sewing machine and an umbrella on a dissection table. ” Comte de Lautreamont Maldoror

147. EBay: Order Achieved by Reputation Mechanism (self-interest)

148. Market-driven Approach to Relieve Global Warming: Greenhouse Gas Emission Trading

149. Second Life: self-created and self- organized society

150. Google: A Market Place for Websites to Attract Customers

151. Mash-up: Google Map as a service + Smugmug as photo sharing service

152.

153. Language As The Greatest Invention of Human Beings: Key functions of language:  Communicate  Document  Learn  Think and develop new knowledge: people subconsciously use language to construct ideas in mind Why I think language as the greatest human invention:  The indefinite and complex world can be represented and understood by our finite and less complex language, maybe not 100% completely and accurately. How could?  The structure of the language somehow represents the structure of the world  The language finds the regularities in the irregularities, or in other words, the patterns of the complex.  Language evolves, adapts, and grows over time, contributed by collective intelligence of people across generations

154. Commonality Between Language and Design? Key functions of design:  Communicate  Innovate Why language is needed in design:  External Fitness: design should reflect the structure of the environment (or the world); design should communicate with users in an understandable manner  Internal Fitness: the parts need to communicate with each other; designers who work on these parts need to communicate with each other in an understandable manner  Organicism: to create an organic structure that evolves, adapts, and grows, a common language should be provided, to enable the collective intelligence

155. Etymology of “Design” in Chinese Language: This component means “language” The Word “Design” in Chinese

156. Etymology of “Design” in Chinese Language: Control people by using language Language Control, drive, employ Count numbers by using language Language Ten Etymology of These 2 Chinese Characters by Xu Shen (100 AC)

157. How Chinese Characters Are Structured: Metaphor, Symbolize Atomic Building Blocks (no meaning) Low-level Composited Building Blocks (meaning: mouth) Metaphor, logical aggregates, pictophonetics Layout Algorithm Metaphor, logical aggregates, pictophonetics Layout Algorithm Word finally composited (meaning: design, create) High-level Composited Building Blocks (meaning: speak, language)

158. How Words, Sentences, and Paragraphs Are Structured: Character (meaning: design, create) Metaphor, Reference Action + Object Algorithm Word with more complete but fixed meaning (meaning: design) Character (meaning: ideas) Metaphor, Reference Grammar Metaphor, Reference, Express Context, Style Paragraph with more situational and dynamic meaning (context more important than words) Sentence with situational meaning (meaning: help me to design)

159. How Chinese Character Evolves: “Horse” Oracle Bone Script ~1200 BC ~200 AC 1950 ~221 BC Seal Script Clerical Script Regular Script (Traditional) Regular Script (Simplified) Bronze Script Concrete, irregular, inconsistent, complex Abstract, regular, consistent, simple

160. Some Facts About Chinese Language: Synchronic study as of 2001:  8 basic strokes (atomic building blocks)  ~214 composited building blocks  ~80,000 Chinese characters in total, with ~3,500 of them commonly used, and ~2000 frequently used in daily life  Infinite sentence and paragraph compositions Diachronic study:  The basic strokes almost never changed  The building blocks and characters evolve gradually from concrete to abstract, from irregular to regular  The number of characters commonly used today does not increase much compared with the “Oracle Bone Script” period (3000 years ago)  The composited building blocks were simplified and reduced a few times (latest change is the Simplified Chinese revolution in mainland China)

161. Structure Elements in Language:  Different Levels of Building Blocks  Configurable Building Blocks Complex, Irregular Dynamic, Free, Stylish, Expressive Simple, Regular Fixed, Restricted, Consistent  Composition  Layout Algorithms  Polysemy  Grammar to define relationships and rules  Metaphors and References link to the real world  Cross-referencing  Constrained Freedom

162. Design As Language – Perfect Match!  Different Levels of Building Blocks  Configurable Building Blocks Complex, Irregular, Infinite  Composition Dynamic, Free, Stylish, Expressive Applications  Layout Algorithms Flows  Polysemy  Grammar to define relationships and rules Screens  Metaphors and References link to the real world Patterns Pattern Elements  Cross-referencing  Constrained Innovation UI Controls Simple, Regular, Less Fixed, Restricted, Consistent

163. How to Design As Language: Unspecific Problem Specific Problem Metaphor, Reference Metaphor, Reference ? Narrate and Express: Reference, Invoke, (Composite the structure in an Configure innovate way) + - Environmental Fitness Solution emerges F(x ) Є UI Dictionary Internal Fitness (Language Best Practices) Model Companies/Personas

164. Benefits of This Approach:  Liberate designers from trivial activities, but shift the focus to more design activities (e.g. process, application)  Enable designers, and potentially partners, customers, and users in the “Multipolar” or “Nonpolar” model, by sharing the language, and therefore the structure can grow  Internal fitness reached by using the same language (building blocks and grammar)  Solution emerges when the problem is narrated in a natural manner, and therefore both environmental fitness and internal fitness can be achieved  Innovation reached by narrating the problem in a creative way  Uniqueness reached by “writing styles”  Best practices  Economic efficiency and scalability (lower marginal cost)

165. How Narrative Design Works: Problem: Design an application for a regional sales manager to manage the sales activities and performance in his region. Narrative Design: Tony, sales manager of FutureTech, comes to the office in the morning. He logs into the system. The first thing he wants to do is to check whether there are some exceptions in his area of responsibility. The system messages him that there is an opportunity moving very slowly in the pipeline in the past month, and therefore Tony wants to drill down to see the reasons behind, and check who is the responsible person to respond to this problem. He realizes that the price set in the quotation is too high. The sales rep of this opportunity is Bob. Since the customer BigMoney is very strategic to the company’s growth, and therefore Tony creates a task for Bob to adjust the price in the quotation. …

166. How Narrative Design Works: Problem Narration: Noun. The sales rep of this opportunity is Bob. Since the customer BigMoney is very strategic to the company’s growth, and therefore Tony creates a task for Bob to adjust the price in the quotation. Noun. + - F(x) Є Design Dictionary (Language Best Practices) Model Companies, Personas

167. Question:  Does this approach lead to “design determinism”?  Does this approach kill design freedom and room for creativity?  Can design be automated by the computer this way, if the artificial intelligence is sophisticated enough?  Does this mean designer becomes less necessary?

168. No!!!  To narrate the problem accurately, you have to understand the problem accurately, which is the most important and difficult job in most cases.  The same problem can be narrated in very different way (next slide shows a different version of story adapted for “high power distance” culture)  Great creativity is not to reinvent the wheel, but reinvent the car  Designers become more strategic because they are moving to the upper end of the food chain.

169. Adapted Version of The Story: Problem Narration: Noun. The sales rep of this opportunity is Bob. Since the customer BigMoney is very strategic to the company’s growth, and therefore Tony opens the corresponding quotation by himself, overwrites the price, and then informs Bob about this decision. Noun. + - F(x) Є Design Dictionary (Language Best Practices) Model Companies, Personas

170. How Should Design Language Evolve: As suggested by the diachronic study of the Chinese language, the following principles/recommendations may apply to the design dictionary:  Number of UI controls should be relatively quite stable  As atomic building blocks, UI controls should not change much over time  New UI patterns can be invented only when necessary  Very infrequently used UI patterns should fade out over time  You can keep a relatively large screen repository, but hold the assumption that less than 20% of these screens are frequently used.  Spend 80% of your effort on this 20% screens according to Pareto’s rule

171.

172. On One Hand: African photos by Kevin Carter An Undesigned Life: poverty, suffer, unsatisfied demand, fight with environment Chicago photos (Alex) A Designed Life: abundance, enjoy, sufficient supply, utilize the environment

173. On The Other Hand: Shangri-la, Kashgar (Alex) Anonymous images searched from internet An Undesigned Life: A Designed Life: natural, alive, diversity, free, relax, emotional, sustainable artificial, isolated, commodity, restricted, incursion, cold, environmental damaging

174. The Ultimate Questions:  How do designers (as a whole) impact the world and the human life?  Does our work really create value? Are we spending money, time, and effort doing right things?  Does design sometimes become a “surplus of intellect” or “show-off of creativity”?  Are we solving the complexity or rather contributing to the complexity?  To design, or not design?

175. My Speculation How Complexity Evolves in Human Society: Starting Point Problem 1 Intents to solve S1 Solution 1 Generates new problem P1 Intents to solve Intents to solve S2 S3 Conflict and then generate new problem Generates new problem Intents to solve Problem 2 Generates new problem Problem Solution Intents to solve Generates new problem Conflict and then generate new problem

176. A Critical View of Our Civilization: Phenomenon:  In the very beginning, we only have a few basic problems (food, shelter, disease, sex, etc.)  In the end, we get thousands of millions of solutions, as well as thousands of millions of new problems!  Some of the basic problems are relatively better solved, but the others are even getting worse (e.g. freedom in life, happiness, environment, etc.) Example:  The ultimate intention for human to invent computer is NOT to increase productivity, but to serve people and liberate people from the work  But now, how many people (including you and me) are serving the computer, and working even harder than before?

177. Some Explanations:  Too many solutions intent to solve the same problem, driven by self- interest (think about the furious competition in the market)  Well-designed solutions may solve the problem completely (without generating new problems), but only in an ideal world  Badly-designed solutions create more problems (negative value)  There might be more badly-designed solutions than well-designed solutions in the world  There are conflicts, inconsistencies, incompatibilities between solutions, and therefore new problems are generated  Endless cycle, and exponential increase  Unfortunately the complexity itself is an organic structure like the virus that scales, grows, and spreads  Can be explained by the chaos theory (chaos can emerge by a group of individuals interacting with simple rules)

178. Why I Count This As “Half” Philosophy: What we are able to improve (the pragmatic part):  Try to leverage systems thinking to avoid creating “negative value”  Improve interoperability both internally and externally, to reduce the “conflict and generate new problems” phenomenon. The SOA concept can apply to not only the software arena, but also many other areas (e.g. physical products)  Ask the “to design, or not design” question first before you design  Find somewhere else to consume our “surplus of intellect”…   Leave some creativity to the Buddha/God/Brahma/nature/etc., depends on what ever religion you believe…  What we are not able to change (the non-pragmatic part):  Self-interest (companies survive by “solving” solutions)  Never-ending demands of human being  Now we really have a lot of problems to solve (e.g. global warming problem, etc.)

179. “ Plurality should not be posited without necessity. ” Occam's razor William of Ockham

180.

181. “ The man who grasps principles can successfully choose his own methods. The man who tries methods, ignoring principles, is sure to have trouble. ” Ralph Waldo Emerson

182. “ We must first learn a discipline which teaches us the true relationship between ourselves and our surroundings. Then, once this discipline has done its work, we will be ready to give up the discipline, and act as nature does. This is the timeless way of building: learning the discipline - and shedding it. ” Christopher Alexander The Timeless Way of Building