Proprietary + Confidential
Loïc de Saint-Andrieu - Head of Customer Experience
Jules Rigaud - Mobile Lead
Meetup
Comment donner une expérience App-like à mes users web mobile ?

Proprietary + ConfidentialProprietary + Confidential
Agenda
● Why mobile web matters ?
● What are the user benefits ?
● What are the business impacts ?
● How to make it happen ?
● The future of web ?

Proprietary + ConfidentialProprietary + Confidential
Why mobile web matters ?

Proprietary + ConfidentialProprietary + Confidential
1h18min
25 min
French internet users are mobile 1st
Source : Médiamétrie // Netratings, Aout 2019
2h 27 min
All users 15-34 yo

Proprietary + ConfidentialProprietary + Confidential
But mobile sites are not catching up
contentbazaar.co/20160314/pi-way
Painful interfaceNot reactiveSlow
contentbazaar.co/20160314/pi-way
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
contentbazaar.co/20160314/pi-way

Proprietary + ConfidentialProprietary + Confidential
Source: StatCounter, Quarterly Ecommerce Report from Monetate
That’s why mobile conversion rate are low
Conversion rateTime spent on device
MobileDesktop
4x
Mobile
conversion rate
Desktop
conversion rate
1/2

Proprietary + Confidential
87% 13%
time spent in native apps
on the web
Source: eMarketer, 2019
First, consumers spent most time in native apps

Proprietary + Confidential
77% 23%
time spent in top 3 apps
on a device
All other apps
Source: eMarketer, 2018
Your App ?
But usage is highly concentrated

Proprietary + Confidential
49%
of users download
0 apps per month
Source: Comscore & eMarketer
6
mobile domains
per day
but browse
And the web is key to drive awareness

Proprietary + ConfidentialProprietary + Confidential
REACH
CAPABILITIES
Apps are more engaging, but web reaches more users
Mobile Apps Mobile Websites

Proprietary + ConfidentialProprietary + Confidential
REACH
CAPABILITIES
Apps can be easily surfaced and accessed
Google Play Instant
App Deeplink
Android Slices
Mobile Websites

Proprietary + ConfidentialProprietary + Confidential
REACH
CAPABILITIES
PWA are websites as engaging as a native app
Mobile Apps
Mobile
Websites
PWA

Proprietary + ConfidentialProprietary + Confidential
Features PWA iOS PWA Native
Push notifications Yes No Yes
Home screen installation Yes Yes Yes
Offline Yes Yes Yes
Geolocation Yes Yes Yes
Geofencing / background No No Yes
Deep Linking Yes Yes Yes
Contacts No No Yes
Sharing Yes Yes Yes
Payments Yes Yes Yes
Credentials Yes No Yes
Sensors & Hardware
Camera Yes Yes Yes
Gyroscope Yes Yes Yes
Bluetooth No* No Yes
NFC No* No Yes
PWAs are a set of APIs for app-like experiences

Proprietary + ConfidentialProprietary + Confidential
What are the user benefits ?

Proprietary + ConfidentialProprietary + Confidential
Fast Installable Reliable Engaging
Your users demanded app-like experiences
like an app
u know

Proprietary + ConfidentialProprietary + Confidential
Conversion rate (%)
Note: Data under 2.4 sec
removed due to high rate
of 404s and other errors
skewing results.
1.7
1.6
1.4
1.2
1.0
0.8
0.6
0.4
0.2
0.0
1.2 1.5 1.8 2. 2.5 2.7 3.0 3.3 3.5 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
Load time (seconds)
Conversionrate(%)
1.9% conversion rate
(2.5 seconds)
1.5% conversion rate
(3.5 seconds)
1 second
27% more
conversions
Conversion rate (%)
Source: "Mobile performance conversion rate"
Note: Data under 2.4 sec
removed due to high rate
of 404s and other errors
skewing results.
Mobile pages that load 1s faster see up to 27% increase
in CvR

Proprietary + ConfidentialProprietary + Confidential
‘‘
Chrome Dev Summit latest news
Chrome may identify
sites that typically load
fast or slow for users with
clear badging
‘‘

Proprietary + ConfidentialProprietary + Confidential
Improve your webperf
Measure your webperf with
Google PageSpeed Insights KPI
Speed Index

Proprietary + ConfidentialProprietary + Confidential
Web is getting slower
Despite the increase in and availability of
best practice guidance, sites continue to ship
bloated code to their users…
...since Nov 2010, http archive reports
a significant increase in
● Image bytes +555%
● Image requests +115%
● Request size +294%
● JavaScript bytes +585%
● JavaScript requests +350%
40% of brands who
optimize speed regress in
6 months
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
State of the web
Size & Data Transfer
Loading Speed (First Contentful Paint)
Median Desktop
2.0 seconds
⇩29%
Median Mobile
6.0 seconds
⇧ 25%
Median Desktop
1502 KB
⇧ 221%
Median Mobile
1568 KB
⇧ 983%
(Nov 15, 2010 - July 1, 2018)
(Dec 15, 2016 - July 1, 2018)

