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
×

EuroIA 2009 Designing Exploding Websites Smit Boersma

1,332

Published on

Presentation given by Info.nl at the EuroIA conference in Copenhagen on September 26, 2009.

Published in: Business, Travel
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,332
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

EuroIA 2009 Designing Exploding Websites Smit Boersma

  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 />

×