Designingfor the ScatteredStructures of Exploding
Websites<br />Iskander SmitPeter Boersma<br />Euro IA 2009 - Copenhagen<br />info.nl<br /> FULL SERVICE INTERNET AGENCY <br />

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 taillored<br />(Pro-active) support<br />The whole is a rich experience<br />

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 />a continuous conversation<br />continuous partial attention<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 touchpoints<br />

use<br />apply<br />orientation<br />attention<br />inside<br
/>website<br />outside<br />website<br />Looking for the touchpoints<br />

“In the future websites will
offer moveable services, which can be placed on everywhere the customer wishes.” Steve Rubel<br />

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

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

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

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

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

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

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

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 or limited mortality (comparable to rust)<br />

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

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

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

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

Create swimlanes (from workflow and
service design practice) to document potential flows through multiple touchpoints<br />

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

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

Specify interactive components that employ
adaptive interfaces<br />

Create personas based on motivation,
(not market segments) and remember different contexts trigger different behaviours<br />

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

Cases withExploding Websites<br />

Case 1: Association of Public
Libraries<br />The Dutch Association of Public Libraries (VOB)<br /><ul><li>centrally controlled organization

with strong independent units

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

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>personas based on behaviour patterns and touchpoint selections (not demographics)

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

firstlibrary went live Thursday!</li></ul>collection of
widgets<br />series of widgets<br />

LessonsLearned<br />

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

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

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

LessonsLearned<br /> Multiple Touchpoints<br />
Multiple Contexts-of-Use<br />Context-rich Profiles<br />

Thankyou!<br />iskander@info.nlpeterbo@info.nl<br />info.nl<br /> FULL
SERVICE INTERNET AGENCY <br />