leveraging cx / ux / ui to optimise brand experiences
TRANSCRIPT
LEVERAGING CX / UX / UI TO OPTIMISE BRAND EXPERIENCES
JUNE 2017
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
