![Page 1: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/1.jpg)
![Page 2: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/2.jpg)
![Page 3: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/3.jpg)
![Page 4: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/4.jpg)
Produce a multi-channel design framework to align our offerings, improve design quality and offer a simple, seamless customer experience.
Our story today
![Page 5: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/5.jpg)
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
![Page 6: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/6.jpg)
The real brief
![Page 7: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/7.jpg)
What we hope to share with you ...
![Page 8: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/8.jpg)
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
![Page 9: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/9.jpg)
and some challenges achieving behaviour change
![Page 10: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/10.jpg)
GRIST FOR THE MILL
![Page 11: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/11.jpg)
More customer interactions are now digital
What does it take to deliver consistent experiences across channels?
![Page 12: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/12.jpg)
What is a multi-channel design framework?
Aren’t most of our products and services multi-channel anyway? Bulls**t bingo?
![Page 13: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/13.jpg)
Yes! In fact, there are few interactions these days that don’t involve multiple channels ...
Forrester Research 2009
75> 2 CHANNELS OR MORE
%
![Page 14: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/14.jpg)
59% started on a mobile and finished on a PC
Images courtesy of Bryan Rieger, Yiibu
![Page 15: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/15.jpg)
34% started on a PC and finished on a mobile
Images courtesy of Bryan Rieger, Yiibu
![Page 16: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/16.jpg)
“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
![Page 17: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/17.jpg)
Pillar 1: Focus on connectedness
A device appropriate experience, whilst maintaining familiarity
![Page 18: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/18.jpg)
Pillar 2: Make it contextually relevant
![Page 19: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/19.jpg)
Pillar 3: Features are appropriately distributed
![Page 20: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/20.jpg)
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
![Page 21: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/21.jpg)
Pillar 5: Design for activities
“You can’t create behaviour change if you don’t understand motivations and meaning”
![Page 22: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/22.jpg)
“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
![Page 23: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/23.jpg)
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
![Page 24: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/24.jpg)
CREATING A MULTI-CHANNEL DESIGN FRAMEWORK
![Page 25: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/25.jpg)
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
![Page 26: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/26.jpg)
“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
![Page 27: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/27.jpg)
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
![Page 28: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/28.jpg)
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
![Page 29: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/29.jpg)
Clearly communicate the purpose to different audiences
Executive Management Design Technology 3rd Party Sponsorship
Experience Vision � � � � �
Principles � � � � �
Guidelines � � � � �
Flows � � � � �
Specification � � � � �
![Page 30: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/30.jpg)
Understand your environment
![Page 31: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/31.jpg)
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
![Page 32: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/32.jpg)
ORGANISATIONAL FACTORS THAT INFLUENCE DESIGN
![Page 33: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/33.jpg)
Before anything else, talk to people first
![Page 34: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/34.jpg)
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
![Page 35: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/35.jpg)
“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
![Page 36: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/36.jpg)
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
![Page 37: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/37.jpg)
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.
![Page 38: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/38.jpg)
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.
![Page 39: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/39.jpg)
Referencing best practice frameworks
![Page 40: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/40.jpg)
Not the reception we really wanted ...
![Page 41: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/41.jpg)
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
![Page 42: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/42.jpg)
“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
![Page 43: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/43.jpg)
Refining and selling the framework
![Page 44: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/44.jpg)
Refining and selling the framework
- Identify core activities and goals across Online, Tablet, Mobile and TV
![Page 45: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/45.jpg)
Refining and selling the framework
- Identify core activities and goals across Online, Tablet, Mobile and TV
- Consolidated CxP and Brand experience models
![Page 46: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/46.jpg)
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
![Page 47: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/47.jpg)
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)
![Page 48: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/48.jpg)
Proving the approach using existing, industry tools
![Page 49: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/49.jpg)
Proving the approach using existing, industry tools
![Page 50: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/50.jpg)
Proving the approach using existing, industry tools
![Page 51: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/51.jpg)
Proving the approach using existing, industry tools
![Page 52: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/52.jpg)
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
![Page 53: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/53.jpg)
WHY IT IS IMPORTANT TO ESTABLISH A DESIGN VOCABULARY
![Page 54: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/54.jpg)
You can’t make people listen and understand if you can’t express it clearly
![Page 55: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/55.jpg)
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
![Page 56: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/56.jpg)
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
![Page 57: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/57.jpg)
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
![Page 58: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/58.jpg)
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
![Page 59: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/59.jpg)
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
![Page 60: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/60.jpg)
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
![Page 61: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/61.jpg)
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
![Page 62: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/62.jpg)
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
![Page 63: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/63.jpg)
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
![Page 64: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/64.jpg)
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
![Page 65: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/65.jpg)
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
![Page 66: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/66.jpg)
Hundred of examples and references
![Page 67: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/67.jpg)
Create a shared vocabulary
Align your approach with other business units
Silos exist - provide a shared vision to break down the walls
![Page 68: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/68.jpg)
IMPACT OF THE MULTI-CHANNEL DESIGN FRAMEWORK
![Page 69: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/69.jpg)
Choosing the right delivery mechanism is critical
![Page 70: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/70.jpg)
Framework acceptance factors
![Page 71: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/71.jpg)
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
![Page 72: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/72.jpg)
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
![Page 73: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/73.jpg)
Bringing it all together: 1ft, 2ft, 10ft
![Page 74: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/74.jpg)
Bringing it all together: 1ft, 2ft, 10ft
![Page 75: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/75.jpg)
Bringing it all together: 1ft, 2ft, 10ft
- Connected- Contextual- Distributed- Conversational- Activity-oriented
![Page 76: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/76.jpg)
The evolved process, still a little chaotic
![Page 77: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/77.jpg)
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
![Page 78: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/78.jpg)
The evolved process, still a little chaotic
![Page 79: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/79.jpg)
Figure out the right delivery mechanism to communicate with your teams
Budget for change management
![Page 80: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/80.jpg)
WHERE ARE WE NOW?
![Page 81: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/81.jpg)
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
![Page 82: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/82.jpg)
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
![Page 83: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/83.jpg)
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
![Page 84: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/84.jpg)
Don’t forget to find ways to make your job a little more enjoyable every day
![Page 85: Creating multi-channel design frameworks - Mobile Experience](https://reader033.vdocument.in/reader033/viewer/2022051322/5421522e7bef0a060c8b5ee6/html5/thumbnails/85.jpg)
THE TEAM
Rod Farmer @rodfarmerAsh Donaldson @ashdonaldsonErika Hillemacher @hillemaker
PASSIONATE ABOUT MOBILE? CONTACT US
Rod FarmerDirector of Research & StrategyMobile Experiencee: [email protected]: +61433131334