1. Design Documentation Peter Boersma Adobe User Group Meeting #9, November 26, 2008, Amsterdam, The Netherlands info . nl FULL SERVICE INTERNET AGENCY

2. Warning: this is the only Adobe® logo in the entire presentation

6. Miami

14. The Book

15. What was on my poster?

16. What was on my poster?

22. Who am I?

23. What is information architecture?

24. In the beginning, there was little IA… IA IA

26. … and then IAs discovered other fields… IA Industrial Design, Visual Design, Information Design, Interaction Design, Usability, Copywriting, Marketing & Communications, Computer Science

27. … and tried to redefine IA… Industrial Design, Visual Design, Information Design, Interaction Design, Usability, Copywriting, Marketing & Communications, Computer Science BIG IA

29. I don’t agree… IA Industrial Design, Visual Design, Information Design, Interaction Design, Usability, Copywriting, Marketing & Communications, Computer Science Industrial Design, Visual Design, Information Design, Interaction Design, Usability, Copywriting, Marketing & Communications, Computer Science

30. ...but I do believe IA is “bigger”… IA other fields

31. … because it also includes Business IA IA other fields ROI, organizational impact, selling, managing, process

33. So here is my T-shaped world view… business IA IA other fields

34. But other fields are the same IA IxD Usability other fields

35. … all of them… IA IxD Usab Copy Mar comm InfoD Vis D FE CS

36. … and I believe the overlap is… IA IxD Usab Copy Mar comm InfoD Vis D User Experience FE CS

38. Meet Jesse James Garrett…

39. Elements of User Experience

40. Layers of deliverables Surface Skeleton Structure Scope Strategy

44. Layers of deliverables Surface Skeleton Structure Scope Strategy

45. Layers of deliverables Strategy

47. SNS Persona’s

48. Vestia Persona’s

51. SNS Visual Benchmark Asuf Ishaq, Info.nl

52. SNS Competitive analysis Competitive Analysis details deleted (was shown at high-speed anyway)

54. Competitive analysis (1/4)

55. Competitive analysis (2/4)

56. Competitive analysis (3/4)

57. Competitive analysis (4/4)

59. Genre: Shop as Magazine (1/2)

60. Genre: Shop as Magazine (2/2)

62. Concept

63. Roadmap SNS Roadmap example replaced (was shown for a few seconds anyway)

64. Layers of deliverables Scope

65. Elements of User Experience

66. Scope Content Requirements - content inventory Functional Specifications - high-level functionality - general flow charts

67. SNS Content Inventory

68. AutoTelegraaf Content Inventory

69. Elements of User Experience

70. Scope Content Requirements - content inventory Functional Specifications - high-level functionality - general flow charts

71. SNS high-level module specification

72. SNS general flowchart for forms

73. Layers of deliverables Skeleton Structure

75. Elements of User Experience

76. SNS Concept Map

77. SNS global navigation

78. SNS screenflow (product group)

80. Elements of User Experience

83. SNS Page Type Description Diagram ProductGroup1 | ProductGroup2 | ProductGroup3 | ProductGroup4 | ProductGroup5 | Businesses | Service Spotlight - Life Story / Product combination - Sometimes ProblemRecognition or Play - Occasionally Learn Motivation - Products with USPs and Life Stories Motivation - Products with USPs and Life Stories Motivation - Products with USPs and Life Stories Motivation - Products with USPs and Life Stories Learn - product/process info - general Q&A Buy - advice - other contact options Offer - Product specific Buy, Play or Learn

84. SNS wireframe

85. SNS wireframes

86. Layers of deliverables Surface

88. Moodboard for…?

89. SNS visual style input

90. SNS visual language

91. Hooge Huys visual language

92. Hooge Huys mockup

93. SNS mockup

94. Which brand is this?

95. Google’s styleguide

96. Layers of deliverables Surface Skeleton Structure Scope Strategy

97. Integrate…

98. From Persona…

100. Life Play Buy Learn Learn Buy Life (later Buy) … to final design.

101. Life Play Life Life Learn Buy

102. Play Learn Buy Buy

103. Buy Buy Buy

104. Layers of deliverables Surface Skeleton Structure Scope Strategy

105. … and test

106. Because of Murphy…

107. … because of a photographer…

108. … because of a photographer…

109. … or…

110. … or…

111. … or… Welsh text reads something like “I am out of Office, send sample to be translated. Will look at it later” Translated text was placed on large billboard, but automatic translator was broken…

112. And it works!

113. Web Analytics Report Old online form - 1 step to fill out - 1 step to print - 1 thank-you page New online form - 1 step for customer Y/N - 4 steps to fill out the form - 1 step to print - 1 thank-you page 7.7% 20.3% New online form: - after step 1 - for existing customers (and new customers) 31.6% (24.4%) conversion rate conversion rate conversion rate

114. Document your process!

115. Document your deliverables!

117. So you have time…

120. Design Documentation Peter Boersma Adobe User Group Meeting #9, November 26, 2008, Amsterdam, The Netherlands info . nl FULL SERVICE INTERNET AGENCY