creating multi-channel design frameworks - mobile experience
Post on 23-Sep-2014
12 Views
Preview:
DESCRIPTION
TRANSCRIPT
Produce a multi-channel design framework to align our offerings, improve design quality and offer a simple, seamless customer experience.
Our story today
6 WEEKS
Produce a multi-channel design framework to align our offerings, improve design quality and offer a simple, seamless customer experience.
Our story today
The real brief
What we hope to share with you ...
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
and some challenges achieving behaviour change
GRIST FOR THE MILL
More customer interactions are now digital
What does it take to deliver consistent experiences across channels?
What is a multi-channel design framework?
Aren’t most of our products and services multi-channel anyway? Bulls**t bingo?
Yes! In fact, there are few interactions these days that don’t involve multiple channels ...
Forrester Research 2009
75> 2 CHANNELS OR MORE
%
59% started on a mobile and finished on a PC
Images courtesy of Bryan Rieger, Yiibu
34% started on a PC and finished on a mobile
Images courtesy of Bryan Rieger, Yiibu
“Continuous Experiences are supported by integrated services across devices whose design is true to each device size, context, and purpose”
Move away from “multi-channel design” towards focussing on continuous experiences
Pillar 1: Focus on connectedness
A device appropriate experience, whilst maintaining familiarity
Pillar 2: Make it contextually relevant
Pillar 3: Features are appropriately distributed
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
Pillar 5: Design for activities
“You can’t create behaviour change if you don’t understand motivations and meaning”
“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.”
Well intentioned, statements like these really don’t offer much help. Sorry
Use examples to help evaluate and communicate
Clarify deliverables up front in terms of concrete terms
List the existing touch points associated with the product/service
CREATING A MULTI-CHANNEL DESIGN FRAMEWORK
Situate the problem within a strategic view
VISION
MOTIVATION
ACTIVITY
GOAL
TASK
ACTION
STRATEGY
PRODUCT
FEATURES
UI
USER PERSPECTIVE
BUSINESS PERSPECTIVE
Speed of changefast slow
“You need to understand the metaphor of the system !rst so that you can shape the interactions within it”
Choosing the right level of granularity for your focus is critical
Identify the businesses design maturity
unrecognised
recognised
considered
implemented
integrated
institutionalised
Stages of User Experience Maturity
No awareness of the importance of User Experience
ad-hoc - importance of UX has been recognised; Supporting processes are being put in place
repeatable - Understanding of ‘good quality’ UX; Importance under focus
documented - Users are being involved in processes; Build-up of UX skills and technology
managed - UX is fully integrated; processes & method-ologies are being evolved
cultural - Processes re UX-led; UX is fully embedded in culture
the aim is to evolve along this axis
Scaffold your solutions. What can the client support right now?
Experience Vision
Principle
Guideline
Flow
Spec
Spec
Flow
Guideline
Principle
Guideline Guideline
Flow
Flow
Flow
Flow
Flow
Flow
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Spec
Design documentation produced per individual project
Underlying guidelines, principles and vision covered in this document
Clearly communicate the purpose to different audiences
Executive Management Design Technology 3rd Party Sponsorship
Experience Vision � � � � �
Principles � � � � �
Guidelines � � � � �
Flows � � � � �
Specification � � � � �
Understand your environment
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
ORGANISATIONAL FACTORS THAT INFLUENCE DESIGN
Before anything else, talk to people first
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
“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.”
Fear is your greatest enemy to achieving something great
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
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.
What the teams required
Term User Example Challenge
Vision Motivations Boredom (cognitive pain avoidance)
What drives user needs and behaviours?
Framework Activities I want to get content on my mobile
Where, how and with what do people engage with us?
Principles Goals Find some interesting news What makes for a good News experience?
Guidelines Tasks Browse news feed What is the most effective News layout?
Specifications Interactions Read an article How do I indicate if the content is free or paid?
✓ Multi-channel design
✓ Clear design and requirements
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.
Referencing best practice frameworks
Not the reception we really wanted ...
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
“Build processes and tools to support and extend existing ways of working, rather than setting out in the belief that you can replace them”
A key re-learning towards developing the framework
Refining and selling the framework
Refining and selling the framework
- Identify core activities and goals across Online, Tablet, Mobile and TV
Refining and selling the framework
- Identify core activities and goals across Online, Tablet, Mobile and TV
- Consolidated CxP and Brand experience models
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
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)
Proving the approach using existing, industry tools
Proving the approach using existing, industry tools
Proving the approach using existing, industry tools
Proving the approach using existing, industry tools
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
WHY IT IS IMPORTANT TO ESTABLISH A DESIGN VOCABULARY
You can’t make people listen and understand if you can’t express it clearly
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
Multi-channel design framework
ResearchI want to ...
PurchaseI want to ...
Set-upI want to ...
UseI want to ...
ManageI want to ...
TroubleshootI want to ...
ExitI want to ...
Find what’s out there
Have my questions answered
Try something
out
Discover new stuff
Find something good for me
Compare things
Find something better than what
I have
Subscribe to something
Buy something one-off
Pay a bill
Gift something
Create a profile
Register for something
Authenticate
Personalise
Search for something
Browse through something
Select something
Read/watch/listen to/ look at something
Play with/learn something
Download something
Flag/ favourite/bookmark
something
Show/retrieve something
Monitor usage/cost
Monitor my usage/cost
Change settings/
preferences
Get something fixed
Get an answer
Understand something
Cancel something
Sign out
Multi-channel design framework
ResearchI want to ...
PurchaseI want to ...
Set-upI want to ...
UseI want to ...
ManageI want to ...
TroubleshootI want to ...
ExitI want to ...
Find what’s out there
Have my questions answered
Try something
out
Discover new stuff
Find something good for me
Compare things
Find something better than what
I have
Subscribe to something
Buy something one-off
Pay a bill
Gift something
Create a profile
Register for something
Authenticate
Personalise
Search for something
Browse through something
Select something
Read/watch/listen to/ look at something
Play with/learn something
Download something
Flag/ favourite/bookmark
something
Show/retrieve something
Monitor usage/cost
Monitor my usage/cost
Change settings/
preferences
Get something fixed
Get an answer
Understand something
Cancel something
Sign out
- Customer lifecycle- Design principles- Activities, goals, user stories- Channel engagement matrix- Best practice examples- Linked detailed design references and speci!cations to mobile, tablet, PC, TV
13Optus Experience language v1.0 Index
Find what’s out there
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
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.
Primary Principle
Explanation
Channels
User goal Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
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 by other elements.
ExampleAlthough Citysearch’s business model is advertising based, the homepage has been designed for context of use with a clear focus on providing direct access to search and nearby venues without interrupting the flow with advertising.
Citysearch iPhone app
Primary destinations displayed front & centre
Related suggestions relevant to the users location are positioned prominently but clearly separated from primary destinations
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.
ExampleMozilla wants people to download and use the Firefox web browser. Google ‘Web Browser’ and the Firefox website will be one of the first results.
Product shot to set expectations
Multi-channel design framework
13Optus Experience language v1.0 Index
Find what’s out there
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
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.
Primary Principle
Explanation
Channels
User goal Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
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 by other elements.
ExampleAlthough Citysearch’s business model is advertising based, the homepage has been designed for context of use with a clear focus on providing direct access to search and nearby venues without interrupting the flow with advertising.
Citysearch iPhone app
Primary destinations displayed front & centre
Related suggestions relevant to the users location are positioned prominently but clearly separated from primary destinations
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.
ExampleMozilla wants people to download and use the Firefox web browser. Google ‘Web Browser’ and the Firefox website will be one of the first results.
Product shot to set expectations
Multi-channel design framework
Find what’s out thereUser goal Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
13Optus Experience language v1.0 Index
Find what’s out there
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
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.
Primary Principle
Explanation
Channels
User goal Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
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 by other elements.
ExampleAlthough Citysearch’s business model is advertising based, the homepage has been designed for context of use with a clear focus on providing direct access to search and nearby venues without interrupting the flow with advertising.
Citysearch iPhone app
Primary destinations displayed front & centre
Related suggestions relevant to the users location are positioned prominently but clearly separated from primary destinations
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.
ExampleMozilla wants people to download and use the Firefox web browser. Google ‘Web Browser’ and the Firefox website will be one of the first results.
Product shot to set expectations
Multi-channel design framework
13Optus Experience language v1.0 Index
Find what’s out there
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
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.
Primary Principle
Explanation
Channels
User goal Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
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 by other elements.
ExampleAlthough Citysearch’s business model is advertising based, the homepage has been designed for context of use with a clear focus on providing direct access to search and nearby venues without interrupting the flow with advertising.
Citysearch iPhone app
Primary destinations displayed front & centre
Related suggestions relevant to the users location are positioned prominently but clearly separated from primary destinations
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.
ExampleMozilla wants people to download and use the Firefox web browser. Google ‘Web Browser’ and the Firefox website will be one of the first results.
Product shot to set expectations
Multi-channel design framework
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
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.
Primary Principle
Explanation
13Optus Experience language v1.0 Index
Find what’s out there
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
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.
Primary Principle
Explanation
Channels
User goal Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
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 by other elements.
ExampleAlthough Citysearch’s business model is advertising based, the homepage has been designed for context of use with a clear focus on providing direct access to search and nearby venues without interrupting the flow with advertising.
Citysearch iPhone app
Primary destinations displayed front & centre
Related suggestions relevant to the users location are positioned prominently but clearly separated from primary destinations
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.
ExampleMozilla wants people to download and use the Firefox web browser. Google ‘Web Browser’ and the Firefox website will be one of the first results.
Product shot to set expectations
Multi-channel design framework
13Optus Experience language v1.0 Index
Find what’s out there
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
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.
Primary Principle
Explanation
Channels
User goal Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
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 by other elements.
ExampleAlthough Citysearch’s business model is advertising based, the homepage has been designed for context of use with a clear focus on providing direct access to search and nearby venues without interrupting the flow with advertising.
Citysearch iPhone app
Primary destinations displayed front & centre
Related suggestions relevant to the users location are positioned prominently but clearly separated from primary destinations
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.
ExampleMozilla wants people to download and use the Firefox web browser. Google ‘Web Browser’ and the Firefox website will be one of the first results.
Product shot to set expectations
Multi-channel design framework
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 by other elements.
ExampleAlthough Citysearch’s business model is advertising based, the homepage has been designed for context of use with a clear focus on providing direct access to search and nearby venues without interrupting the flow with advertising.
Citysearch iPhone app
Primary destinations displayed front & centre
Related suggestions relevant to the users location are positioned prominently but clearly separated from primary destinations
Find what’s out there
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
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.
Primary Principle
Explanation
Channels
User goal Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
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 by other elements.
ExampleAlthough Citysearch’s business model is advertising based, the homepage has been designed for context of use with a clear focus on providing direct access to search and nearby venues without interrupting the flow with advertising.
Citysearch iPhone app
Primary destinations displayed front & centre
Related suggestions relevant to the users location are positioned prominently but clearly separated from primary destinations
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.
ExampleMozilla wants people to download and use the Firefox web browser. Google ‘Web Browser’ and the Firefox website will be one of the first results.
• The website is designed to help the user complete their task: Get a web browser.
• 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.
Mozilla Firefox download page
Product shot to set expectations
Tour & benefits support the decision to download
Call to action is the most prominent feature
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.
Example
Multi-channel design framework
Find what’s out there
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
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.
Primary Principle
Explanation
Channels
User goal Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT
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 by other elements.
ExampleAlthough Citysearch’s business model is advertising based, the homepage has been designed for context of use with a clear focus on providing direct access to search and nearby venues without interrupting the flow with advertising.
Citysearch iPhone app
Primary destinations displayed front & centre
Related suggestions relevant to the users location are positioned prominently but clearly separated from primary destinations
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.
ExampleMozilla wants people to download and use the Firefox web browser. Google ‘Web Browser’ and the Firefox website will be one of the first results.
• The website is designed to help the user complete their task: Get a web browser.
• 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.
Mozilla Firefox download page
Product shot to set expectations
Tour & benefits support the decision to download
Call to action is the most prominent feature
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.
Example
Multi-channel design framework
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 by other elements.
ExampleAlthough Citysearch’s business model is advertising based, the homepage has been designed for context of use with a clear focus on providing direct access to search and nearby venues without interrupting the flow with advertising.
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.
ExampleMozilla wants people to download and use the Firefox web browser. Google ‘Web Browser’ and the Firefox website will be one of the first results.
• The website is designed to help the user complete their task: Get a web browser.
• 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.
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.
Example
Hundred of examples and references
Create a shared vocabulary
Align your approach with other business units
Silos exist - provide a shared vision to break down the walls
IMPACT OF THE MULTI-CHANNEL DESIGN FRAMEWORK
Choosing the right delivery mechanism is critical
Framework acceptance factors
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
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
Bringing it all together: 1ft, 2ft, 10ft
Bringing it all together: 1ft, 2ft, 10ft
Bringing it all together: 1ft, 2ft, 10ft
- Connected- Contextual- Distributed- Conversational- Activity-oriented
The evolved process, still a little chaotic
The evolved process, still a little chaotic
- Design philosophy- Cross-channel user research -> experience vision- Channel principles and guidelines- User stories (activities, goals) -> channel tasks- Walkthroughs: Principle-based best-practice screens- Global navigation, channel "ows- Discourse mapping: Private, Public, Hybrid- High-level interaction models (each references the other)- Detailed channel designs, cross-channel weekly reviews
The evolved process, still a little chaotic
Figure out the right delivery mechanism to communicate with your teams
Budget for change management
WHERE ARE WE NOW?
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
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
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
Don’t forget to find ways to make your job a little more enjoyable every day
THE TEAM
Rod Farmer @rodfarmerAsh Donaldson @ashdonaldsonErika Hillemacher @hillemaker
PASSIONATE ABOUT MOBILE? CONTACT US
Rod FarmerDirector of Research & StrategyMobile Experiencee: rodf@mobileexperience.com.aum: +61433131334
top related