Your SlideShare is downloading. ×
0
Designingfor the ScatteredStructures of Exploding Websites<br />Iskander SmitPeter Boersma<br />Euro IA 2009 - Copenhagen<...
A short history ofExploding Websites<br />
Model of Virtual Warmth<br />an online dialogue on the road to result<br />The contextinfluences the route<br />A product ...
 we live in a scattered environment<br />
social exhibitionisme<br />a custom digital life<br />  our behavior is changed<br />pull back in our own social world<br ...
 the context models our world<br />
attention<br />use<br />apply<br />orientation<br />inside<br />website<br />outside<br />website<br />Looking for the tou...
use<br />apply<br />orientation<br />attention<br />inside<br />website<br />outside<br />website<br />Looking for the tou...
“In the future websites will offer moveable services, which can be placed on everywhere the customer wishes.” Steve Rubel<...
 model exploding website<br />
  mobile site<br />  exploding function<br />
 we live with our heads   in the cloud<br />
Tim O’Reilly<br />Devices will all have sensors. <br />In the end it is about the services you create using these sensors....
create a system<br />
manage the ecosystem<br />attract<br />engage<br />convert<br />retain<br />
StrategiesforExploding Websites<br />
new strategies<br />David Armano, 2008<br />
brand promise<br />1<br />customer experience<br />match<br />exploding strategy<br />
1<br />match<br />exploding strategy<br />2<br />engage<br />value<br />benefits<br />offer<br />product<br />promise<br />
1<br />match<br />exploding strategy<br />2<br />engage<br />3<br />connect<br />context<br />scenarios<br />devices<br />...
1<br />match<br />exploding strategy<br />2<br />engage<br />4<br />script<br />3<br />connect<br />programme<br />plan<br...
1<br />match<br />exploding strategy<br />5<br />measure<br />2<br />targets<br />engage<br />kpi<br />4<br />script<br />...
partners<br />6<br />employees<br />1<br />orchestrate<br />match<br />organisation<br />exploding strategy<br />5<br />me...
improve<br />continuous<br />development<br />learn<br />7<br />spread<br />6<br />1<br />orchestrate<br />match<br />expl...
exploding elements<br />affiliate contracts<br />improve<br />continuous<br />development<br />idealab<br />organisation m...
DesigningExploding Websites<br />
DesigningExploding Websites<br />Design Process (drafts)<br />What’s Different?<br />Tools<br />
Design ProcessforExploding Websites<br />
Draft 1: Wabi-sabi<br />
Wabi-sabi<br />“wabi”: limitations in design and unpredictable or changing usage conditions“sabi”: imperfect reliability o...
Wabi-sabifordesigningExploding Websites<br />
Draft 2: Rugby ball<br />
Draft 3: Concept Map<br />
(ahem)<br />
Model users<br />Select valuablebehaviour to support<br />
Specifyoutcomesthat match users’ goals<br />Writescenarios and scripts,and direct yourscenes<br />
Design adaptivecomponents<br />
Profiles<br />Contexts<br />Touchpoints<br />
What’s different?<br />
Multiple Touchpoints<br />Know the users’ attitude towards touchpoints perform user research into behaviour and expectati...
    Multiple Contexts-of-Use<br />Consider user flow, attention, and social context design variants in interaction style ...
Context-rich Profiles<br />Each context-of-use calls for additional attributes to be added to the visitor&apos;s profile ...
ToolsfordesigningExploding Websites<br />
           Context-rich Profiles<br />           Multiple Contexts-of-Use<br />            Multiple Touchpoints<br />
    Web Analytics to quantify current user behaviour and discover opportunities for improvement<br />
