Creating multi-channel design frameworks - Mobile Experience

Our story todayProduce a multi-channel design framework toalign our offerings, improve design quality andoffer a simple, seamless customer experience.

Our story todayProduce a multi-channel design framework toalign our offerings, improve design quality andoffer a simple, seamless customer experience.6 WEEKS

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 achievingbehaviour change

GRIST FOR THE MILL

What does it take to deliverconsistent experiences acrosschannels?

What is a multi-channeldesign framework? Aren’t most of our products and services multi-channel anyway? Bulls**t bingo?

Yes! In fact, there are few 75interactions these days that don’tinvolve multiple channels ... % > 2 CHANNELS OR MORE Forrester Research 2009

59% started on a mobile andfinished on a PCImages courtesy of Bryan Rieger, Yiibu

34% started on a PC andfinished on a mobileImages courtesy of Bryan Rieger, Yiibu

Move away from “multi-channeldesign” towards focussing oncontinuous experiences “Continuous Experiences are supported by integrated services across devices whose design is true to each device size, context, and purpose”

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”

Well intentioned, statements likethese 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.”

Clarify deliverables up front in terms of concrete termsList the existing touch points associated with the product/serviceUse examples to help evaluate and communicate

CREATING A MULTI-CHANNELDESIGN FRAMEWORK

Situate the problem within astrategic view USER PERSPECTIVE MOTIVATION ACTIVITY GOAL TASK ACTION fast Speed of change slow UI FEATURES PRODUCT STRATEGY VISION BUSINESS PERSPECTIVE

Choosing the right level ofgranularity for your focus is critical “You need to understand the metaphor of the system rst so that you can shape the interactions within it”

Identify the businesses designmaturity 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

Scaffold your solutions. Whatcan 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

Clearly communicate thepurpose to different audiences Executive Management Design Technology 3rd Party Sponsorship Experience Vision Principles Guidelines Flows Speciﬁcation

Understand your environment

Frame the problem within a strategic viewMatch processes and artefacts to your organisations maturityIdentify who will be using your deliverables, and howLook at past efforts and outcome, and use where possible

ORGANISATIONAL FACTORS THATINFLUENCE 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

Fear is your greatest enemy toachieving 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.”

Fear is your greatest enemy toachieving 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 problemTerm Articulates Definition ExampleVision Intent What we stand for. We treat our customers with respect ✓ Correct experienceFramework 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; Afﬁrmative/Forward is right ✓ Coherent feel (examples)Speciﬁcations Detail What we end up doing. Continue button to the right ✓ Consistent lookInsight: 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 requiredTerm User Example Challenge Boredom What drives user needs andVision 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 NewsPrinciples Goals Find some interesting news experience? ✓ Clear design and requirements What is the most effective NewsGuidelines Tasks Browse news feed layout? How do I indicate if the contentSpeciﬁcations 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 shouldengage users effectively. Similarly, they reported having a poor understanding of what key goals/needs theyneeded to satisfy within their designs. Product Managers looked to UX. UX, Producers and Visual Design arelooking 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

A key re-learning towardsdeveloping 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”

Refining and selling theframework

Refining and selling theframework- Identify core activities and goals across Online, Tablet, Mobile and TV

Refining and selling theframework- Identify core activities and goals across Online, Tablet, Mobile and TV- Consolidated CxP and Brand experience models

Refining and selling theframework- 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 theframework- 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 usingexisting, industry tools

Take the time to understand how people workDon’t be afraid to tell management about cultural issuesUse concrete examples early on to explain complex and new ideasWhen management yells, it’s the perfect time to listenPrototyping isn’t just for UI - test your ideas early and often

WHY IT IS IMPORTANT TO ESTABLISHA DESIGN VOCABULARY

You can’t make people listen andunderstand if you can’t express it clearly

You can’t make people listen andunderstand if you can’t express it clearlyDe ne: Philosophy Principles Guidelines Speci cations Activities GoalsTasks Features Attributes Rules Actions

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 somethingHave 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 somethingFind something Flag/better than what favourite/bookmark I have something

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 forHave 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 somethingFind something Flag/better than what favourite/bookmark I have something

Multi-channel design frameworkOptus 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 ﬁnd 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

Multi-channel design frameworkOptus 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 ﬁnd 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

Multi-channel design frameworkOptus 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 ﬁnd it ﬁnd 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

Multi-channel design frameworkOptus 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 ﬁnd 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

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 contentframework Explanation The more options a user is presented with, the harder they will ﬁnd 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 beneﬁts 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.

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 contentframeworkmust 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

Hundred of examples andreferences

Create a shared vocabularyAlign your approach with other business unitsSilos exist - provide a shared vision to break down the walls

IMPACT OF THE MULTI-CHANNELDESIGN FRAMEWORK

Choosing the right deliverymechanism 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 forframeworks- 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 - 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 teamsBudget 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 yourjob a little more enjoyable every day

THE TEAMRod Farmer @rodfarmerAsh Donaldson @ashdonaldsonErika Hillemacher @hillemakerPASSIONATE ABOUT MOBILE?CONTACT USRod FarmerDirector of Research & StrategyMobile Experiencee: rodf@mobileexperience.com.aum: +61433131334

http://uxaustralia.com.au	279
http://www.techgig.com	190
http://www.scoop.it	87
http://lanyrd.com	30
http://serve4impact.com	23
http://drizzlin.com	2
http://twitter.com	2
http://www.slideshare.net	1
http://us-w1.rockmelt.com	1
https://twitter.com	1
http://zootool.com	1
http://www.m.techgig.com	1

Creating multi-channel design frameworks - Mobile Experience

by Rod Farmer on Aug 26, 2011

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 618

Statistics

Creating multi-channel design frameworks - Mobile Experience Presentation Transcript