8. SPECIFICALLY WHAT I’LL BE
SHARING TODAY ...
- Our journey to multi-device experience design
- Case studies, with lessons learned and bruises
earned
- Highlight a few challenges moving forward
27. SO PERHAPS WE NEED TO REDEFINE WHAT WE
MEAN BY MOBILE STRATEGY
28. MOBILE FIRST? CONTENT FIRST?
WHAT SHOULD BE OUR FOCUS?
FUTUREFRIEND.LY - love you guys
29. IT’S ABOUT UNDERSTANDING THE SERIES OF
INTERACTIONS THAT CONSTITUTE AN EXPERIENCE
“ Creating remarkable mobile
experiences means understanding
that true value only exists at the
point of interaction where the
service is produced and consumed
at the same time.
”
- Mobile Experience
30. HOW WE CREATE MEANINGFUL MOBILE STRATEGIES
ONE CONTEXT OF USE, BUT
EVOLVING SITUATION
31. HOW WE CREATE MEANINGFUL MOBILE STRATEGIES
- Understand “situation” not just context in design
- Understand relationships between devices
- Understand and design for end-to-end interactions
ONE CONTEXT OF USE, BUT
EVOLVING SITUATION
32. A SIMPLE GOOGLE INFOGRAPHIC
SHIFTS IN DESIGN FOCUS OVER THE PAST 30 YEARS
z) s
Mh u ter
4 .77 mp
U@ Co
P au ple
el C m. Ap
( Int .co at
ed ect used ntu
m
eas n
on st me n
rel – c ” f ir ch ces o sig
ter SP ce aun rfa sm De
pu n I erien rel )su ain nab
le
C om alia Exp gle rds (re ng i
nal
r
ust r om Go
o rst Wo .0 sig sta
rso t A se bo of bu Ad b2 De Su
Pe firs “U com ch com gle We ice hf
or
IB M T he Term D ot. L aun D ot. G oo Term Serv Pu
s
81 94 95 99 98 01 02 04 08 09
19 19 19 19 19 20 20 20 20 20
Key moments
Trends
Usability lab test
Remote usability testing
Contextual research
The growth of PC The new UX community CCD goes mainstream Design for social The rise of service design Mobile web and apps
The advance in personal computing The web brought together graphic An increasing emphasis is placed Social media and social network CCD starting to be used more The launch of i-Phone Strategic design thinking
moved human computer interaction designers, information architects, on the importance of including the takes off. Designers forced to significantly to help craft revolutionised the use the web
from an engineering discipline to the usability engineersand marketing. customers as both a source of consider the social nature of the end-to-end, multi-channel mobile and touch and gesture
everyday realm. information and a partner in web and multi sided conversations. customer experiences. based interface.
creative design . Service design
(end-to-end experience)
1981-94 1995-99 2000-03 2004-05 2006-08 2009-10
Source: Stephen Cox, Westpac
33. A SIMPLE GOOGLE INFOGRAPHIC
SHIFTS IN DESIGN FOCUS OVER THE PAST 30 YEARS
z) s
Mh u ter
4 .77 mp
U@ Co
P au ple
el C m. Ap
( Int .co at
ed ect used ntu
m
eas n
on st me n
rel – c ” f ir ch ces o sig
ter SP ce aun rfa sm De
pu n I erien rel )su ain nab
le
C om alia Exp gle rds (re ng i
nal
r
ust r om Go
o rst Wo .0 sig sta
rso t A se bo of bu Ad b2 De Su
Pe firs “U com ch com gle We ice hf
or
IB M T he Term D ot. L aun D ot. G oo Term Serv Pu
s
81 94 95 99 98 01 02 04 08 09
19 19 19 19 19 20 20 20 20 20
Key moments
Trends
Usability lab test
Remote usability testing
Contextual research
The growth of PC The new UX community CCD goes mainstream Design for social The rise of service design Mobile web and apps
The advance in personal computing The web brought together graphic An increasing emphasis is placed Social media and social network CCD starting to be used more The launch of i-Phone Strategic design thinking
moved human computer interaction designers, information architects, on the importance of including the takes off. Designers forced to significantly to help craft revolutionised the use the web
from an engineering discipline to the usability engineersand marketing. customers as both a source of consider the social nature of the end-to-end, multi-channel mobile and touch and gesture
everyday realm. information and a partner in web and multi sided conversations. customer experiences. based interface.
creative design . Service design
(end-to-end experience)
1981-94 1995-99 2000-03 2004-05 2006-08 2009-10
Source: Stephen Cox, Westpac
34. FROM UI TO SERVICES, MOBILE TO MOBILITY
m
e ntu n
ch ace
s om sig
aun urf sm De
rel )s gai
n a ble
ord
s (re n ain
rst dW 2.0 sig ust
bu A b De rS
om gle We ic e fo
t.c oo m erv sh
Do G Ter 8S 9P
u
01 02 04 0 0
20 20 20 20 20
Usability lab test
Remote usability testing
Contextual research
oes mainstream Design for social The rise of service design Mobile web and apps
reasing emphasis is placed Social media and social network CCD starting to be used more The launch of i-Phone Strategic design thinking
importance of including the takes off. Designers forced to significantly to help craft revolutionised the use the web
mers as both a source of consider the social nature of the end-to-end, multi-channel mobile and touch and gesture
ation and a partner in web and multi sided conversations. customer experiences. based interface.
ve design . Service design
(end-to-end experience)
000-03 2004-05 2006-08 2009-10 Source: Stephen Cox, Westpac
35. THIS IS HOW WE’LL DEAL WITH ALL THESE NEW
DEVICES IN A PRINCIPLED, CONSISTENT AN AND
COMPELLING WAY
42. BUT PUTTING IT ALL TOGETHER IN A WAY
THAT MATTERS IS A LITTLE TRICKIER
43. RECENT CLIENT DEBRIEFING ON
MOBILE STRATEGY
“ This is about seeing the forest through
the trees - we don't yet know what
supporting multiple devices means. We
don't know what it takes to get there,
what it looks like, what to support and
how much it will cost. If we don't know
that upfront we risk starting a project we
can't complete or has no benefit.
”
- National Broadband Network
45. DEFINING MULTI-DEVICE EXPERIENCE
STRATEGY ...
“ Identifies the set of activities from a
user’s perspective that an organisation
needs to undertake in order to deliver a
series of consistent and meaningful
interactions across devices, and
whose design is true to each device,
context and usage.
”
47. THIS IS SOMETHING WE CALL
CONTINUOUS EXPERIENCES
- It’s situated
- It’s distributed, yet coherent
- It’s compensatory and complimentary
- It’s familiar and conversational
- It’s synchronised, and hopefully seamless
- It’s respectful and personal
52. WHAT’S A DESIGN FRAMEWORK
Term Articulates Definition Example
Vision Intent What we stand for.
We treat our customers with
respect ✓ Correct experience
Framework Strategy How we plan to get there. Customer-centered design ✓ Continuous experience
(towards)
Principles Behaviour How we normally act
Conform with user expectations
(cultural)
✓ Consistent approach
(focus)
Guidelines Conventions
How context affects our
actions.
Negative/Backward is left;
Affirmative/Forward is right
✓ Coherent feel
(examples)
Specifications Detail What we end up doing. Continue button to the right ✓ Consistent look
53. WHERE DO YOU START?
USER PERSPECTIVE
MOTIVATION
ACTIVITY
GOAL
TASK
ACTION
fast Speed of change slow
UI
FEATURES
PRODUCT
STRATEGY
VISION
BUSINESS PERSPECTIVE
55. EXAMPLE RESULT OF EXPERIENCE MAPPING
Research Purchase Set-up Use Manage Troubleshoot Exit
I want to ... I want to ... I want to ... I want to ... I want to ... I want to ... I want to ...
Find Subscribe to Show/retrieve Get Cancel
Create a profile Search for something
what’s out there something something something fixed something
Have my questions Buy Register for Browse through Monitor Get an
Sign out
answered something one-off something something usage/cost answer
Try
Select Monitor my Understand
something Pay a bill Authenticate
something usage/cost something
out
Change
Discover Gift Read/watch/listen to/
Personalise settings/
new stuff something look at something
preferences
Find something Play with/learn
good for me something
Compare things Download something
Find something Flag/
better than what favourite/bookmark
I have something
56. MULTI-CHANNEL DESIGN
FRAMEWORK
Optus Experience language v1.0 Index 13
User goal
Find what’s out there Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
Primary Principle
Don’t waste my time: Don’t confuse me with irrelevant options.
DO Ensure relevant content is dominant
DON’T Make a user sift through unrelated offers, ads and information to get to content
Explanation The more options a user is presented with, the harder they will find it and the less likely they are to
make a decision, so focus must be limited to core propositions, user needs & behaviours.
Channels Mobile
Especially in mobile, where screen space is limited and a
user’s attention-span is short, the most relevant content
must clearly dominate the page, without being drowned out Primary destinations
displayed front & centre
by other elements.
Example
Although Citysearch’s business model is advertising based,
the homepage has been designed for context of use with a Related suggestions relevant to the users
clear focus on providing direct access to search and nearby location are positioned prominently but
clearly separated from primary destinations
venues without interrupting the flow with advertising.
Citysearch iPhone app
Online
Online is a multitasking environment in which users are
easily distracted. Each web page needs a clear goal and
method to fulfil that goal.
Example
Mozilla wants people to download and use the Firefox web
browser. Google ‘Web Browser’ and the Firefox website Product shot to
57. MULTI-CHANNEL DESIGN
FRAMEWORK
Optus Experience language v1.0 Index 13
User User goal
goal
Find what’s out there
Find what’s out there Activity
Activity RESEARCH
RESEARCH PURCHASE
PURCHASE SET-UP
SET-UP USE USE MANAGE MANAGE TROUBLESHOOT
TROUBLESHOOT EXIT EXIT
Primary Principle
Don’t waste my time: Don’t confuse me with irrelevant options.
DO Ensure relevant content is dominant
DON’T Make a user sift through unrelated offers, ads and information to get to content
Explanation The more options a user is presented with, the harder they will find it and the less likely they are to
make a decision, so focus must be limited to core propositions, user needs & behaviours.
Channels Mobile
Especially in mobile, where screen space is limited and a
user’s attention-span is short, the most relevant content
must clearly dominate the page, without being drowned out Primary destinations
displayed front & centre
by other elements.
Example
Although Citysearch’s business model is advertising based,
the homepage has been designed for context of use with a Related suggestions relevant to the users
clear focus on providing direct access to search and nearby location are positioned prominently but
clearly separated from primary destinations
venues without interrupting the flow with advertising.
Citysearch iPhone app
Online
Online is a multitasking environment in which users are
easily distracted. Each web page needs a clear goal and
method to fulfil that goal.
Example
Mozilla wants people to download and use the Firefox web
browser. Google ‘Web Browser’ and the Firefox website Product shot to
58. MULTI-CHANNEL DESIGN
FRAMEWORK
Optus Experience language v1.0 Index 13
User goal
Find what’s out there Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
Primary Principle
Don’t waste my time: Don’t confuse me with irrelevant options.
DO Ensure relevant content is dominant
DON’T Make a user sift through unrelated offers, ads and information to get to content
Explanation The more options a user is presented with, the harder they will find it and the less likely they are to
make a decision, so focus must be limited to core propositions, user needs & behaviours.
Channels Mobile
Especially in mobile, where screen space is limited and a
user’s attention-span is short, the most relevant content
must clearly dominate the page, without being drowned out Primary destinations
displayed front & centre
by other elements.
Example
Although Citysearch’s business model is advertising based,
the homepage has been designed for context of use with a Related suggestions relevant to the users
clear focus on providing direct access to search and nearby location are positioned prominently but
clearly separated from primary destinations
venues without interrupting the flow with advertising.
Citysearch iPhone app
Online
Online is a multitasking environment in which users are
easily distracted. Each web page needs a clear goal and
method to fulfil that goal.
Example
Mozilla wants people to download and use the Firefox web
browser. Google ‘Web Browser’ and the Firefox website Product shot to
59. MULTI-CHANNEL DESIGN
FRAMEWORK
Optus Experience language v1.0 Index 13
User goal
Find what’s out there Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
Primary Principle
Primary Principle
Don’t waste mymy time: Don’t confuse me irrelevant options.
Don’t waste time: Don’t confuse me with with irrelevant options.
Ensure relevant content is dominant
DO DO Ensure relevant content is dominant
DON’TMake a user sift through unrelated offers, ads and information to get toto get to content
DON’T Make a user sift through unrelated offers, ads and information content
Explanation
Explanation The more options a user is presented with, with, the harder they will find it less likely they are to
The more options a user is presented the harder they will find it and the and the less likely they are to
make a decision, so focus must be limited to core propositions, user needs & behaviours.
make a decision, so focus must be limited to core propositions, user needs & behaviours.
Channels Mobile
Especially in mobile, where screen space is limited and a
user’s attention-span is short, the most relevant content
must clearly dominate the page, without being drowned out Primary destinations
displayed front & centre
by other elements.
Example
Although Citysearch’s business model is advertising based,
the homepage has been designed for context of use with a Related suggestions relevant to the users
clear focus on providing direct access to search and nearby location are positioned prominently but
clearly separated from primary destinations
venues without interrupting the flow with advertising.
Citysearch iPhone app
Online
Online is a multitasking environment in which users are
easily distracted. Each web page needs a clear goal and
method to fulfil that goal.
Example
Mozilla wants people to download and use the Firefox web
browser. Google ‘Web Browser’ and the Firefox website Product shot to
60. MULTI-CHANNEL DESIGN
FRAMEWORK
Optus Experience language v1.0 Index 13
User goal
Find what’s out there Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
Primary Principle
Don’t waste my time: Don’t confuse me with irrelevant options.
DO Ensure relevant content is dominant
DON’T Make a user sift through unrelated offers, ads and information to get to content
Explanation The more options a user is presented with, the harder they will find it and the less likely they are to
make a decision, so focus must be limited to core propositions, user needs & behaviours.
Channels Mobile
Especially in mobile, where screen space is limited and a
user’s attention-span is short, the most relevant content
must clearly dominate the page, without being drowned out Primary destinations
displayed front & centre
by other elements.
Example
Although Citysearch’s business model is advertising based,
the homepage has been designed for context of use with a Related suggestions relevant to the users
clear focus on providing direct access to search and nearby location are positioned prominently but
clearly separated from primary destinations
venues without interrupting the flow with advertising.
Citysearch iPhone app
Online
Online is a multitasking environment in which users are
easily distracted. Each web page needs a clear goal and
method to fulfil that goal.
Example
Mozilla wants people to download and use the Firefox web
browser. Google ‘Web Browser’ and the Firefox website Product shot to
61. MULTI-CHANNEL DESIGN
FRAMEWORK
Optus Experience language v1.0 Index 13
User goal
Find what’s out there Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
Primary Principle
Don’t waste my time: Don’t confuse me with irrelevant options.
DO Ensure relevant content is dominant
DON’T Make a user sift through unrelated offers, ads and information to get to content
Explanation The more options a user is presented with, the harder they will find it and the less likely they are to
make a decision, so focus must be limited to core propositions, user needs & behaviours.
Channels Mobile
Channels Mobile
Especially in mobile, where screen is limited and a and a
Especially in mobile, where screen space space is limited
user’sattention-span is short, the most relevantrelevant content
user’s attention-span is short, the most content
mustclearly dominate the page,page, without being out
must clearly dominate the without being drowned drowned out Primary destinations Primary destinations
displayed front & centre displayed front & centre
by other elements.
by other elements.
Example
Example
Although Citysearch’s business model is advertising based,
Although Citysearch’s business context of use with a based,
the homepage has been designed for model is advertising Related suggestions relevant to the users
location are positioned prominently but
the homepage has been designed for context of use with a
clear focus on providing direct access to search and nearby Related suggestions relevant to the users
clearly separated from primary destinations
clear focus on providingthe flow with advertising. and nearby
venues without interrupting direct access to search location are positioned prominently but
Citysearch iPhone app clearly separated from primary destinations
venues without interrupting the flow with advertising.
Citysearch iPhone app
Online
Online is a multitasking environment in which users are
easily distracted. Each web page needs a clear goal and
method to fulfil that goal.
Example
Mozilla wants people to download and use the Firefox web
browser. Google ‘Web Browser’ and the Firefox website Product shot to
62. User goal
Find what’s out there Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
Primary Principle
Don’t waste my time: Don’t confuse me with irrelevant options.
MULTI-CHANNEL DESIGNads and information to get to content
Ensure relevant content is dominant
DO
Make a user sift through unrelated offers,
DON’T
FRAMEWORK a user is presented with, the harder they will find it and the less likely they are to
The more options
Explanation
make a decision, so focus must be limited to core propositions, user needs & behaviours.
Channels Mobile
Especially in mobile, where screen space is limited and a
user’s attention-span is short, the most relevant content
must clearly dominate the page, without being drowned out Primary destinations
displayed front & centre
by other elements.
Example
Although Citysearch’s business model is advertising based,
the homepage has been designed for context of use with a Related suggestions relevant to the users
clear focus on providing direct access to search and nearby location are positioned prominently but
clearly separated from primary destinations
venues without interrupting the flow with advertising.
Citysearch iPhone app
Online
Online is a multitasking environment in which users are
easily distracted. Each web page needs a clear goal and
method to fulfil that goal.
Example
Mozilla wants people to download and use the Firefox web
browser. Google ‘Web Browser’ and the Firefox website Product shot to
will be one of the first results. set expectations
• The website is designed to help the user complete
Call to action is the
their task: Get a web browser. most prominent feature
• The dominant feature on the page is the call to action
to download Firefox.
• Next to it is a product shot to show people what the
browser looks like.
• Below that is a tour and teasers of the major benefits
of this web browser, with deeper information a click
away. Tour & benefits support
the decision to download
Mozilla Firefox download page
TV
TV is primarily a consumption medium and the controls are
generally not designed for deep interaction, so the most
relevant content should be as few clicks away as possible.
63. User goal
Find what’s out there Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
Don’t waste myMobileDon’t confuse me with irrelevant options.
Channels
Primary Principle
time:
MULTI-CHANNEL DESIGNads and information to get to content
Ensure relevant content is dominant
DO
Especially in mobile, where screen space is limited and a
Make a user sift through unrelated offers,
DON’T
FRAMEWORK a user is presented with, the harder they will find it and the less likely they are to
user’s attention-span is short, the most relevant content
must clearly dominate the page, without being drowned out
The more options
Explanation
by other elements.
make a decision, so focus must be limited to core propositions, user needs & behaviours.
Example
Although Citysearch’s business model is advertising based,
Channels Mobile
the homepage has been designed for context of use with a
Especially in mobile, whereproviding direct access to search and nearby
clear focus on screen space is limited and a
user’s attention-span is short, the most relevantflow with advertising.
venues without interrupting the content
must clearly dominate the page, without being drowned out Primary destinations
displayed front & centre
by other elements.
Example
Although Citysearch’s Online model is advertising based,
business
the homepage has been designed for context of use with a Related suggestions relevant to the users
Online is a multitasking environment in which users are
clear focus on providing direct access to search and nearby location are positioned prominently but
clearly separated from primary destinations
venues without interrupting the flow with advertising. a clear goal and
easily distracted. Each web page needs
method to fulfil that goal. Citysearch iPhone app
Example
Online
Mozilla wants people to download and use the Firefox web
Online is a multitasking environment in which users are
easily distracted. Each web page needs a clear goal and Firefox website
browser. Google ‘Web Browser’ and the
method to fulfil that goal. the first results.
will be one of
Example • The website is designed to help the user complete
Mozilla wants people to download and use the Firefox web
their task: Get a web browser.
browser. Google ‘Web Browser’ and the Firefox website Product shot to
will be one The dominant
• of the first results. feature on the page is the call to action set expectations
to download Firefox.
• The website is designed to productuser complete people what the
• Next to it is a help the shot to show Call to action is the
their task:browser looks like.
Get a web browser. most prominent feature
• The dominant feature on the page is the call to action
• Below that is a tour and teasers of the major benefits
to download Firefox.
• Next to it is athis web browser, with deeper information a click
of product shot to show people what the
away.
browser looks like.
• Below that is a tour and teasers of the major benefits
of this web browser, with deeper information a click
away. Tour & benefits support
the decision to download
Mozilla Firefox download page
TV
TV is primarily a consumption medium and the controls are
TV
generally not designed for deep interaction, so the most
TV is primarily a consumption medium and the controls are
generallyrelevant content should be as few clicks away as possible.
not designed for deep interaction, so the most
relevant content should be as few clicks away as possible.
Example
84. WE MAPPED THE CUSTOMER JOURNEY, DELIGHTERS & DETRACTORS
REDACTED
Unfortunately we can’t distribute this image
85. WE MAPPED THE CUSTOMER JOURNEY, DELIGHTERS & DETRACTORS
REDACTED
Unfortunately we can’t distribute this image
86. WE MAPPED THE CUSTOMER JOURNEY, DELIGHTERS & DETRACTORS
REDACTED
Unfortunately we can’t distribute this image
- Travel motivations, perceptions, beliefs, and habits
- Technology usage (general, travel)
- Mobile phone behaviours (devices, usage patterns,
spend habits, data plans
- Pain points and potential delighters (where we could
have an impact)
- Opportunities for mobile intervention and augmentation
89. GREATEST VALUE ACROSS THE CUSTOMER
JOURNEY AND BY CUSTOMER TYPES
Customer Journey: Feature Matrix
Feature/Service Explore trip Planning for specific Booking the flight Checking into Boarding into checked-in In-flight (en-route) Arrival (at airport) Post-trip (exit port)
trip booked flight flight
Compare flights across carriers 1
Receive low-fare/specials alerts 1
Explore travel destinations 1
Explore things to do at a travel destination 1
Receive recommendations 1
View my flight history 1
Save my regular flights 1
Save my flight preferences 1
Check flight schedules 1
Manage my account/preferences 1
Register for loyalty program 1
Check/update loyalty program 1
Check frequent flyer rewards 1
Save flight details (e.g. Favourites) 1
Check parking facilities 1
Find out more about the airline 1
Research hotels and locality 1
Research transport options at destinations 1
See friend’s travel itineraries 1
View my flights 1
Set seat preference during booking 1
View airline and flight policies 1
Book flights 1
Book and manage flights for multiple people 1
Review additional flight info (baggage, meals, entertainment, etc.) 1
Receive itinerary 1
Change schedule flight booking 1
Add flight schedule to personal calendars 1
Purchase additional luggage 1
Purchase additional insurance 1
Purchase carbon offset 1
Book a hotel 1
Book a car 1
Receive travel warnings 1
Flight check-in 1
Collect boarding pass 1
View airport contact information 1
Change seat assignment during check-in 1
Upgrade flight purchase 1
Request flight refund for cancelled or delayed flights 1
Receive help 1 1
Check flight status 1
Check terminal and gate allocation 1
Receive delay and cancel notifications 1
Receive gate change notifications 1
Receive plane change notifications 1
Re-book cancelled or delayed flights 1
Check terminal/lounge maps 1
Find airline customer service numbers 1
Provide feedback to airline 1
Receive lost luggage alerts and instructions 1
Track lost luggage 1
Locate friends at destinations 1