Designingfor the Scattered Structures

of Exploding Websites

Iskander SmitPeter Boersma

Euro IA 2009 - Copenhagen

info.nl FULL SERVICE INTERNET AGENCY

A short history ofExploding Websites

an online dialogue on the road to result

(Pro-active) support

The contextinfluences the route A product taillored

The whole is a rich experience

Model of Virtual Warmth

we live in a scattered environment

our behavior is changed

a custom digital life

continuous partial attention

pull back in our own social world

social exhibitionisme

a continuous conversation

the context models our world

attention

outsidewebsite

use

insidewebsite

applyorientation

Looking for the touchpoints

outsidewebsite

use

insidewebsite

applyorientation

Looking for the touchpoints

attention

“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’Reilly

Devices will all have sensors. In the end it is about the services you create using these sensors.

create a system

attract

engage

convert

retain

manage the ecosystem

Strategies forExploding Websites

new strategies

David Armano, 2008

exploding strategy

match

1

brand promise

customer experience

exploding strategy

engage

2value

benefits

productpromise

offer

match

1

exploding strategy

match

1

engage

2

connect

3

context

devicesscenarios

touchpoints

exploding strategy

match

1

engage

2

connect

3script

4

planprogramme

architecture

exploding strategy

match

1

engage

2

connect

3script

4

measure

5

kpi

targets

metrics

exploding strategy

match

1

engage

2

connect

3script

4

measure

5

orchestrate

6

organisation

employees

partners

exploding strategy

match

1

engage

2

connect

3script

4

measure

5

orchestrate

6spread

7

continuousdevelopment

learn

improve

stakeholder radar

exploding strategy

match

1

engage

2

connect

3script

4

measure

5

orchestrate

6spread

7brand promise

customer experience

value

benefits

productpromise

context

devicesscenariosplan

kpi

targets

offer

programme

metrics

organisation

employees

partners

idealab

customer palette

product promise proposition

touchpoints

hotspot audit

interactive tubemap

programme plan

exploding architecture

architecture

dashboard

reports

organisation mapping

function profiles

exploding elements

affiliate contracts continuous

developmentlearn

improve

DesigningExploding Websites

Designing Exploding Websites

• Design Process (drafts)• What’s Different?• Tools

Design Process for Exploding 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-sabi for designing Exploding Websites

Draft 2: Rugby ball

Draft 3: Concept Map

(ahem)

Select valuable behaviour to

support

Model users

Write scenarios and scripts,and direct your scenes

Specify outcomesthat match users’ goals

Design adaptive components

Touchpoints

Contexts

Profiles

What’s different?

Multiple TouchpointsKnow the users’ attitude towards touchpoints perform user research into behaviour and expectations

The wide range of touchpoints means a wide target group model more personas and their touchpoint preferences

You 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-voice

Some 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 how

Knowledge about users allows your designs to adapt create interfaces that adapt their behaviour based on data from user profiles

Tools for designing Exploding Websites

Multiple Touchpoints

Multiple Contexts-of-Use

Context-rich Profiles

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

xx

xxxxx

xxxxx

Analysis of a funnel

xxxx

xxxx

x xx66,7%

0,09%

25%

register for game

play game finish game hire

75%

To hire XX people, we need Y times more registrants for the game (assuming we increase registration-to-play rate to 75%)

x

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

When looking for corporate

information

When competing with others

When considering joining a company

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

Multiple-touchpoint scenarios

1. After a visit by Sales, the client receives an email with a confirmation (1), asking her to visit the portal to complete her contact data (2-4). She also checks her order and downloads a copy of the invoice (6-7).

2. Ed dignissim felis non orci laoreet sit amet ullamcorper ligula pulvinar.

3. Nulla fringilla euismod eros, rutrum facilisis nisi consequat.4. Nam sed neque vel purus gravida pellentesque ut sed urna.5. Maecenas nisi massa, fringilla sed tempus ac, suscipit at

nibh.

Scenario 1: First login

2 431

Email from Sales triggers first visitClient creates new password upon first login.On first visit, client is asked to confirm client data.Then taken to homepage. Likely to check order.Overview of order confirmations with option to download.Touchpoint selection (1=email, 2-7 = web, rest=widget)

desktopwidget

5

6

7

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 with Exploding Websites

Case 1: Association of Public Libraries

The Dutch Association of Public Libraries (VOB)

- centrally controlled organization- with strong independent units- responsible for the quality of (online) service

Case 1: Association of Public Libraries

central, local and personalized portals, social networks

informational, functional, personal, community

wide range of personas, personalized portals, metrics on widget usage

Case 1: Association of Public Libraries

Strategy- bottom-up cooperation- development of component-based

tools- (not a top-down CMS and styleguide)

Case 1: Association of Public Libraries

Design - 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 Libraries

Results - designs for a library of widgets- on users’ personalized portals- on users’ social network sites- widgets have social elements- first library went live Thursday!

collection of widgetsseries of widgets

Lessons Learned

Lessons learned: StrategyStrategy• Developing an exploding strategy is a great way

to transform the service into an effective service in new contexts

• Affiliations with partners are a logical step in an exploding strategy but not the easiest direction to take (or even envision) for a company

• You 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).

Lessons learned: DesignDesign• A collaborative design method employing

sketching and storyboards, combined with script-based deliverables seems to be the best way to develop a exploding system

• You need to switch from designing fixed structures and their interactive interfaces and start to design fragmented, impulse-driven experiences for multiple touchpoints

Select valuable behaviour to

support

Model users

Write scenarios and scripts,and direct your scenes

Specify outcomesthat match users’ goals

Design adaptive components

Touchpoints

Contexts

Profiles

Lessons Learned• Multiple Touchpoints

• Multiple Contexts-of-Use

• Context-rich Profiles

Thank you!

iskander@info.nlpeterbo@info.nl

info.nl FULL SERVICE INTERNET AGENCY