Design Documentation Peter Boersma Adobe User Group Meeting #9, November 26, 2008, Amsterdam, The Netherlands info . nl FU...
Warning: this is the only Adobe® logo in the entire presentation
<ul><li>Earlier this year, at the IA Summit in Miami, I presented a poster and SNS Bank deliverables  based on a book abou...
<ul><li>(I know what you’re thinking) </li></ul>
<ul><li>Blablbla bla blabla, BLA Blablabla  Miami , blabla blablabla bla bla BLA Bla blabla blabla </li></ul><ul><li>blabl...
Miami
 
 
 
<ul><li>(but in reality, it was more like this) </li></ul>
 
 
 
The Book
What was on my poster?
What was on my poster?
<ul><li>Today, I want to present to you the same (and more) design deliverables, grouped by Jesse James Garrett’s ‘The Ele...
The Story <ul><li>I </li></ul><ul><li>IA </li></ul><ul><li>UX </li></ul><ul><li>Design deliverables </li></ul><ul><li>Desi...
Who am I? <ul><li>since February 2006: senior Interaction Designer at Info.nl responsible for the concept, the structure a...
Who am I? <ul><li>Before that : </li></ul><ul><li>1998-1995: Information Ergonomics, combination of computer science and c...
Who am I? <ul><li>I am Director for Local Groups for the Information Architecture Institute </li></ul><ul><li>I present at...
Who am I?
What is information architecture?
In the beginning, there was little IA… IA IA
Little Information Architecture <ul><li>“ At one end of the spectrum, the little information architect may focus solely on...
… and then IAs discovered other fields… IA Industrial Design, Visual Design, Information Design, Interaction Design, Usabi...
… and tried to redefine IA… Industrial Design, Visual Design, Information Design, Interaction Design, Usability, Copywriti...
Big Information Architecture <ul><li>“ At the other end [of the spectrum], the Big Information Architect may play the role...
I don’t agree… IA Industrial Design, Visual Design, Information Design, Interaction Design, Usability, Copywriting, Market...
...but I do believe IA is “bigger”… IA other fields
… because it also includes Business IA IA other fields ROI, organizational impact, selling, managing, process
Business IA <ul><li>“ The exercise of designing an information architecture – learning or defining what an organization is...
So here is my T-shaped world view… business IA IA other fields
But other fields are the same IA IxD Usability other fields
… all of them… IA IxD Usab Copy Mar comm InfoD Vis D FE CS
… and I believe the overlap is… IA IxD Usab Copy Mar comm InfoD Vis D User Experience FE CS
What is User Experience? <ul><li>&quot; User Experience encompasses all aspects of the end-user's [online] interaction wit...
Meet Jesse James Garrett…
Elements of User Experience
Layers of  deliverables Surface Skeleton Structure Scope Strategy
The project <ul><li>SNS Bank </li></ul><ul><li>#5 bank in the Netherlands </li></ul><ul><li>asked Info.nl to design a new ...
The project <ul><li>started in July 2006 with winning the pitch, then analysis, scoping and concept design </li></ul><ul><...
The project <ul><li>average team size was 8 people </li></ul><ul><li>always an account manager, project manager, strategy ...
Layers of  deliverables Surface Skeleton Structure Scope Strategy
Layers of  deliverables Strategy
Strategy <ul><li>User needs - personas </li></ul><ul><li>Business objectives -  competitive analysis - genre - concept map...
SNS Persona’s
Vestia Persona’s
Strategy <ul><li>User needs - personas </li></ul><ul><li>Business objectives - competitive analysis - genre - concept map ...
SNS Competitive analysis <ul><li>Warning: flashing images! (no pun intended) </li></ul>Competitive Analysis details delete...
SNS Visual Benchmark Asuf Ishaq, Info.nl
SNS Competitive analysis Competitive Analysis details deleted (was shown at high-speed anyway)
Approaches to consider <ul><li>Entertaining vs. Factual The use of video and humour, making the site lively and entertaini...
Competitive analysis (1/4)
Competitive analysis (2/4)
Competitive analysis (3/4)
Competitive analysis (4/4)
<ul><ul><li>Magazine (topic, article, picture, writers, editorial process, subscriptions, advertisements, responses, archi...
Genre: Shop as Magazine (1/2)
Genre: Shop as Magazine (2/2)
SNS Concept model <ul><ul><li>gebaseerd op echte motivaties van echte mensen met echte verhalen </li></ul></ul><ul><ul><li...
Concept
Roadmap SNS Roadmap example replaced (was shown for a few seconds anyway)
Layers of  deliverables Scope
Elements of User Experience
Scope Content Requirements - content inventory Functional Specifications  - high-level functionality - general flow charts
SNS Content Inventory
AutoTelegraaf Content Inventory
Elements of User Experience
Scope Content Requirements - content inventory Functional Specifications  - high-level functionality - general flow charts
SNS high-level module specification
SNS general flowchart for forms
Layers of  deliverables Skeleton Structure
Structure & Skeleton <ul><li>Information Architecture - concept map - global navigation - screenflow </li></ul><ul><li>Int...
Elements of User Experience
SNS Concept Map
SNS global navigation
SNS screenflow (product group)
Screenflow: JFlow (now: Swipr) <ul><li>Semi-functional demo of JFlow (now Swipr) was shown to illustrate interactive scree...
Elements of User Experience
Structure & Skeleton <ul><li>Information Architecture - concept map - global navigation - screenflow </li></ul><ul><li>Int...
SNS Page Type Description <ul><li>Elke ProductGroep pagina bevat: Etalage (Life Story & Product of Play), Producten (per M...
SNS Page Type Description Diagram ProductGroup1 | ProductGroup2 |  ProductGroup3  | ProductGroup4 | ProductGroup5 | Busine...
SNS wireframe
SNS wireframes
Layers of  deliverables Surface
Surface <ul><li>Visual design - moodboard - visual language - mockups - styleguide </li></ul>
Moodboard for…?
SNS visual style input
SNS visual language
Hooge Huys visual language
Hooge Huys mockup
SNS mockup
Which brand is this?
Google’s styleguide
Layers of  deliverables Surface Skeleton Structure Scope Strategy
Integrate…
From Persona…
…via concept model… <ul><ul><li>gebaseerd op echte motivaties van echte mensen met echte verhalen </li></ul></ul><ul><ul><...
Life Play Buy Learn Learn Buy Life (later Buy) … to final design.
Life Play Life Life Learn Buy
Play Learn Buy Buy
Buy Buy Buy
Layers of  deliverables Surface Skeleton Structure Scope Strategy
… and test
Because of Murphy…
… because of a photographer…
… because of a photographer…
… or…
… or…
… or… Welsh text reads something like “I am out of Office, send sample to be translated. Will look at it later” Translated...
And it works!
Web Analytics Report Old online form - 1 step to fill out - 1 step to print - 1 thank-you page New online form - 1 step fo...
Document your process!
Document your deliverables!
Document your deliverables <ul><li>Brainstorm to get all deliverables </li></ul><ul><li>Diagram deliverables and process <...
So you have time…
 
 
Design Documentation Peter Boersma Adobe User Group Meeting #9, November 26, 2008, Amsterdam, The Netherlands info . nl FU...
Upcoming SlideShare
Loading in...5
×

Design Documentation

12,728

Published on

Presentation for Adobe User group Netherlands about Design Documentation for larger, interactive systems.

<b>Download available from: http://www.peterboersma.com/blog/2008/11/design-documentation-presentation-at.html</b>

Published in: Design, Technology, Business
4 Comments
89 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,728
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
4
Likes
89
Embeds 0
No embeds

No notes for slide
  • Design Documentation

    1. 1. Design Documentation Peter Boersma Adobe User Group Meeting #9, November 26, 2008, Amsterdam, The Netherlands info . nl FULL SERVICE INTERNET AGENCY
    2. 2. Warning: this is the only Adobe® logo in the entire presentation
    3. 3. <ul><li>Earlier this year, at the IA Summit in Miami, I presented a poster and SNS Bank deliverables based on a book about design documentation to user experience practitioners </li></ul>
    4. 4. <ul><li>(I know what you’re thinking) </li></ul>
    5. 5. <ul><li>Blablbla bla blabla, BLA Blablabla Miami , blabla blablabla bla bla BLA Bla blabla blabla </li></ul><ul><li>blablabla bla bla blabla blabla blablabla bla blabla blabla user experience blabla </li></ul>
    6. 6. Miami
    7. 10. <ul><li>(but in reality, it was more like this) </li></ul>
    8. 14. The Book
    9. 15. What was on my poster?
    10. 16. What was on my poster?
    11. 17. <ul><li>Today, I want to present to you the same (and more) design deliverables, grouped by Jesse James Garrett’s ‘The Elements of User Experience’ </li></ul>
    12. 18. The Story <ul><li>I </li></ul><ul><li>IA </li></ul><ul><li>UX </li></ul><ul><li>Design deliverables </li></ul><ul><li>Design evaluation </li></ul><ul><li>Design process documentation </li></ul>
    13. 19. Who am I? <ul><li>since February 2006: senior Interaction Designer at Info.nl responsible for the concept, the structure and interaction design of complex (financial) websites (SNS Bank, Delta Lloyd, Robeco, Kluwer, ReedBusiness, Vestia, ASN ) </li></ul><ul><li>and interactive applications (DaVinci Code via MSN) </li></ul>
    14. 20. Who am I? <ul><li>Before that : </li></ul><ul><li>1998-1995: Information Ergonomics, combination of computer science and cognitive ergonomics, at Twente University, Enschede. </li></ul><ul><li>1995-2002: User interface designer, project manager, consultant User Understanding and concept designer at General Design (since 2000: Satama Interactive) in Amsterdam. Many interactive websites, some mobiele applications, intranets, extranets, for banks (ABN AMRO), government (VenW, SVB), startups (Airmiles) and established companies (Audi, VEH), partly in Finland (Nokia). </li></ul><ul><li>2002-2005: Senior Information Architect at EzGov, a company that builds transactional online applications based on its own software platform. Many tax-related sites for the British government, and several for the Jamaican government. </li></ul><ul><li>2005-2006: Managing Partner and Consultant User Experience for the user experience collective User Intelligence. Projects for Delta Lloyd, Port of Rotterdam, Transavia.com, Ireland’s Yellow Pages and Elsevier Science. </li></ul>
    15. 21. Who am I? <ul><li>I am Director for Local Groups for the Information Architecture Institute </li></ul><ul><li>I present at and organize conferences (The Web & Beyond, Euro IA, IA Summit) </li></ul><ul><li>I run the Amsterdam UX Cocktail Hours </li></ul><ul><li>I blog at http://www.peterboersma.com/blog </li></ul><ul><li>I am ‘beep’ or ‘pboersma’ in social networks </li></ul>
    16. 22. Who am I?
    17. 23. What is information architecture?
    18. 24. In the beginning, there was little IA… IA IA
    19. 25. Little Information Architecture <ul><li>“ At one end of the spectrum, the little information architect may focus solely on bottom-up tasks, such as the definition of metadata fields and controlled vocabularies. ” (Peter Morville, Big Architect, Little Architect , http://argus-acia.com/strange_connections/strange004.html ) </li></ul><ul><li>Library & Information Science (LIS) </li></ul><ul><li>definition, storage and use </li></ul><ul><li>indexing, retrieval and search </li></ul><ul><li>metadata, labeling and display </li></ul><ul><li>data  information  knowledge </li></ul><ul><li>deliverables: content inventories, card sorts, controlled vocabularies, sitemaps. </li></ul>
    20. 26. … and then IAs discovered other fields… IA Industrial Design, Visual Design, Information Design, Interaction Design, Usability, Copywriting, Marketing & Communications, Computer Science
    21. 27. … and tried to redefine IA… Industrial Design, Visual Design, Information Design, Interaction Design, Usability, Copywriting, Marketing & Communications, Computer Science BIG IA
    22. 28. Big Information Architecture <ul><li>“ At the other end [of the spectrum], the Big Information Architect may play the role of ‘an orchestra conductor or film director, conceiving a vision and moving the team forward’ ” (Peter Morville, Big Architect, Little Architect , http://argus-acia.com/strange_connections/strange004.html ) </li></ul><ul><li>combining many fields and backgrounds </li></ul><ul><li>concept management </li></ul><ul><li>online information strategy </li></ul><ul><li>enterprise information architecture </li></ul><ul><li>deliverables: concept maps, storyboards, scenarios, personas, use cases, wireframes, templates, usability tests, styleguides, roadmaps, metrics, etc. </li></ul>
    23. 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
    24. 30. ...but I do believe IA is “bigger”… IA other fields
    25. 31. … because it also includes Business IA IA other fields ROI, organizational impact, selling, managing, process
    26. 32. Business IA <ul><li>“ The exercise of designing an information architecture – learning or defining what an organization is, what it wants to communicate and to whom, and what its business model is – is ultimately about strategy. ” (Lou Rosenfeld, The Tail Wags The Dog, http://www.ddj.com/documents/s=3257/nam1012432633/index.html ) </li></ul><ul><li>requires consultancy skills </li></ul><ul><li>business insight useful </li></ul><ul><li>deliverables: business model, ROI calculations, target audience, usage scenarios, workflow, roles, design process, metrics, etc. </li></ul>
    27. 33. So here is my T-shaped world view… business IA IA other fields
    28. 34. But other fields are the same IA IxD Usability other fields
    29. 35. … all of them… IA IxD Usab Copy Mar comm InfoD Vis D FE CS
    30. 36. … and I believe the overlap is… IA IxD Usab Copy Mar comm InfoD Vis D User Experience FE CS
    31. 37. What is User Experience? <ul><li>&quot; User Experience encompasses all aspects of the end-user's [online] interaction with the company, its services, and its products. ” (Nielsen Norman Group, User Experience – Our definition, http:// www.nngroup.com/about/userexperience.html ) </li></ul><ul><li>meet the needs of the customer </li></ul><ul><li>strive for simplicity and elegance </li></ul><ul><li>produce products that are a joy to own, a joy to use </li></ul><ul><li>go beyond giving customers what they say they want </li></ul>
    32. 38. Meet Jesse James Garrett…
    33. 39. Elements of User Experience
    34. 40. Layers of deliverables Surface Skeleton Structure Scope Strategy
    35. 41. The project <ul><li>SNS Bank </li></ul><ul><li>#5 bank in the Netherlands </li></ul><ul><li>asked Info.nl to design a new online presence </li></ul><ul><li>Business drivers </li></ul><ul><li>sell more online and create leads </li></ul><ul><li>offer service to clients and prospects </li></ul>
    36. 42. The project <ul><li>started in July 2006 with winning the pitch, then analysis, scoping and concept design </li></ul><ul><li>followed by visual design, interaction design and front-end design in 2007 </li></ul><ul><li>first section (Sparen) live in April 2007 last section (Zakelijk) live in October 2008 </li></ul>
    37. 43. The project <ul><li>average team size was 8 people </li></ul><ul><li>always an account manager, project manager, strategy consultant and creative lead </li></ul><ul><li>with up to 12 visual, interaction and front-end designers working at the same time </li></ul>
    38. 44. Layers of deliverables Surface Skeleton Structure Scope Strategy
    39. 45. Layers of deliverables Strategy
    40. 46. Strategy <ul><li>User needs - personas </li></ul><ul><li>Business objectives - competitive analysis - genre - concept map - concept - roadmap </li></ul>
    41. 47. SNS Persona’s
    42. 48. Vestia Persona’s
    43. 49. Strategy <ul><li>User needs - personas </li></ul><ul><li>Business objectives - competitive analysis - genre - concept map - concept - roadmap </li></ul>
    44. 50. SNS Competitive analysis <ul><li>Warning: flashing images! (no pun intended) </li></ul>Competitive Analysis details deleted (was shown at high-speed anyway)
    45. 51. SNS Visual Benchmark Asuf Ishaq, Info.nl
    46. 52. SNS Competitive analysis Competitive Analysis details deleted (was shown at high-speed anyway)
    47. 53. Approaches to consider <ul><li>Entertaining vs. Factual The use of video and humour, making the site lively and entertaining seem to be popular ways to present all kinds of products (Rabobank Hypotheken, Kijkshop, KPN) Some sites stick to factual or instructional presentations (Rabobank Proof, Postbank) </li></ul><ul><li>Clean vs. Engaging Both organized & focussed (Rabobank, IKEA) as well as stimulating & challenging (Kijkshop) appoaches are seen. Most sites try make the user actions explicit (“Kijk nu welke hypotheek bij u past”, “Bereken n ú uw premie”, “Nu doen”) . </li></ul><ul><li>Focus vs. Overview Most sites seem to limit the number of products featured initially, and dedicate lots of real-estate to present them (HEMA, IKEA, KPN). Only on subsequent pages room is created for overviews of more products (IKEA). </li></ul>
    48. 54. Competitive analysis (1/4)
    49. 55. Competitive analysis (2/4)
    50. 56. Competitive analysis (3/4)
    51. 57. Competitive analysis (4/4)
    52. 58. <ul><ul><li>Magazine (topic, article, picture, writers, editorial process, subscriptions, advertisements, responses, archive) </li></ul></ul><ul><ul><li>Shop (products, categories, shopping cart, account, payment methods, delivery address, about, FAQ, trust) </li></ul></ul><ul><ul><li>Community (topic, discussion, members, moderator, news, background information, pointers, archive) </li></ul></ul><ul><ul><li>Portal (topic, tools, search, articles, background information, pointers, definitions, editor) </li></ul></ul><ul><ul><li>Application (functionality, help, accounts, tools, pointers, updates, status, about) </li></ul></ul>Genre
    53. 59. Genre: Shop as Magazine (1/2)
    54. 60. Genre: Shop as Magazine (2/2)
    55. 61. SNS Concept model <ul><ul><li>gebaseerd op echte motivaties van echte mensen met echte verhalen </li></ul></ul><ul><ul><li>met interactieve modules om producten te ontdekken en te configureren </li></ul></ul><ul><ul><li>met informatie over producten en processen voor wie het echt wil weten </li></ul></ul><ul><ul><li>gericht op de verkoop van relevante producten op transparante wijze </li></ul></ul>SNSbank.nl is de persoonlijke retail bank met semi-confectie producten en diensten die je, met of zonder adviseur, kunt kopen Learn Play Buy Life Learn Play Buy Life
    56. 62. Concept
    57. 63. Roadmap SNS Roadmap example replaced (was shown for a few seconds anyway)
    58. 64. Layers of deliverables Scope
    59. 65. Elements of User Experience
    60. 66. Scope Content Requirements - content inventory Functional Specifications - high-level functionality - general flow charts
    61. 67. SNS Content Inventory
    62. 68. AutoTelegraaf Content Inventory
    63. 69. Elements of User Experience
    64. 70. Scope Content Requirements - content inventory Functional Specifications - high-level functionality - general flow charts
    65. 71. SNS high-level module specification
    66. 72. SNS general flowchart for forms
    67. 73. Layers of deliverables Skeleton Structure
    68. 74. Structure & Skeleton <ul><li>Information Architecture - concept map - global navigation - screenflow </li></ul><ul><li>Interaction design - page type descriptions - wireframes </li></ul>
    69. 75. Elements of User Experience
    70. 76. SNS Concept Map
    71. 77. SNS global navigation
    72. 78. SNS screenflow (product group)
    73. 79. Screenflow: JFlow (now: Swipr) <ul><li>Semi-functional demo of JFlow (now Swipr) was shown to illustrate interactive screenflow </li></ul>
    74. 80. Elements of User Experience
    75. 81. Structure & Skeleton <ul><li>Information Architecture - concept map - global navigation - screenflow </li></ul><ul><li>Interaction design - page type descriptions - wireframes </li></ul>
    76. 82. SNS Page Type Description <ul><li>Elke ProductGroep pagina bevat: Etalage (Life Story & Product of Play), Producten (per Motivatie), Probleemherkenning (advies), Play (ontdekken), Learn, Buy en Actie </li></ul>
    77. 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
    78. 84. SNS wireframe
    79. 85. SNS wireframes
    80. 86. Layers of deliverables Surface
    81. 87. Surface <ul><li>Visual design - moodboard - visual language - mockups - styleguide </li></ul>
    82. 88. Moodboard for…?
    83. 89. SNS visual style input
    84. 90. SNS visual language
    85. 91. Hooge Huys visual language
    86. 92. Hooge Huys mockup
    87. 93. SNS mockup
    88. 94. Which brand is this?
    89. 95. Google’s styleguide
    90. 96. Layers of deliverables Surface Skeleton Structure Scope Strategy
    91. 97. Integrate…
    92. 98. From Persona…
    93. 99. …via concept model… <ul><ul><li>gebaseerd op echte motivaties van echte mensen met echte verhalen </li></ul></ul><ul><ul><li>met interactieve modules om producten te ontdekken en te configureren </li></ul></ul><ul><ul><li>met informatie over producten en processen voor wie het echt wil weten </li></ul></ul><ul><ul><li>gericht op de verkoop van relevante producten op transparante wijze </li></ul></ul>SNSbank.nl is de persoonlijke retail bank met semi-confectie producten en diensten die je, met of zonder adviseur, kunt kopen Learn Play Buy Life Learn Play Buy Life
    94. 100. Life Play Buy Learn Learn Buy Life (later Buy) … to final design.
    95. 101. Life Play Life Life Learn Buy
    96. 102. Play Learn Buy Buy
    97. 103. Buy Buy Buy
    98. 104. Layers of deliverables Surface Skeleton Structure Scope Strategy
    99. 105. … and test
    100. 106. Because of Murphy…
    101. 107. … because of a photographer…
    102. 108. … because of a photographer…
    103. 109. … or…
    104. 110. … or…
    105. 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…
    106. 112. And it works!
    107. 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
    108. 114. Document your process!
    109. 115. Document your deliverables!
    110. 116. Document your deliverables <ul><li>Brainstorm to get all deliverables </li></ul><ul><li>Diagram deliverables and process </li></ul><ul><li>Describe deliverables and input/outputs </li></ul><ul><li>Present process to other departments </li></ul><ul><li>Create a better process </li></ul><ul><li>Create templates for deliverables </li></ul><ul><li>Write instructions around deliverables and process </li></ul><ul><li>Create a better process </li></ul><ul><li>Promote your process </li></ul><ul><li>Measure working with new deliverables en proces </li></ul><ul><li>Review ad nauseam , improve continually </li></ul>
    111. 117. So you have time…
    112. 120. Design Documentation Peter Boersma Adobe User Group Meeting #9, November 26, 2008, Amsterdam, The Netherlands info . nl FULL SERVICE INTERNET AGENCY

    ×