leveraging cx / ux / ui to optimise brand experiences

LEVERAGING CX / UX / UI TO OPTIMISE BRAND EXPERIENCES

JUNE 2017

in/melissawilfley/

Hello! Feel free to contact me for questions at

melissa.wilfley@possible.com or through in/melissawilfley/

Today we're going to focus on four key areas for leveraging the best CX / UX / UI:

4DESIGNING FOR CUSTOMER FIRST 2

31FINDING THE T

IN CX / UX / UI

STRATEGIES FOR MOBILE VS. WEB

BEST PRACTICES FOR AWESOME EXPERIENCES

FINDING THE “ T “ IN CX, UX AND UI 1

CX = Customer Experience

UX = User Experience

UI = User Interface

In order to leverage CX / UX / UI you need to know the difference

There are a lot of titles and definitions today

Experience Design

Service Design

Experiential Design

Interaction Design

Content

UX Design

CX Design

Digital Service Design

UI Design

Visual Design Creative

HCI Design

Graphic Design

IxD

UCD

XD

Which can be very confusing when trying to learn, hire an agency or build a team

Customer Experience

Human Factors

User Experience

A big part of this is due to the evolving nature of technology merging online

channels with offline.

Like Amazon Go Just Walk Out Technology

BRICKS & CLICKS

Source: Amazon Go

Like Google Home

SMART HOME DEVICES

Source: Google Home

Like Fitbit and their health and fitness trackers

WEARABLES

Source: Fitbit

Like Utilities and Branchless Banks

eSERVICES

Source: Con Edison of New York, Ally Bank

Let’s start with what is UX and UI

UI

UI ≠ UX

UX

ALL PART OF THE USER EXPERIENCE

Source: POSSIBLE

User Experience (UX) User Interface (UI) ü  User Research ü  Personas ü  Customer Journey Mapping ü  User Stories / Scenarios ü  Sitemaps ü  User flows ü  Annotated Sketches &

Wireframes ü  User Testing

ü  Visual Design ü  Colors ü  Screen Mocks ü  Typography ü  Layouts aka ‘The Grid’ ü  Brand elements

§  Interaction Design, e.g. behavior

§ Prototypes

SHARED OFTEN

Let’s see these UI / UX differences in action

Source: POSSIBLE

Source: POSSIBLE

UX Design

Source: POSSIBLE

Source: POSSIBLE

Source: POSSIBLE

Source: POSSIBLE

Usually in a project you start with UX followed by UI, even in Agile.

Both are equally important and

essential for success. You can’t do one without the other.

So now let’s talk about CX

CX is a relatively new term in the last few years particularly with the increased

importance of digital business transformation.

Source: UXPin

It is important to note that UX is most definitely a part of CX, but not all CX is UX.

CX

UX

Customer Service

Advertising

Brand Reputation

Sales Enablement

Pricing Fairness

Product Delivery

Usability

Interaction Design

Visual Design

Information Architecture

Content Strategy

User Research

User Testing

CX ≠ UX

Forrester Research defines customer experience as: “How customers perceive their interactions with your company.”

CUSTOMER EXPERIENCE

CUSTOMER FOCUSED LEADERSHIP

UNDERSTANDING YOUR CUSTOMER

DESIGN THE EXPERIENCE

EMPOWER THE FRONT LINE

METRICS THAT MATTER

FEEDBACK DRIVES CONTINUOUS

IMPROVEMENT UX

UX UX

UX / UI

Source: POSSIBLE

CX touches across all of these components and in a CX project you are generally working on more than one of

these at a time.

PRODUCT EXPERIENCE

COMMERCE SERVICES CRM BRAND EXPERIENCE

Source: POSSIBLE

So how does CX / UX / UI fit together?

Source: POSSIBLE

By forming a “ T “ across the organization CONNECTING EVERYTHING

SPECIALISTS WITH SPECIFIC FOCUS

CX, UX and UI are different but complimentary. One is not more important than the other.

KEY TAKEAWAYS

Depending on your organization's structure, complexity of offering, size and investment these

roles may be blended or separate.

KEY TAKEAWAYS

This is a snapshot of today. As our industry continues to evolve these definitions will also

evolve over the next 5 years.

KEY TAKEAWAYS

Not one person owns the customer, everyone in your organization should own the customer and

be customer obsessed.

KEY TAKEAWAYS

