Designingfor the ScatteredStructures of Exploding WebsitesIskander SmitPeter BoersmaEuro IA 2009 - Copenhageninfo.nl FULL SERVICE INTERNET AGENCY

A short history ofExploding Websites

Model of Virtual Warmthan online dialogue on the road to resultThe contextinfluences the routeA product taillored(Pro-active) supportThe whole is a rich experience

we live in a scattered environment

social exhibitionismea custom digital life our behavior is changedpull back in our own social worlda continuous conversationcontinuous partial attention

the context models our world

attentionuseapplyorientationinsidewebsiteoutsidewebsiteLooking for the touchpoints

useapplyorientationattentioninsidewebsiteoutsidewebsiteLooking for the touchpoints

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

model exploding website

mobile site exploding function

we live with our heads in the cloud

Tim O’ReillyDevices will all have sensors. In the end it is about the services you create using these sensors.

create a system

manage the ecosystemattractengageconvertretain

StrategiesforExploding Websites

new strategiesDavid Armano, 2008

brand promise1customer experiencematchexploding strategy

1matchexploding strategy2engagevaluebenefitsofferproductpromise

1matchexploding strategy2engage3connectcontextscenariosdevicestouchpoints

1matchexploding strategy2engage4script3connectprogrammeplanarchitecture

1matchexploding strategy5measure2targetsengagekpi4script3metricsconnect

partners6employees1orchestratematchorganisationexploding strategy5measure2engage4script3connect

improvecontinuousdevelopmentlearn7spread61orchestratematchexploding strategy5measure2engage4script3connect

exploding elementsaffiliate contractsimprovecontinuousdevelopmentidealaborganisation mappinglearncustomer palettefunction profiles7spreadbrand promisepartners6employees1customer experienceorchestratematchorganisationexploding strategy5measurestakeholder radar2engagetargetsvalueproduct promise propositionkpibenefitsdashboard4metricsscriptoffer3reportsproductpromiseconnectprogrammecontextplanscenariosdeviceshotspot auditprogramme planarchitecturetouchpointsinteractive tubemapexploding architecture

DesigningExploding Websites

DesigningExploding WebsitesDesign Process (drafts)What’s Different?Tools

Design ProcessforExploding Websites

Draft 1: Wabi-sabi

Wabi-sabi“wabi”: limitations in design and unpredictable or changing usage conditions“sabi”: imperfect reliability or limited mortality (comparable to rust)

Wabi-sabifordesigningExploding Websites

Draft 2: Rugby ball

Draft 3: Concept Map

(ahem)

Model usersSelect valuablebehaviour to support

Specifyoutcomesthat match users’ goalsWritescenarios and scripts,and direct yourscenes

Design adaptivecomponents

ProfilesContextsTouchpoints

What’s different?

Multiple TouchpointsKnow the users’ attitude towards touchpoints perform user research into behaviour and expectationsThe wide range of touchpoints means a wide target group model more personas and their touchpoint preferencesYou need an optimal mix of touchpoints and functionalities develop use scenarios that are valuable for both business and customer

Multiple Contexts-of-UseConsider user flow, attention, and social context design variants in interaction style andtone-of-voiceSome touchpoints allow for the inclusion of social features define the effects on the social context

Context-rich ProfilesEach context-of-use calls for additional attributes to be added to the visitor's profile track which touchpoints have been used when, for which functionality, and howKnowledgeaboutusersallowsyour designs to adapt create interfaces thatadapttheirbehaviourbasedon data from user profiles

ToolsfordesigningExploding Websites

Context-rich Profiles Multiple Contexts-of-Use Multiple Touchpoints

Web Analytics to quantify current user behaviour and discover opportunities for improvement

Analysis of a funnel To hire XX people, we need Ytimes more registrants for the game (assuming we increase registration-to-play rate to 75%)xxxxxxxxxxxxxx75%xxxxxxxxx66,7%0,09%25%xregister for gameplay gamefinish gamehire

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

WhenlookingforcorporateinformationWhencompetingwithothersWhenconsideringjoining a company

Create concept maps and scenariosto explore all relationships between the objects that users encounter

Multiple-touchpointscenariosAfter 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).Ed dignissimfelis non orcilaoreet sit ametullamcorperligulapulvinar.Nullafringillaeuismoderos, rutrumfacilisis nisi consequat.Nam sednequevelpurusgravidapellentesqueutsedurna.Maecenas nisi massa, fringillased tempus ac, suscipit at nibh.

Scenario 1: First login14253desktopwidget67Email fromSalestriggersfirstvisitClientcreates new password uponfirst login.Onfirstvisit, client is asked to confirmclient data.Then taken to homepage. Likely to check order.Overview of order confirmationswithoption to download.Touchpoint selection(1=email, 2-7 = web, rest=widget)

Specify interactive components that employ adaptive interfaces

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

reuse an existing profile on a social network site(e.g. Ning, Facebook Connect)base profile on explicitly stated interests(e.g. for e-commerce sites)use the profile of the content to enrich user profiles (e.g. using metadata for targeted bannering)collect behaviour over several touchpoints(e.g. Facebook Beacon, and a profile-sharing program proposed by CMS producer «GX»)enrich profiles with data from profiles of friends(e.g. Hyves, Facebook)

Cases withExploding Websites

Case 1: Association of Public LibrariesThe Dutch Association of Public Libraries (VOB)centrally controlled organizationwith strong independent unitsresponsible for the quality of (online) service

centrally controlled organization

with strong independent units

responsible for the quality of (online) service

Case 1: Association of Public Librariescentral, local and personalized portals, socialnetworksinformational, functional, personal, communitywide range of personas, personalized portals, metricsonwidgetusage

Case 1: Association of Public LibrariesStrategybottom-up cooperationdevelopment of component-based tools(not a top-down CMS and styleguide)

bottom-up cooperation

development of component-based tools

(not a top-down CMS and styleguide)

Case 1: Association of Public LibrariesDesign 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)

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)

Case 1: Association of Public LibrariesResults designs for a library of widgetson users’ personalized portalson users’ social network siteswidgets have social elementsfirstlibrary went live Thursday!collection of widgetsseries of widgets

designs for a library of widgets

on users’ personalized portals

on users’ social network sites

widgets have social elements

firstlibrary went live Thursday!

LessonsLearned

Lessonslearned: StrategyStrategyDeveloping an exploding strategy is a great way to transform the service into an effective service in new contextsAffiliations with partners are a logical step in an exploding strategy but not the easiest direction to take (or even envision) for a companyYou want to build beta versions of all the elements in the exploding website's ecosystem: do not release touchpoints individually (as client will try to make you do).

Lessonslearned: DesignDesignA collaborative design method employing sketching and storyboards, combined with script-based deliverables seems to be the best way to develop a exploding systemYou need to switch from designing fixed structures and their interactive interfaces and start to design fragmented, impulse-driven experiences for multiple touchpoints

Model usersSpecifyoutcomesthat match users’ goalsProfilesDesign adaptivecomponentsContextsSelect valuablebehaviour to supportWritescenarios and scripts,and direct yourscenesTouchpoints

LessonsLearned Multiple Touchpoints Multiple Contexts-of-UseContext-rich Profiles

Thankyou!iskander@info.nlpeterbo@info.nlinfo.nl FULL SERVICE INTERNET AGENCY