![Big Information Architecture “ 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 ) combining many fields and backgrounds concept management online information strategy enterprise information architecture deliverables: concept maps, storyboards, scenarios, personas, use cases, wireframes, templates, usability tests, styleguides, roadmaps, metrics, etc.](https://image.slidesharecdn.com/peterboersmaaugdesigndocumentationslideshare-1227878448890596-9/75/Design-Documentation-28-2048.jpg)
![What is User Experience? " 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 ) meet the needs of the customer strive for simplicity and elegance produce products that are a joy to own, a joy to use go beyond giving customers what they say they want](https://image.slidesharecdn.com/peterboersmaaugdesigndocumentationslideshare-1227878448890596-9/75/Design-Documentation-37-2048.jpg)
![Big Information Architecture “ 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 ) combining many fields and backgrounds concept management online information strategy enterprise information architecture deliverables: concept maps, storyboards, scenarios, personas, use cases, wireframes, templates, usability tests, styleguides, roadmaps, metrics, etc.](https://crownmelresort.com/image.slidesharecdn.com/peterboersmaaugdesigndocumentationslideshare-1227878448890596-9/75/Design-Documentation-28-2048.jpg)
![What is User Experience? " 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 ) meet the needs of the customer strive for simplicity and elegance produce products that are a joy to own, a joy to use go beyond giving customers what they say they want](https://crownmelresort.com/image.slidesharecdn.com/peterboersmaaugdesigndocumentationslideshare-1227878448890596-9/75/Design-Documentation-37-2048.jpg)
Uploaded byPeter Boersma
Design Documentation
The document is a presentation by Peter Boersma at the Adobe User Group meeting discussing design documentation and the elements of user experience. It outlines his professional background, the importance of information architecture, and various design deliverables in creating user-centered online experiences. The document emphasizes the integration of strategy and design in achieving effective user experiences, using the SNS Bank project as a case study.
More Related Content
![Copy of Presentation - [Your Organization Name]_20250924_181258_0000.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/copyofpresentation-yourorganizationname202509241812580000-251117131601-9744dd2d-thumbnail.jpg?width=640&height=640&fit=bounds)
Design Documentation
- 1. Design Documentation PeterBoersma Adobe User Group Meeting #9, November 26, 2008, Amsterdam, The Netherlands info . nl FULL SERVICE INTERNET AGENCY
- 2. Warning: this isthe only Adobe® logo in the entire presentation
- 3. 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
- 4. (I know whatyou’re thinking)
- 5. Blablbla bla blabla,BLA Blablabla Miami , blabla blablabla bla bla BLA Bla blabla blabla blablabla bla bla blabla blabla blablabla bla blabla blabla user experience blabla
- 6.
- 7.
- 8.
- 9.
- 10. (but in reality,it was more like this)
- 11.
- 12.
- 13.
- 14.
- 15. What was onmy poster?
- 16. What was onmy poster?
- 17. Today, I wantto present to you the same (and more) design deliverables, grouped by Jesse James Garrett’s ‘The Elements of User Experience’
- 18. The Story IIA UX Design deliverables Design evaluation Design process documentation
- 19. Who am I?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 ) and interactive applications (DaVinci Code via MSN)
- 20. Who am I?Before that : 1998-1995: Information Ergonomics, combination of computer science and cognitive ergonomics, at Twente University, Enschede. 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). 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. 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.
- 21. Who am I?I am Director for Local Groups for the Information Architecture Institute I present at and organize conferences (The Web & Beyond, Euro IA, IA Summit) I run the Amsterdam UX Cocktail Hours I blog at http://www.peterboersma.com/blog I am ‘beep’ or ‘pboersma’ in social networks
- 22.
- 23. What is informationarchitecture?
- 24. In the beginning,there was little IA… IA IA
- 25. Little Information Architecture“ 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 ) Library & Information Science (LIS) definition, storage and use indexing, retrieval and search metadata, labeling and display data information knowledge deliverables: content inventories, card sorts, controlled vocabularies, sitemaps.
- 26. … and thenIAs discovered other fields… IA Industrial Design, Visual Design, Information Design, Interaction Design, Usability, Copywriting, Marketing & Communications, Computer Science
- 27. … and triedto redefine IA… Industrial Design, Visual Design, Information Design, Interaction Design, Usability, Copywriting, Marketing & Communications, Computer Science BIG IA
- 28. Big Information Architecture“ 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 ) combining many fields and backgrounds concept management online information strategy enterprise information architecture deliverables: concept maps, storyboards, scenarios, personas, use cases, wireframes, templates, usability tests, styleguides, roadmaps, metrics, etc.
- 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 dobelieve IA is “bigger”… IA other fields
- 31. … because italso includes Business IA IA other fields ROI, organizational impact, selling, managing, process
- 32. Business IA “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 ) requires consultancy skills business insight useful deliverables: business model, ROI calculations, target audience, usage scenarios, workflow, roles, design process, metrics, etc.
- 33. So here ismy T-shaped world view… business IA IA other fields
- 34. But other fieldsare the same IA IxD Usability other fields
- 35. … all ofthem… IA IxD Usab Copy Mar comm InfoD Vis D FE CS
- 36. … and Ibelieve the overlap is… IA IxD Usab Copy Mar comm InfoD Vis D User Experience FE CS
- 37. What is UserExperience? " 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 ) meet the needs of the customer strive for simplicity and elegance produce products that are a joy to own, a joy to use go beyond giving customers what they say they want
- 38. Meet Jesse JamesGarrett…
- 39. Elements of UserExperience
- 40. Layers of deliverables Surface Skeleton Structure Scope Strategy
- 41. The project SNSBank #5 bank in the Netherlands asked Info.nl to design a new online presence Business drivers sell more online and create leads offer service to clients and prospects
- 42. The project startedin July 2006 with winning the pitch, then analysis, scoping and concept design followed by visual design, interaction design and front-end design in 2007 first section (Sparen) live in April 2007 last section (Zakelijk) live in October 2008
- 43. The project averageteam size was 8 people always an account manager, project manager, strategy consultant and creative lead with up to 12 visual, interaction and front-end designers working at the same time
- 44. Layers of deliverables Surface Skeleton Structure Scope Strategy
- 45. Layers of deliverables Strategy
- 46. Strategy User needs- personas Business objectives - competitive analysis - genre - concept map - concept - roadmap
- 47.
- 48.
- 49. Strategy User needs- personas Business objectives - competitive analysis - genre - concept map - concept - roadmap
- 50. SNS Competitive analysisWarning: flashing images! (no pun intended) Competitive Analysis details deleted (was shown at high-speed anyway)
- 51. SNS Visual BenchmarkAsuf Ishaq, Info.nl
- 52. SNS Competitive analysisCompetitive Analysis details deleted (was shown at high-speed anyway)
- 53. Approaches to considerEntertaining 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) 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”) . 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).
- 54.
- 55.
- 56.
- 57.
- 58. Magazine (topic, article,picture, writers, editorial process, subscriptions, advertisements, responses, archive) Shop (products, categories, shopping cart, account, payment methods, delivery address, about, FAQ, trust) Community (topic, discussion, members, moderator, news, background information, pointers, archive) Portal (topic, tools, search, articles, background information, pointers, definitions, editor) Application (functionality, help, accounts, tools, pointers, updates, status, about) Genre
- 59. Genre: Shop asMagazine (1/2)
- 60. Genre: Shop asMagazine (2/2)
- 61. SNS Concept modelgebaseerd op echte motivaties van echte mensen met echte verhalen met interactieve modules om producten te ontdekken en te configureren met informatie over producten en processen voor wie het echt wil weten gericht op de verkoop van relevante producten op transparante wijze 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
- 62.
- 63. Roadmap SNS Roadmapexample replaced (was shown for a few seconds anyway)
- 64. Layers of deliverables Scope
- 65. Elements of UserExperience
- 66. Scope Content Requirements- content inventory Functional Specifications - high-level functionality - general flow charts
- 67.
- 68.
- 69. Elements of UserExperience
- 70. Scope Content Requirements- content inventory Functional Specifications - high-level functionality - general flow charts
- 71. SNS high-level modulespecification
- 72. SNS general flowchartfor forms
- 73. Layers of deliverables Skeleton Structure
- 74. Structure & SkeletonInformation Architecture - concept map - global navigation - screenflow Interaction design - page type descriptions - wireframes
- 75. Elements of UserExperience
- 76.
- 77.
- 78. SNS screenflow (productgroup)
- 79. Screenflow: JFlow (now:Swipr) Semi-functional demo of JFlow (now Swipr) was shown to illustrate interactive screenflow
- 80. Elements of UserExperience
- 81. Structure & SkeletonInformation Architecture - concept map - global navigation - screenflow Interaction design - page type descriptions - wireframes
- 82. SNS Page TypeDescription Elke ProductGroep pagina bevat: Etalage (Life Story & Product of Play), Producten (per Motivatie), Probleemherkenning (advies), Play (ontdekken), Learn, Buy en Actie
- 83. SNS Page TypeDescription 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.
- 85.
- 86. Layers of deliverables Surface
- 87. Surface Visual design- moodboard - visual language - mockups - styleguide
- 88.
- 89. SNS visual styleinput
- 90.
- 91. Hooge Huys visuallanguage
- 92.
- 93.
- 94. Which brand isthis?
- 95.
- 96. Layers of deliverables Surface Skeleton Structure Scope Strategy
- 97.
- 98.
- 99. …via concept model…gebaseerd op echte motivaties van echte mensen met echte verhalen met interactieve modules om producten te ontdekken en te configureren met informatie over producten en processen voor wie het echt wil weten gericht op de verkoop van relevante producten op transparante wijze 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
- 100. Life Play BuyLearn Learn Buy Life (later Buy) … to final design.
- 101. Life Play LifeLife Learn Buy
- 102.
- 103.
- 104. Layers of deliverables Surface Skeleton Structure Scope Strategy
- 105.
- 106.
- 107. … because ofa photographer…
- 108. … because ofa photographer…
- 109.
- 110.
- 111. … or… Welshtext 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.
- 113. Web Analytics ReportOld 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.
- 115.
- 116. Document your deliverablesBrainstorm to get all deliverables Diagram deliverables and process Describe deliverables and input/outputs Present process to other departments Create a better process Create templates for deliverables Write instructions around deliverables and process Create a better process Promote your process Measure working with new deliverables en proces Review ad nauseam , improve continually
- 117. So you havetime…
- 118.
- 119.
- 120. Design Documentation PeterBoersma Adobe User Group Meeting #9, November 26, 2008, Amsterdam, The Netherlands info . nl FULL SERVICE INTERNET AGENCY