Analysis of a funnel<br /> To hire XX people, we need Ytimes more registrants for the game (assuming we increase registra...
    Create swimlanes (from workflow and service design practice) to document potential flows through multiple touchpoints<...
    For quick ideas about vocabulary and attitudes, use Wordle (http://wordle.net)on user interview transcripts<br />
Whenlookingforcorporateinformation<br />Whencompetingwithothers<br />Whenconsideringjoining a company<br />
    Create concept maps and scenariosto explore all relationships between the objects that users encounter<br />
Multiple-touchpointscenarios<br />After a visitbySales, the clientreceivesanemail with a confirmation (1), asking her to v...
Scenario 1: First login<br />1<br />4<br />2<br />5<br />3<br />desktopwidget<br />6<br />7<br />Email fromSalestriggersfi...
    Specify interactive components that employ adaptive interfaces<br />
    Create personas based on motivation, (not market segments) and remember different contexts trigger different behaviour...
reuse an existing profile on a social network site(e.g.  Ning, Facebook Connect)<br />base profile on explicitly stated in...
Cases withExploding Websites<br />
Case 1: Association of Public Libraries<br />The Dutch Association of Public Libraries (VOB)<br /><ul><li>centrally contro...
with strong independent units
responsible for the quality of (online) service</li></li></ul><li>Case 1: Association of Public Libraries<br />central, lo...
Case 1: Association of Public Libraries<br />Strategy<br /><ul><li>bottom-up cooperation
development of component-based tools
(not a top-down CMS and styleguide)</li></li></ul><li>Case 1: Association of Public Libraries<br />Design <br /><ul><li>pe...
sketches and storyboards(allowed for informal co-operation with the client teams)
rule-based designs for components(not just entire screens)
a high level design of a central site and local sites(all composed of widgets and modules)</li></li></ul><li>
Case 1: Association of Public Libraries<br />Results <br /><ul><li>designs for a library of widgets
on users’ personalized portals
on users’ social network sites
widgets have social elements
Upcoming SlideShare
Loading in...5
×

Designing Exploding Websites (Euro IA 2009)

6,811

Published on

More and more, online information is scattered over multiple online channels and websites.
At Info.nl, we have translated this development into our model of the Exploding Website. The model describes what strategic steps you need to take to define the right part of the service in the right context. We also redefined our methodology for user experience design based on the vision of the Exploding Website.

Published in: Design, Spiritual
0 Comments
52 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,811
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
160
Comments
0
Likes
52
Embeds 0
No embeds

No notes for slide

Transcript of "Designing Exploding Websites (Euro IA 2009)"

  1. 1. Designingfor the ScatteredStructures of Exploding Websites<br />Iskander SmitPeter Boersma<br />Euro IA 2009 - Copenhagen<br />info.nl<br /> FULL SERVICE INTERNET AGENCY <br />
  2. 2.
  3. 3.
  4. 4.
  5. 5. A short history ofExploding Websites<br />
  6. 6. Model of Virtual Warmth<br />an online dialogue on the road to result<br />The contextinfluences the route<br />A product taillored<br />(Pro-active) support<br />The whole is a rich experience<br />
  7. 7. we live in a scattered environment<br />
  8. 8. social exhibitionisme<br />a custom digital life<br /> our behavior is changed<br />pull back in our own social world<br />a continuous conversation<br />continuous partial attention<br />
  9. 9. the context models our world<br />
  10. 10. attention<br />use<br />apply<br />orientation<br />inside<br />website<br />outside<br />website<br />Looking for the touchpoints<br />
  11. 11. use<br />apply<br />orientation<br />attention<br />inside<br />website<br />outside<br />website<br />Looking for the touchpoints<br />
  12. 12. “In the future websites will offer moveable services, which can be placed on everywhere the customer wishes.” Steve Rubel<br />
  13. 13. model exploding website<br />
  14. 14. mobile site<br /> exploding function<br />
  15. 15. we live with our heads in the cloud<br />
  16. 16. Tim O’Reilly<br />Devices will all have sensors. <br />In the end it is about the services you create using these sensors.<br />
  17. 17. create a system<br />
  18. 18. manage the ecosystem<br />attract<br />engage<br />convert<br />retain<br />
  19. 19. StrategiesforExploding Websites<br />
  20. 20. new strategies<br />David Armano, 2008<br />
  21. 21. brand promise<br />1<br />customer experience<br />match<br />exploding strategy<br />
  22. 22. 1<br />match<br />exploding strategy<br />2<br />engage<br />value<br />benefits<br />offer<br />product<br />promise<br />
  23. 23. 1<br />match<br />exploding strategy<br />2<br />engage<br />3<br />connect<br />context<br />scenarios<br />devices<br />touchpoints<br />
  24. 24. 1<br />match<br />exploding strategy<br />2<br />engage<br />4<br />script<br />3<br />connect<br />programme<br />plan<br />architecture<br />
  25. 25. 1<br />match<br />exploding strategy<br />5<br />measure<br />2<br />targets<br />engage<br />kpi<br />4<br />script<br />3<br />metrics<br />connect<br />
  26. 26. partners<br />6<br />employees<br />1<br />orchestrate<br />match<br />organisation<br />exploding strategy<br />5<br />measure<br />2<br />engage<br />4<br />script<br />3<br />connect<br />
  27. 27. improve<br />continuous<br />development<br />learn<br />7<br />spread<br />6<br />1<br />orchestrate<br />match<br />exploding strategy<br />5<br />measure<br />2<br />engage<br />4<br />script<br />3<br />connect<br />
  28. 28. exploding elements<br />affiliate contracts<br />improve<br />continuous<br />development<br />idealab<br />organisation mapping<br />learn<br />customer palette<br />function profiles<br />7<br />spread<br />brand promise<br />partners<br />6<br />employees<br />1<br />customer experience<br />orchestrate<br />match<br />organisation<br />exploding strategy<br />5<br />measure<br />stakeholder radar<br />2<br />engage<br />targets<br />value<br />product promise proposition<br />kpi<br />benefits<br />dashboard<br />4<br />metrics<br />script<br />offer<br />3<br />reports<br />product<br />promise<br />connect<br />programme<br />context<br />plan<br />scenarios<br />devices<br />hotspot <br />audit<br />programme plan<br />architecture<br />touchpoints<br />interactive tubemap<br />exploding architecture<br />
  29. 29. DesigningExploding Websites<br />
  30. 30. DesigningExploding Websites<br />Design Process (drafts)<br />What’s Different?<br />Tools<br />
  31. 31. Design ProcessforExploding Websites<br />
  32. 32. Draft 1: Wabi-sabi<br />
  33. 33. Wabi-sabi<br />“wabi”: limitations in design and unpredictable or changing usage conditions“sabi”: imperfect reliability or limited mortality (comparable to rust)<br />
  34. 34.
  35. 35.
  36. 36. Wabi-sabifordesigningExploding Websites<br />
  37. 37. Draft 2: Rugby ball<br />
  38. 38.
  39. 39.
  40. 40. Draft 3: Concept Map<br />
  41. 41.
  42. 42.
  43. 43. (ahem)<br />
  44. 44.
  45. 45. Model users<br />Select valuablebehaviour to support<br />
  46. 46. Specifyoutcomesthat match users’ goals<br />Writescenarios and scripts,and direct yourscenes<br />
  47. 47. Design adaptivecomponents<br />
  48. 48. Profiles<br />Contexts<br />Touchpoints<br />
  49. 49. What’s different?<br />
  50. 50. Multiple Touchpoints<br />Know the users’ attitude towards touchpoints perform user research into behaviour and expectations<br />The wide range of touchpoints means a wide target group model more personas and their touchpoint preferences<br />You need an optimal mix of touchpoints and functionalities develop use scenarios that are valuable for both business and customer<br />
  51. 51. Multiple Contexts-of-Use<br />Consider user flow, attention, and social context design variants in interaction style andtone-of-voice<br />Some touchpoints allow for the inclusion of social features define the effects on the social context<br />
  52. 52. Context-rich Profiles<br />Each context-of-use calls for additional attributes to be added to the visitor&apos;s profile track which touchpoints have been used when, for which functionality, and how<br />Knowledgeaboutusersallowsyour designs to adapt create interfaces thatadapttheirbehaviourbasedon data from user profiles<br />
  53. 53. ToolsfordesigningExploding Websites<br />
  54. 54. Context-rich Profiles<br /> Multiple Contexts-of-Use<br /> Multiple Touchpoints<br />
  55. 55. Web Analytics to quantify current user behaviour and discover opportunities for improvement<br />
  56. 56. Analysis of a funnel<br /> To hire XX people, we need Ytimes more registrants for the game (assuming we increase registration-to-play rate to 75%)<br />xxxxx<br />xxxxx<br />xxxx<br />75%<br />xx<br />xxxx<br />xx<br />x<br />66,7%<br />0,09%<br />25%<br />x<br />register for game<br />play game<br />finish game<br />hire<br />
  57. 57. Create swimlanes (from workflow and service design practice) to document potential flows through multiple touchpoints<br />
  58. 58.
  59. 59.
  60. 60. For quick ideas about vocabulary and attitudes, use Wordle (http://wordle.net)on user interview transcripts<br />
  61. 61. Whenlookingforcorporateinformation<br />Whencompetingwithothers<br />Whenconsideringjoining a company<br />
  62. 62. Create concept maps and scenariosto explore all relationships between the objects that users encounter<br />
  63. 63.
  64. 64. Multiple-touchpointscenarios<br />After a visitbySales, the clientreceivesanemail with a confirmation (1), asking her to visit the portal to complete her contact data (2-4). Shealsochecks her order and downloads a copy of the invoice (6-7).<br />Ed dignissimfelis non orcilaoreet sit ametullamcorperligulapulvinar.<br />Nullafringillaeuismoderos, rutrumfacilisis nisi consequat.<br />Nam sednequevelpurusgravidapellentesqueutsedurna.<br />Maecenas nisi massa, fringillased tempus ac, suscipit at nibh.<br />
  65. 65. Scenario 1: First login<br />1<br />4<br />2<br />5<br />3<br />desktopwidget<br />6<br />7<br />Email fromSalestriggersfirstvisit<br />Clientcreates new password uponfirst login.<br />Onfirstvisit, client is asked to confirmclient data.<br />Then taken to homepage. Likely to check order.<br />Overview of order confirmationswithoption to download.<br />Touchpoint selection(1=email, 2-7 = web, rest=widget) <br />
  66. 66. Specify interactive components that employ adaptive interfaces<br />
  67. 67.
  68. 68.
  69. 69.
  70. 70.
  71. 71.
  72. 72.
  73. 73.
  74. 74. Create personas based on motivation, (not market segments) and remember different contexts trigger different behaviours<br />
  75. 75.
  76. 76. reuse an existing profile on a social network site(e.g. Ning, Facebook Connect)<br />base profile on explicitly stated interests(e.g. for e-commerce sites)<br />use the profile of the content to enrich user profiles (e.g. using metadata for targeted bannering)<br />collect behaviour over several touchpoints(e.g. Facebook Beacon, and a profile-sharing program proposed by CMS producer «GX»)<br />enrich profiles with data from profiles of friends(e.g. Hyves, Facebook)<br />
  77. 77.
  78. 78. Cases withExploding Websites<br />
  79. 79. Case 1: Association of Public Libraries<br />The Dutch Association of Public Libraries (VOB)<br /><ul><li>centrally controlled organization
  80. 80. with strong independent units
  81. 81. responsible for the quality of (online) service</li></li></ul><li>Case 1: Association of Public Libraries<br />central, local and personalized portals, socialnetworks<br />informational, functional, personal, community<br />wide range of personas, personalized portals, metricsonwidgetusage<br />
  82. 82. Case 1: Association of Public Libraries<br />Strategy<br /><ul><li>bottom-up cooperation
  83. 83. development of component-based tools
  84. 84. (not a top-down CMS and styleguide)</li></li></ul><li>Case 1: Association of Public Libraries<br />Design <br /><ul><li>personas based on behaviour patterns and touchpoint selections (not demographics)
  85. 85. sketches and storyboards(allowed for informal co-operation with the client teams)
  86. 86. rule-based designs for components(not just entire screens)
  87. 87. a high level design of a central site and local sites(all composed of widgets and modules)</li></li></ul><li>
  88. 88.
  89. 89.
  90. 90.
  91. 91.
  92. 92. Case 1: Association of Public Libraries<br />Results <br /><ul><li>designs for a library of widgets
  93. 93. on users’ personalized portals
  94. 94. on users’ social network sites
  95. 95. widgets have social elements
  96. 96. firstlibrary went live Thursday!</li></ul>collection of widgets<br />series of widgets<br />
  97. 97.
  98. 98. LessonsLearned<br />
  99. 99. Lessonslearned: Strategy<br />Strategy<br />Developing an exploding strategy is a great way to transform the service into an effective service in new contexts<br />Affiliations with partners are a logical step in an exploding strategy but not the easiest direction to take (or even envision) for a company<br />You want to build beta versions of all the elements in the exploding website&apos;s ecosystem: do not release touchpoints individually (as client will try to make you do).<br />
  100. 100. Lessonslearned: Design<br />Design<br />A collaborative design method employing sketching and storyboards, combined with script-based deliverables seems to be the best way to develop a exploding system<br />You need to switch from designing fixed structures and their interactive interfaces and start to design fragmented, impulse-driven experiences for multiple touchpoints<br />
  101. 101. Model users<br />Specifyoutcomesthat match users’ goals<br />Profiles<br />Design adaptivecomponents<br />Contexts<br />Select valuablebehaviour to support<br />Writescenarios and scripts,and direct yourscenes<br />Touchpoints<br />
  102. 102. LessonsLearned<br /> Multiple Touchpoints<br /> Multiple Contexts-of-Use<br />Context-rich Profiles<br />
  103. 103. Thankyou!<br />iskander@info.nlpeterbo@info.nl<br />info.nl<br /> FULL SERVICE INTERNET AGENCY <br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×