HOW TO DESIGN FOR CUSTOMER FIRST 2

Designing for customer first requires a user-centered deign (UCD) process

OUTSIDE-IN

INSIDE-OUT

DRIVEN BY CUSTOMERS PERCEPTIONS OF

RELATIONSHIP AND VALUE.

FEATURES AND CONTENT IS FOCUSED ON CUSTOMER

OUTCOMES.

DRIVEN BY COMPANY PERCEPTION OF RELATIONSHIP AND VALUE FEATURES AND CONTENT IS DRIVEN BY PRODUCT PERSPECTIVE.

One that uses an outside-in strategy

If you don’t speak to your customers your not using UCD or an outside-in approach.

Why is this important?

By 2020 customer experience will overtake price and product as the key

brand differentiator.

Source: Walker Customer 2020 Study

There’s always time to speak with your customers regardless of project scope, audience type or

turnaround

Friends & Family

BYO Customer

Panels

Street Interviews

Sales & Support Channels

To help you implement a UCD process in your organization you need a UCD

framework.

Your UCD framework should: ü Act as a guide ü Be easy to understand by everyone in your

organization to support horizontality ü Can scale across all your different projects, teams,

and processes e.g. Agile, 4Ds

DOES IT WORK?

LOOK-IN/OUT POV

IDEATE

CR

EA

TE

UNDERSTAND CONCEPT DELIVER

We gain understanding and insight to the problem we are trying to solve or opportunity

we’re trying to uncover.

Develop a POV that answers both the business and user

needs.

Generate ideas and concepts quickly and iteratively in varying degrees of fidelity that meet the identified opportunity spaces.

Validate concepts and further

refine.

Finalize design, produce and deliver required

documentation, guides and assets.

Scale solution and

continuously improve experience.

IMPLEMENT IMPROVE

Source: POSSIBLE

UNDERSTAND

CONCEPT

DELIVER

DOES IT WORK?

In practice our framework works like an ‘onion’,

cyclical and with layers.

Source: POSSIBLE

Use an outside-in approach and ensure you talk to your customer.

Talking to some customers is way better than none.

KEY TAKEAWAYS

KEY TAKEAWAYS

Find the right UCD framework for your organization to ensure it gets implemented and used for project

estimations, planning, etc..

Mine is just an example. If you google UCD process you’ll get 607,000 results which can help you find or

create the perfect one.

STRATEGIES FOR MOBILE VS. WEB 3

Let’s talk design strategies

RESPONSIVE DESIGN

NATIVE APPS

ADAPTIVE DESIGN

INSTANT APPS

MOBILE FIRST MOBILE ONLY

vs

vs

vs

Responsive design is the norm today.

Coined in 2011, it’s an assumption with design teams unless you have a specific reason not to.

Responsive design is when you build one single web experience that is able to fluidly

adjust for multiple screen sizes.

PROS

ü  Uniform & seamless ü  SEO friendly ü  Often easier, less expensive to

implement

✗  Less screen size design control ✗  Less context specific journey

design ✗  Longer mobile download times

CONS

RESPONSIVE DESIGN

Adaptive design, also coined in 2011, is when you design multiple layouts based on display break-points. The layout displayed is based on

the size of the screen.

You use adaptive design when you have a specific context that needs to be addressed

differently across devices such as geo-location, speed of site, content, utility, etc.

Source: Amazon

AMAZON

Amazon increased speed of their site by 40% by

using an adaptive strategy.

Mobile users have the opportunity to use the

"Amazon.com full site" on mobile devices as well.

PROS

ü  Design for context ü  Build for quicker speeds for

mobile without sacrificing desktop experience

✗  Higher cost, multiple experiences to develop and maintain

✗  A bit more planning with SEO due to duplicate content

CONS

ADAPTIVE DESIGN

Apps are not dead.

Native apps have seen a boom in 2016 across downloads, time spent and revenue.

App downloads increased 15% YOY (13 billion) worldwide with China contributing to 80% growth of iOS downloads and becoming the

largest revenue generator for iOS.

Revenue paid to developers increased by 40% globally

Source: App Annie 2016 Retrospective

Time spent in apps increased by 25% (roughly 2 hours on average).

In China games are leading, other markets are seeing more download growth in non-game categories such as Productivity, Photo & Video,

Tools and Social.

Source: App Annie 2016 Retrospective

Source: App Annie 2016 Retrospective

But…