Proprietary + ConfidentialProprietary + Confidential
Webperf governance model
A single dashboard KPIs shared between
funtional & IT teams
Dedicated Webperf
owner for IT and for
the functional team
1 2 3

Proprietary + ConfidentialProprietary + Confidential
Fast page load with the service worker
First View
Repeat View
with Service
Worker
Page load time (seconds)
Page
Loaded!
Page
Loaded!
Service Worker provides
flexible content caching
for entire user journey.
Load static and dynamic
content instantly from
Service Worker.
Pre-fetch the
next page!
Navigate to next page

Proprietary + ConfidentialProprietary + Confidential
Fast page load with the service worker
ClassicPWA

Proprietary + ConfidentialProprietary + Confidential
How to implement a service worker?
Re-structure your site with
App Shell Model and break JS into smaller
chunks.
Site restructuring1
Implement Service Worker
using Workbox
3
Plan the caching strategies
for your scenarios
2
Main JS
JS chunk
JS chunk
JS chunk
Evaluate and pick the right caching
strategies for each resource. This
depends on the user experience you
are designing for users.
Create a service worker using
Workbox. Workbox provides a number
of pre-defined caching strategies.
Please note that a service worker registers on
domain level. E.g. www.example.com and
m.example.com needs two different service
workers.

Proprietary + ConfidentialProprietary + Confidential
Be Installable : no friction for install

Proprietary + ConfidentialProprietary + Confidential
The right message at the right time

Proprietary + ConfidentialProprietary + Confidential

Proprietary + ConfidentialProprietary + Confidential
More informations on : developers.google.com/web
https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile

Proprietary + ConfidentialProprietary + Confidential
Be reliable with offline & poor network experience
Trivago suggest to play a game when the
user goes offline
67% of users whose internet connection
was interrupted came back

Proprietary + ConfidentialProprietary + Confidential
Engage with push notifications
User chooses to opt-in to
push notifications.
Push Notification displayed
even when browser is not
open.
Brings user back into mobile
website.

Proprietary + ConfidentialProprietary + Confidential
Being timely, precise and relevant is crucial for notifications
When, it’s
timely
what & who, it’s
relevant
What, it’s
precise

Proprietary + ConfidentialProprietary + Confidential
What are the business impacts ?

Proprietary + ConfidentialProprietary + Confidential
Etam
● Instant revisit
● Desktop conversion rate
increase
● Conversion rate +30%
● Avg basket value +18%

Navigation hors
ligne
Etam, un pionnier de l'expérience e-commerce next generation
PWA présente dans le Google
Play Store - un seul code à
gérer
PWA dans le Play
Store
Sign-in Google Pay Ajout à l’écran
d’accueil
Acquisition Engagement Engagement Conversion Retention
Le protocole WebAuth facilite
le login avec l’empreinte
digitale sur le web
Liste de favoris accessible en
hors ligne (et donc en magasin)
Paiement en 3 clics grâce à
Google Pay
+30% de taux de conversion
des utilisateurs venant du
raccourci

Proprietary + Confidential
Weekendesk mix web & app to create a seamless experience
Thanks to the Service Worker, the
website is 15-30% faster and transitions
between pages are smoother
On 2nd page visited, Weekendesk
proposes you to add the PWA
shortcut to their home screen
CvR x2.5 from PWA users
When losing network connection,
you can still access your wishlist in
offline mode
You can even install the PWA
from the Play Store like a native
app

Proprietary + ConfidentialProprietary + Confidential
How to make it happen ?

Proprietary + ConfidentialProprietary + Confidential
You don’t have to go all-in from day one
PRODUCT ROADMAP EXAMPLE
Sprint n+2
Add to Home screen
Sprint n+3
Basic offline
page
Sprint n
Cache Strategy
with service
workers
Sprint n+4
Push
Notifications

Proprietary + ConfidentialProprietary + Confidential
Step 1: Fast & reliable → Service worker, interactive
within 10s, offline mode
Step 2: Installable → HTTPS, add to home screen
Step 3: Optimized → full-screen mode, splash
screen, push notifications
Check your Lighthouse PWA Audit

Proprietary + ConfidentialProprietary + Confidential
The future of web

Proprietary + ConfidentialProprietary + Confidential
https://developers.google.com/web/progressive-web-apps/desktop
PWA are available on Desktop since this summer !

Proprietary + ConfidentialProprietary + Confidential
Your PWA can be listed in Google Play through Trusted
Web Activities
And also on Microsoft Store &
Samsung Galaxy Store

Proprietary + ConfidentialProprietary + Confidential
Fresh news from Chrome Dev Summit ! New Web APIs
SMS Receiver Contact Picker Native File System API
https://blog.chromium.org/2019/11/chrome-dev-summit-2019-elevating-web.html

Proprietary + ConfidentialProprietary + Confidential
If you want to deep dive :
goo.gle/codec
Code, Design, Culture #codec