Talk presented at 2017 Digital Experience Strategy conference in Singapore. Presentation covers 1) Finding the 'T' in CX, UX, UI, 2) How to design with the customer first, 3) Common strategies for mobile vs. web and 4) Best practices to include East vs. West and conversational UI.

1. LEVERAGING CX / UX / UI
TO OPTIMISE BRAND EXPERIENCES
JUNE 2017
in/melissawilfley/

2. Hello! Feel free to contact me
for questions at
melissa.wilfley@possible.com or
through in/melissawilfley/

3. Today we're going to focus on four key areas
for leveraging the best CX / UX / UI:
4
DESIGNING FOR
CUSTOMER FIRST
2
3
1FINDING THE T
IN CX / UX / UI
STRATEGIES FOR
MOBILE VS. WEB
BEST PRACTICES
FOR AWESOME
EXPERIENCES

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

5. CX = Customer Experience
UX = User Experience
UI = User Interface

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

7. There are a lot of titles and definitions
today

8. ExperienceDesign
ServiceDesign
ExperientialDesign
InteractionDesign
Content
UXDesign
CXDesign
DigitalServiceDesign
UIDesign
VisualDesign
Creative
HCIDesign
Graphic Design
IxD
UCD
XD
Which can be very confusingwhen trying
to learn, hire an agency or build a team
CustomerExperience
HumanFactors
UserExperience

9. A big part of this is due to the evolving
nature of technology merging online
channels with offline.

10. Like Amazon Go
Just Walk Out Technology
BRICKS & CLICKS
Source: Amazon Go

11. Like Google Home
SMART HOME
DEVICES
Source: Google Home

12. Like Fitbit and their health
and fitness trackers
WEARABLES
Source: Fitbit

13. Like Utilities and Branchless
Banks
eSERVICES
Source: Con Edison of New York, Ally Bank

14. Let’s start withwhat is UX and UI

15. UI
UI ≠ UX
UX
ALLPARTOFTHE
USEREXPERIENCE
Source: POSSIBLE

16. 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
SHAREDOFTEN

17. Let’s see theseUI / UX differences in
action

18. Source: POSSIBLE

19. Source: POSSIBLE

20. Source: POSSIBLE

21. Source: POSSIBLE

22. Source: POSSIBLE

23. Source: POSSIBLE

24. 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.

25. So now let’s talk about CX

26. CX is a relatively new term in the last few
years particularly with the increased
importance of digital business
transformation.

27. 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

28. 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
UXUX
UX / UI

29. 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

30. Source: POSSIBLE
So how does CX / UX / UI fit together?

31. Source: POSSIBLE
By forming a “ T “ across the organization
CONNECTING
EVERYTHING
SPECIALISTSWITH
SPECIFICFOCUS

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

33. Depending on your organization's structure,
complexity of offering, size and investment these
roles may be blended or separate.
KEYTAKEAWAYS

34. This is a snapshot of today. As our industry
continues to evolve these definitions will also
evolve over the next 5 years.
KEYTAKEAWAYS

35. Not one person owns the customer, everyone in
your organization should own the customer and
be customer obsessed.
KEYTAKEAWAYS

36. HOW TO DESIGN
FOR CUSTOMER FIRST
2

37. Designing for customer firstrequires a
user-centered deign (UCD) process

38. 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 anoutside-in strategy

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

40. Why is this important?
By 2020 customer experience will
overtake price and product as the key
brand differentiator.
Source: Walker Customer 2020 Study

41. 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

42. To help you implement a UCD process in
your organization you need a UCD
framework.

43. 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

44. DOES IT WORK?
LOOK-IN/OUT POV
IDEATE
CREATE
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

45. UNDERSTAND
CONCEPT
DELIVER
DOES IT
WORK?
In practice our framework
works like an ‘onion’,
cyclical and with layers.
Source: POSSIBLE

46. Use an outside-in approach and ensure you talk
to your customer.
Talking to some customers is way better than none.
KEYTAKEAWAYS

47. KEYTAKEAWAYS
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.

48. STRATEGIES FOR
MOBILE VS. WEB
3

49. Let’s talk design strategies

50. RESPONSIVE DESIGN
NATIVE APPS
ADAPTIVE DESIGN
INSTANT APPS
MOBILE FIRST MOBILE ONLY
vs
vs
vs

51. Responsive design is the norm today.
Coined in 2011, it’s an assumption with design
teams unless you have a specific reason not to.

52. Responsive design is when you build one
single web experience that is able to fluidly
adjust for multiple screen sizes.

54. 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
RESPONSIVEDESIGN

55. 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.

56. 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.

57. 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.

58. 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
ADAPTIVEDESIGN

59. Apps are not dead.
Native apps have seen a boom in 2016 across
downloads, time spent and revenue.

60. 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

61. 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

62. Source: App Annie 2016 Retrospective

63. But…

64. 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

65. 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

66. 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

67. 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

68. 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.

69. 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.

70. 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

71. 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
ANDROIDINSTANTAPPS

72. 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.

73. 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.

74. 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.

75. 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
MOBILEFIRST

76. 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.

77. It’s usually used when there is a primary action
your user can achieve via mobile better than
any other channel.

78. 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

79. 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%.

80. 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.

81. 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
MOBILEONLY

82. BEST PRACTICES FOR
AWESOME EXPRIENCES
4

83. 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

84. 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!

85. 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

86. 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

87. 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.”

88. KNOW UNIVERSAL TRUTHS AND REGIONAL DIFFERENCES
Source: Chinese web design patterns: how and why they’re different (Chui Chui Tan)
2011
2017

89. 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%!

90. 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

91. THANK YOU!
MELISSA WILFLEY
EXPEIENCE DESIGN DIRECTOR / APAC
MELISSA.WILFLEY@POSSIBLE.COM
In/melissawilfley