The typical app loses more than 75% of its initial users within 3 days of downloading.

In a month that figure climbs to 90%

Source: Andrew Chen, New data shows losing 80% of mobile users is normal, and why the best apps do better

UX Sucks Crashes Similar Apps Are Better

No Continuous Updates / Release

Too Much/Too Little Contact

Battery and Bandwidth Hog Not Secure

Poor Research, Strategy & Market

Execution

Why apps fail

You’ve got the $$ and commitment

to support and grow your app

Need location

base or navigational

elements

Need to deliver information in

real-time

Needs to work well across many devices, internet

speeds and/or offline

Mobile is a core differentiator for

your offering

Need access to features native to

your phone like notifications or

sensor info

Capable of executing a design that’s ready to win

the market

You’ve done the research to show your users need

an app

When you should build an app

Source: App vs Website.com; POSSIBLE

Source: Airbnb

AIRBNB

Airbnb discovered the majority of images shared between hosts and guests in Airbnb messages were photos showing how to

check-in.

Created a tool that allows guests to access step-by-step visual check-in instructions in their app, accessible even without

internet access

Android Instant Apps is about to change the app and web game.

Announced last year and just released to all

developers to use last month, this is an area for us all to watch.

Android Instant Apps allows Android users to run apps instantly, without installation or log-in, by

just selecting a URL.

How? They’re smaller subsets of your app that allow single pages or features of your app to be

downloaded and accessed on demand.

Source: Android Instant App

B&H PHOTO

B&H Photo was one of the first brands to partner with Google’s

Instant Apps.

They built a case for a user being able to search for an item in Google and then, by simply

tapping the link that appears in the results page, go directly to

that item on B&H’s app and purchase it

PROS

ü  No install or log-in to use ü  If user loves, can download app ü  Provides native functionality for

specific features being accessed ü  Save space – can use without

download ü  Easy to share

✗  Just launched ✗  Development learning curve ✗  User must opt-in under

settings ✗  User must have a device

running Android 6.0 +

CONS

ANDROID INSTANT APPS

Mobile First, coined in 2009, is about giving priority for designing, developing and

marketing the mobile web experience first over desktop web design.

It’s not designing both at the same time.

In order to know if you should use a Mobile First approach you need to first know your

users’ needs and their journeys.

If the majority of your users are desktop or accomplish their key tasks across multiple devices you need to question why you would push for mobile first vs. journey-driven design.

Source: DoctorBase, now Kareo DoctorBase

DOCTORBASE

DoctorBase is a patient-doctor communications service.

They switched their strategy from a mobile app to mobile first when

they realised the effort to download an app was too great for most patients who wanted to

only message their doctor 3-4 times a year at most.

PROS

ü  Can be blended with responsive or adaptive design strategies

ü  Helps prioritize content and simplify flows

✗  Doesn’t account for journeys outside of mobile

✗  Doesn’t account for users switching device mid-task

✗  Doesn’t account for apps

CONS

MOBILE FIRST

A Mobile-only strategy is one that is built uniquely around mobile devices where

actions are carried out exclusively or nearly exclusively via a mobile application.

It’s usually used when there is a primary action your user can achieve via mobile better than

any other channel.

These brands are some of the early and most successful adopters of mobile-only. It’s

interesting to note they all now have some sort of desktop web experience, though it’s limited.

WeChat Instagram

Uber Tinder

Source: POSSIBLE, UK shopping stat from Smart Insights ecommerce conversion rate 03/17

ADIDAS GLITCH

Adidas rolled out it’s new football boots on an invite-only basis that could only be purchased through

their Glitch app.

It’s a community and ecommerce mobile-first strategy that led to a

75% conversion from the first 100 invites.

The average cart conversion in the UK where this launched is

roughly 4%.

Source: Mobike

MOBIKE

China’s Mobike is the world’s first cashless and station-free bike sharing platform that is solving the short distance connectivity

problem in cities.

Created an app for In-Bike GPS, Mobike said it operates more

than five million bikes, and its 100 million registered users take 25

million trips per day at peak times. Mobike is 2 years old.

PROS

ü  One dedicated channel to focus all your effort

ü  Requires strong word-of-mouth from your targeted audience and engagement from a community

ü  Requires clearly defined customer experience strategy and user need

✗  Doesn’t account for journeys outside of mobile

✗  Doesn’t account for users switching device mid-task

CONS

MOBILE ONLY

