creating multi-channel design frameworks - mobile experience

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


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



- Consolidated CxP and Brand experience models



- Consolidated CxP and Brand experience models- Created channel matrix and then aligned with customer engagement model



- 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

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


ResearchI want to ...

PurchaseI want to ...

Set-upI want to ...

UseI want to ...

ManageI want to ...

TroubleshootI want to ...

ExitI want to ...


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


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






Primary Principle

Explanation

Channels


Mobile






Online





Find what’s out thereUser goal Activity RESEARCH PURCHASE SET-UP USE MANAGE TROUBLESHOOT EXIT





Primary Principle

Explanation

Channels


Mobile






Online









Primary Principle

Explanation

Channels


Mobile






Online







Primary Principle

Explanation





Primary Principle

Explanation

Channels


Mobile






Online









Primary Principle

Explanation

Channels


Mobile






Online





Channels Mobile









Primary Principle

Explanation

Channels


Mobile






Online



• 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


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





Primary Principle

Explanation

Channels


Mobile






Online







Mozilla Firefox download page


Tour & benefits support the decision to download

Call to action is the most prominent feature

TV


Example


Channels Mobile



Online







TV


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

- Connected- Contextual- Distributed- Conversational- Activity-oriented

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

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: [email protected]: +61433131334

creating multi-channel design frameworks - mobile experience

Design

usagecostchange

providing

primary destinations

centrerelated

created channel

brand experience

google web

ensure relevant