leveraging cx / ux / ui to optimise brand experiences
TRANSCRIPT
![Page 1: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/1.jpg)
LEVERAGING CX / UX / UI TO OPTIMISE BRAND EXPERIENCES
JUNE 2017
in/melissawilfley/
![Page 3: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/3.jpg)
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
![Page 4: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/4.jpg)
FINDING THE “ T “ IN CX, UX AND UI 1
![Page 5: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/5.jpg)
CX = Customer Experience
UX = User Experience
UI = User Interface
![Page 6: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/6.jpg)
In order to leverage CX / UX / UI you need to know the difference
![Page 7: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/7.jpg)
There are a lot of titles and definitions today
![Page 8: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/8.jpg)
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
![Page 9: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/9.jpg)
A big part of this is due to the evolving nature of technology merging online
channels with offline.
![Page 10: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/10.jpg)
Like Amazon Go Just Walk Out Technology
BRICKS & CLICKS
Source: Amazon Go
![Page 11: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/11.jpg)
Like Google Home
SMART HOME DEVICES
Source: Google Home
![Page 12: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/12.jpg)
Like Fitbit and their health and fitness trackers
WEARABLES
Source: Fitbit
![Page 13: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/13.jpg)
Like Utilities and Branchless Banks
eSERVICES
Source: Con Edison of New York, Ally Bank
![Page 14: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/14.jpg)
Let’s start with what is UX and UI
![Page 15: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/15.jpg)
UI
UI ≠ UX
UX
ALL PART OF THE USER EXPERIENCE
Source: POSSIBLE
![Page 16: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/16.jpg)
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
![Page 17: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/17.jpg)
Let’s see these UI / UX differences in action
![Page 18: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/18.jpg)
Source: POSSIBLE
![Page 19: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/19.jpg)
Source: POSSIBLE
![Page 20: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/20.jpg)
UX Design
Source: POSSIBLE
![Page 21: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/21.jpg)
Source: POSSIBLE
![Page 22: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/22.jpg)
Source: POSSIBLE
![Page 23: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/23.jpg)
Source: POSSIBLE
![Page 24: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/24.jpg)
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.
![Page 25: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/25.jpg)
So now let’s talk about CX
![Page 26: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/26.jpg)
CX is a relatively new term in the last few years particularly with the increased
importance of digital business transformation.
![Page 27: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/27.jpg)
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
![Page 28: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/28.jpg)
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
![Page 29: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/29.jpg)
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
![Page 30: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/30.jpg)
Source: POSSIBLE
So how does CX / UX / UI fit together?
![Page 31: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/31.jpg)
Source: POSSIBLE
By forming a “ T “ across the organization CONNECTING EVERYTHING
SPECIALISTS WITH SPECIFIC FOCUS
![Page 32: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/32.jpg)
CX, UX and UI are different but complimentary. One is not more important than the other.
KEY TAKEAWAYS
![Page 33: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/33.jpg)
Depending on your organization's structure, complexity of offering, size and investment these
roles may be blended or separate.
KEY TAKEAWAYS
![Page 34: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/34.jpg)
This is a snapshot of today. As our industry continues to evolve these definitions will also
evolve over the next 5 years.
KEY TAKEAWAYS
![Page 35: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/35.jpg)
Not one person owns the customer, everyone in your organization should own the customer and
be customer obsessed.
KEY TAKEAWAYS
![Page 36: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/36.jpg)
HOW TO DESIGN FOR CUSTOMER FIRST 2
![Page 37: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/37.jpg)
Designing for customer first requires a user-centered deign (UCD) process
![Page 38: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/38.jpg)
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
![Page 39: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/39.jpg)
If you don’t speak to your customers your not using UCD or an outside-in approach.
![Page 40: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/40.jpg)
Why is this important?
By 2020 customer experience will overtake price and product as the key
brand differentiator.
Source: Walker Customer 2020 Study
![Page 41: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/41.jpg)
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
![Page 42: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/42.jpg)
To help you implement a UCD process in your organization you need a UCD
framework.
![Page 43: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/43.jpg)
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
![Page 44: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/44.jpg)
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
![Page 45: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/45.jpg)
UNDERSTAND
CONCEPT
DELIVER
DOES IT WORK?
In practice our framework works like an ‘onion’,
cyclical and with layers.
Source: POSSIBLE
![Page 46: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/46.jpg)
Use an outside-in approach and ensure you talk to your customer.
Talking to some customers is way better than none.
KEY TAKEAWAYS
![Page 47: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/47.jpg)
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.
![Page 48: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/48.jpg)
STRATEGIES FOR MOBILE VS. WEB 3
![Page 49: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/49.jpg)
Let’s talk design strategies
![Page 50: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/50.jpg)
RESPONSIVE DESIGN
NATIVE APPS
ADAPTIVE DESIGN
INSTANT APPS
MOBILE FIRST MOBILE ONLY
vs
vs
vs
![Page 51: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/51.jpg)
Responsive design is the norm today.
Coined in 2011, it’s an assumption with design teams unless you have a specific reason not to.
![Page 52: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/52.jpg)
Responsive design is when you build one single web experience that is able to fluidly
adjust for multiple screen sizes.
![Page 53: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/53.jpg)
![Page 54: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/54.jpg)
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
![Page 55: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/55.jpg)
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.
![Page 56: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/56.jpg)
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.
![Page 57: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/57.jpg)
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.
![Page 58: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/58.jpg)
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
![Page 59: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/59.jpg)
Apps are not dead.
Native apps have seen a boom in 2016 across downloads, time spent and revenue.
![Page 60: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/60.jpg)
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
![Page 61: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/61.jpg)
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
![Page 62: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/62.jpg)
Source: App Annie 2016 Retrospective
![Page 63: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/63.jpg)
But…
![Page 64: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/64.jpg)
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
![Page 65: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/65.jpg)
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
![Page 66: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/66.jpg)
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
![Page 67: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/67.jpg)
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
![Page 68: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/68.jpg)
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.
![Page 69: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/69.jpg)
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.
![Page 70: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/70.jpg)
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
![Page 71: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/71.jpg)
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
![Page 72: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/72.jpg)
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.
![Page 73: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/73.jpg)
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.
![Page 74: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/74.jpg)
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.
![Page 75: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/75.jpg)
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
![Page 76: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/76.jpg)
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.
![Page 77: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/77.jpg)
It’s usually used when there is a primary action your user can achieve via mobile better than
any other channel.
![Page 78: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/78.jpg)
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
![Page 79: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/79.jpg)
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%.
![Page 80: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/80.jpg)
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.
![Page 81: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/81.jpg)
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
![Page 82: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/82.jpg)
BEST PRACTICES FOR AWESOME EXPRIENCES 4
![Page 83: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/83.jpg)
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
![Page 84: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/84.jpg)
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!
![Page 85: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/85.jpg)
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
![Page 86: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/86.jpg)
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
![Page 87: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/87.jpg)
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.”
![Page 88: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/88.jpg)
KNOW UNIVERSAL TRUTHS AND REGIONAL DIFFERENCES
Source: Chinese web design patterns: how and why they’re different (Chui Chui Tan)
2011 2017
![Page 89: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/89.jpg)
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%!
![Page 90: Leveraging CX / UX / UI to optimise brand experiences](https://reader033.vdocuments.us/reader033/viewer/2022051503/5a6d293c7f8b9ac2418b5451/html5/thumbnails/90.jpg)
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