BEST PRACTICES FOR AWESOME EXPRIENCES 4

CREATE AND USE A DESIGN LANGUAGE

Source: Airbnb

ü  Design automation ü  Requires flexible, modular design ü  Design directly into HTML vs.

Photoshop saving time and $$ ü  Allows for constant optimisation

and testing ü  Allows for quick collaboration

across stakeholders ü  Is constantly evolving ü  Let’s your resources focus on the

heavy lifting of the research and strategy

IT’S ALMOST 2020, DESIGN BETTER FORMS

Source: UXDesign.cc; ROI DNA Reduce Cart Abandonment Using Form Design Principles

Roughly 67% abandon their cart before checkout. 10% bail due to an overlong checkout process. ü  Make sure it’s mobile friendly ü  Show progress indication ü  Use inline validation after user

inputs ü  Don’t hide basic helper text ü  Use field length as an affordance ü  Group related fields together ü  Get rid of the required field

asterisk and identify optional ü  Make them accessible!

DON’T FORGET MICRO-INTERACTIONS / ANIMATIONS

Source: Point Vision via Dribbble

ü  Not just for apps ü  Provide visual affordance that can

help with conversion ü  Can increase customer perception

to support your brand pillars – innovative, fun, etc.

ü  Doesn’t have to be a performance hog – reuse, reuse, reuse!

ü  Plan for up-front in the UX/UI phase, don’t leave for the end as it will be the first thing that gets cut to meet deadlines from development

CREATE JOURNEYS THAT SHOW THE UGLY AND REAL

Source: Gabriel Conte Snapchat

ü  Life is not perfect, your journeys should not be either

ü  Taking real scenarios such as tantrum while shopping or jet lag while travelling helps you ideate and create better solutions to meet your key KPIs as well as innovate against latent needs.

ü  Helps match out-of-category partnership opportunities

ü  Provides a strong blueprint of customer pain points and builds empathy – everyone on your team should want to truly help the personas you’re designing for

KNOW UNIVERSAL TRUTHS AND REGIONAL DIFFERENCES ü  Experiences for all people are

comprised of Tasks, Context, Motivation, and Feelings

ü  Universal truths: most people like to save money, get a deal, not be hassled, make it easy

ü  For localisation take into context: language, culture, colloquialisms, connectivity, popular culture, market maturation, and economy.

Source: Chinese web design patterns: how and why they’re different (Chui Chui Tan); Campaign, How to design user experience for Chinese sensibilities 01/2016

Taobao and eBay seem very similar on the surface, but their value propositions are different. eBay’s auction model was about outbidding other buyers, Taobao’s value proposition is where you can get things at the lowest cost.”

KNOW UNIVERSAL TRUTHS AND REGIONAL DIFFERENCES

Source: Chinese web design patterns: how and why they’re different (Chui Chui Tan)

2011 2017

KNOW UNIVERSAL TRUTHS AND REGIONAL DIFFERENCES

Source: Alipay

biggest considerations for localisation and digital are:

ü  Content (tonality, story and image) ü  Fonts (typography choices are limited

for different languages)

ü  Device Usage ü  App Usage – e.g. transaction over

advertising, WeChat vs. Facebook

ü  Connectivity and infrastructure, ü  Service channels and product offering

– haggle price vs. not; ü  Payments – mobile wallets ü  Advertising & Piracy – largest mobile

ad blockers Indonesia (58%), followed by India (28%) – US is just 1%!

CONVERSATIONAL UI

Source: How to get conversational UI right, VentureBeat 05/17

ü  Increasingly relevant with the rise of bots, machine learning and AI

ü  It must actually be conversational using natural language and pace

ü  It must be sentient and understand how the user is feeling, e.g. customer sounds angry

ü  It must maintain context and history

ü  It must be accurate and consistent to gain trust

ü  It must understand and respond to accent, spoken turn timing and dialect

ü  Can be through text or voice

Last 10 years were about building a mobile first world. But in the next 10 years, the shift will be towards a world that is AI-first, a world where computing becomes universally available — be it at home, at work, in the car, or on the go — and interacting with all of these surfaces becomes much more natural, intuitive, and intelligent. ~Google, Sundar Pichai

THANK YOU!

MELISSA WILFLEY EXPEIENCE DESIGN DIRECTOR / APAC MELISSA.WILFLEY@POSSIBLE.COM In/melissawilfley