Presentation at UX Australia 2011 by Rod Farmer and Ash Donaldson from Mobile Experience on challenges leading teams to design multi-channel experiences.
This presentation focuses on creating multi-channel design frameworks, organisational hurdles, and lessons learnt.
Follow us on @rodfarmer and @ashdonaldson.
Creating multi-channel design frameworks - Mobile Experience
1.
2.
3.
4. Our story today
Produce a multi-channel design framework to
align our offerings, improve design quality and
offer a simple, seamless customer experience.
5. Our story today
Produce a multi-channel design framework to
align our offerings, improve design quality and
offer a simple, seamless customer experience.
6 WEEKS
8. What we hope to share with you ...
- Journey creating a framework to support multi-channel design
- Overcoming organisational factors that impact design
- The importance of creating a design vocabulary
- Impact of the design framework
- Lessons learnt, bruises earnt
11. What does it take to deliver
consistent experiences across
channels?
12. What is a multi-channel
design framework?
Aren’t most of our products and services
multi-channel anyway? Bulls**t bingo?
13. Yes! In fact, there are few
75
interactions these days that don’t
involve multiple channels ...
%
> 2 CHANNELS OR MORE
Forrester Research 2009
14. 59% started on a mobile and
finished on a PC
Images courtesy of Bryan Rieger, Yiibu
15. 34% started on a PC and
finished on a mobile
Images courtesy of Bryan Rieger, Yiibu
16. Move away from “multi-channel
design” towards focussing on
continuous experiences
“Continuous Experiences are
supported by integrated services
across devices whose design is true to
each device size, context, and
purpose”
17. Pillar 1: Focus on connectedness
A device appropriate experience,
whilst maintaining familiarity
20. Pillar 4: Interaction as conversation
- Severe disruption SMS
- Call CRM, wait in line
- Identify yourself to receive further action
- Walkthrough support actions
- Little awareness of customer journey
21. Pillar 5: Design for activities
“You can’t create behaviour change if you don’t
understand motivations and meaning”
22. Well intentioned, statements like
these really don’t offer much help.
Sorry
“Multi-channel orchestration of customer
processes delivers a seamless
experience across all interaction points
along the customer journey, adding
value and maximizing ROI by optimizing
sales and service opportunities.”
23. Clarify deliverables up front in terms of concrete terms
List the existing touch points associated with the product/service
Use examples to help evaluate and communicate
25. Situate the problem within a
strategic view
USER PERSPECTIVE
MOTIVATION
ACTIVITY
GOAL
TASK
ACTION
fast Speed of change slow
UI
FEATURES
PRODUCT
STRATEGY
VISION
BUSINESS PERSPECTIVE
26. Choosing the right level of
granularity for your focus is critical
“You need to understand the metaphor
of the system rst so that you can
shape the interactions within it”
27. Identify the businesses design
maturity
Stages of No awareness of the importance
of User Experience
User Experience unrecognised
Maturity ad-hoc - importance of UX has been recognised;
Supporting processes are being put in place
recognised
repeatable - Understanding of ‘good quality’ UX;
Importance under focus
considered
documented - Users are being involved in processes;
Build-up of UX skills and technology
implemented
the aim is to evolve
along this axis managed - UX is fully integrated; processes & method-
ologies are being evolved
integrated
cultural - Processes re UX-led; UX is fully
embedded in culture
institutionalised
28. Scaffold your solutions. What
can the client support right now?
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Design documentation
produced per individual
project
Flow
Flow
Flow
Flow
Flow
Flow
Flow
Flow
Guideline Guideline Guideline Guideline
Underlying guidelines,
principles and vision
Principle Principle covered in this document
Experience Vision
29. Clearly communicate the
purpose to different audiences
Executive Management Design Technology 3rd Party
Sponsorship
Experience Vision
Principles
Guidelines
Flows
Specification
31. Frame the problem within a strategic view
Match processes and artefacts to your organisations maturity
Identify who will be using your deliverables, and how
Look at past efforts and outcome, and use where possible
34. Before anything else, talk to people first
- Shared and divergent visions
- Desired vs perceived plausible vs actual outcomes
- Roles and responsibilities
- Beliefs about each other, the organisation and
ultimately their importance in the design process
- How we could ultimately support them deliver
better designs
35. Fear is your greatest enemy to
achieving something great
“It’s hard to design something when you
don’t know how to hold a conversation
with someone about the design. I don’t
need help with the UI, I need help
understanding the key things that should
be on each device. What the users
need to do, not what they click on.”
36. Fear is your greatest enemy to
achieving something great
- No leadership: No real commitment to programs of work
- Teams had no clear role of their responsibilities
- No baselining or ways of assessing progress and impact
- Actively dissuaded from participatory or inclusive design
practices
37. Reframing the problem
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
Insight: What we heard from our workshops with teams is an inability to conceptualise,
design and deliver consistent multi-channel experiences. This prohibits relevant,
consistency across platforms.
38. What the teams required
Term User Example Challenge
Boredom What drives user needs and
Vision Motivations
(cognitive pain avoidance) behaviours?
Framework Activities I want to get content on my
mobile
Where, how and with what do
people engage with us?
✓ Multi-channel design
What makes for a good News
Principles Goals Find some interesting news
experience? ✓ Clear design and requirements
What is the most effective News
Guidelines Tasks Browse news feed
layout?
How do I indicate if the content
Specifications Interactions Read an article
is free or paid?
Insight: Teams reported that they don’t have a good understanding of certain channels and how they should
engage users effectively. Similarly, they reported having a poor understanding of what key goals/needs they
needed to satisfy within their designs. Product Managers looked to UX. UX, Producers and Visual Design are
looking for guidance at this level.
41. Not the reception we really wanted ...
- KPI = faster time to market at less cost
- Massive staff (contractor) turn-over, compliance
- Inability to visualise “good design”
- Quality through codi cation
42. A key re-learning towards
developing the framework
“Build processes and tools to support
and extend existing ways of working,
rather than setting out in the belief that
you can replace them”
44. Refining and selling the
framework
- Identify core activities and goals across Online,
Tablet, Mobile and TV
45. Refining and selling the
framework
- Identify core activities and goals across Online,
Tablet, Mobile and TV
- Consolidated CxP and Brand experience models
46. Refining and selling the
framework
- Identify core activities and goals across Online,
Tablet, Mobile and TV
- Consolidated CxP and Brand experience models
- Created channel matrix and then aligned with
customer engagement model
47. Refining and selling the
framework
- Identify core activities and goals across Online,
Tablet, Mobile and TV
- Consolidated CxP and Brand experience models
- Created channel matrix and then aligned with
customer engagement model
- Aligned with corporate strategy (for managers)
52. Take the time to understand how people work
Don’t be afraid to tell management about cultural issues
Use concrete examples early on to explain complex and new ideas
When management yells, it’s the perfect time to listen
Prototyping isn’t just for UI - test your ideas early and often
53. WHY IT IS IMPORTANT TO ESTABLISH
A DESIGN VOCABULARY
54. You can’t make people listen and
understand if you can’t express it clearly
55. You can’t make people listen and
understand if you can’t express it clearly
De ne: Philosophy Principles Guidelines Speci cations Activities Goals
Tasks Features Attributes Rules Actions
56. Multi-channel design framework
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
57. Multi-channel design framework
- Research
Customer lifecycle I want to ...
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 ...
- Design principles
- Activities, Subscribe to user stories Search for something
Find
goals, Create a profile
Show/retrieve Get Cancel
what’s out there something something something fixed something
- Channel engagement matrix
- Best practice examples for
Have my questions Buy Register Browse through Monitor Get an
Sign out
answered something one-off something something usage/cost answer
- Linked detailed design references and
Try
speci cationsbill mobile, tablet, PC, TV
something Pay a to Authenticate
Select
something
Monitor my
usage/cost
Understand
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
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 User goal
goal
Find what’s out there
Find what’s out there
Activity
Activity RESEARCH
RESEARCH PURCHASE
PURCHASE SET-UPSET-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
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
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.
DO DOEnsure relevant content is dominant
Ensure relevant content is dominant
DON’T Make a user sift through unrelated offers, ads and information to get to content
DON’T Make a user sift through unrelated offers, ads and information to get to content
Explanation
Explanation The more options a user is presented with, with, the harder they willand the and the less likelyto
The more options a user is presented the harder they will find it find it less likely they are 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
62. 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
63. 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
must clearly 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 otherelements.
by other elements.
Example
ExampleCitysearch’s business model is advertising based,
Although
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 access to search and nearby
venues without interrupting direct with advertising. 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
64. 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 design DO
DON’T
Ensure relevant content is dominant
Make a user sift through unrelated offers, ads and information to get to content
framework
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
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.
65. User goal
Find what’s out there Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
Primary Principle
Don’t waste myMobileDon’t confuse me with irrelevant options.
Channels time:
Multi-channel design screen space is limited and a
DO Ensure relevant content is dominant
Especially in mobile, where
DON’T Make a user sift through unrelated offers, ads and information to get to content
user’s attention-span is short, the most relevant content
frameworkmust clearly dominate the page, without being drowned out
Explanation The more options a user is presented with, the harder they will find it and the less likely they are to
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
Especiallyclear focus on providing direct access a search and nearby
in mobile, where screen space is limited and to
user’s attention-span is short, the most relevant content
venues without interrupting the flow with advertising. Primary destinations
must clearly dominate the page, without being drowned out
displayed front & centre
by other elements.
Example
Although Citysearch’s Onlinemodel 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 theEach with advertising. a clear goal and
easily distracted. flow web page needs
method to fulfil that goal. Citysearch iPhone app
Example
Online
Online is a multitasking environment indownload and use the Firefox web
Mozilla wants people to which users are
easily distracted. Each web page needs a clear goal and Firefox website
browser. Google ‘Web Browser’ and the
method towill be one of the first results.
fulfil that goal.
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 help the user complete people what the
• Next to it is a product shot to show Call to action is the
their task: Get a web browser.
browser looks like. most prominent feature
• The dominant feature on the page is the call to action
to download Firefox. is a tour and teasers of the major benefits
• Below that
• Next to it is a this web browser, people what the
of product shot to show with deeper information a click
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
TV is primarily a consumption medium and the controls are
TV is primarily a consumption medium and the controls are so the most
generally not designed for deep interaction,
generally relevant content should be as few most away as possible.
not designed for deep interaction, so the clicks
relevant content should be as few clicks away as possible.
Example
71. Framework acceptance factors
- De ne intrinsic / extrinsic factors
- Easily accessed, shared and evolved
- Promotes visibility of use and participation
- Designed to be part of the process
- Embed speci c triggers for speci ed people to
action
72. Elements of a good delivery mechanism for
frameworks
- Control points
- Editable
- Owned and loved
- Used (and you can see the use)
- Gateway to other key resources
- Design libraries
- Code libraries
- Asset libraries
- Brand guidelines
- Live project examples
81. What’s working well?
✓ Focus on activities and goals before task and UI
✓ Teams generating cross-channel user stories before functional
requirements
✓ Improved UX maturity
✓ Increased management awareness and buy-in
82. What needs improvement?
✓ Delivery mechanism
✓ Bringing everyone together
✓ A strategic design roadmap
✓ De ning UX
✓ De ning UX measurements and baselining
✓ Realigning KPIs with actual design practice
✓ Increase focus on people, not artefact --> DESIGN STUDIO
83. Breaking news, small changes can have big effects
✓ Corporate design strategy
✓ Organisational refocus on design practice
✓ KPIs de nition and alignment
✓ Measurement and monitoring
✓ End-to-end service design approach
✓ Extend the multi-channel design framework, including delivery
mechanism and suggested enhancement
84. Don’t forget to find ways to make your
job a little more enjoyable every day
85. THE TEAM
Rod Farmer @rodfarmer
Ash Donaldson @ashdonaldson
Erika Hillemacher @hillemaker
PASSIONATE ABOUT MOBILE?
CONTACT US
Rod Farmer
Director of Research & Strategy
Mobile Experience
e: rodf@mobileexperience.com.au
m: +61433131334