Presentation about Open Source PWA Vue Storefront More: Vuestorefront.io

1. e Cha #MM19IN

2. Progressive Web Apps (PWA)
as a Game Changer for eCommerce
Tom Karwatka
Vue Storefront / Divante
e Cha #MM19IN

3. Hey eCommerce,
what’s wrong with you?
e Cha #MM19IN

4. Hey eCommerce,
what’s wrong with you?

5. It takes, on average, 15.3 seconds to fully load
a mobile page
Google Research, Webpagetest.org, sampled 11M global mWeb domains loaded using a
globally representative 4G connection, Jan. 2018.
e Cha #MM19IN

6. 53% of mobile site visits are abandoned if pages
take longer than 3 seconds to load.
75% of mobile sites take longer than
10 seconds to load.
e Cha #MM19IN

7. Mobile abandonment rates exceed
80% when customers are asked to
input their credit card details.
e Cha #MM19IN

8. Google Mobile First Index
From the beginning of 2018, Google is
changing its indexing to be
mobile-first.
e Cha #MM19IN

9. 30%+ of users have purchased a product they first
discovered on Instagram.
WeChat- 1 billion monthly users
Instagram - 1 billion monthly users
e Cha #MM19IN

10. We aren’t ready for mobile.
Fine?!
But we feel strong on desktop!
e Cha #MM19IN

11. 40% of major eCommerce companies
experience periods of website downtime
during seasonal traffic peaks.
56% noted that their website experienced
longer loading times during seasonal peaks
e Cha #MM19IN

12. eCommerce demand
has outgrown current
tech-stacks
e Cha #MM19IN

13. eCommerce demand
has outgrown current
tech-stacks
e Cha #MM19IN

14. We need new tools!
eCommerce demand
has outgrown current
tech-stacks
e Cha #MM19IN

15. HEADLESS
front-end is stand-alone
software, which
communicates with a
back-end via an API
bit.ly/headless-ebook
e Cha #MM19IN

16. HEADLESS
front-end is stand-alone
software, which
communicates with a
back-end via an API
DESIGN
SYSTEMS
a collection of reusable
components, guided
by clear standards,
that can be put
together
e Cha #MM19IN

17. PROGRESSIVEHEADLESS
front-end is stand-alone
software, which
communicates with a
back-end via an API
DESIGN
SYSTEMS
a collection of reusable
components, guided
by clear standards,
that can be put
together
WEB APPS
web applications that
can appear to the user
like traditional
applications or native
mobile applications
e Cha #MM19IN

18. Mobile apps
provide the finest
user experience,
but have some
limitations
USER ACQUISITION
need to be downloaded
COSTS
expensive to
build & maintain
BUSINESS MODEL
high commision
lack of control over publishing
USER EXPERIENCE
different on every device
e Cha #MM19IN

19. The new mobile standard
Progressive Web Apps
one app for all channels
Multi
platform
Lighting
fast
Off-line
ready
Black Friday
ready
Google Microsoft Apple
e Cha #MM19IN

20. Vue Storefront
Mobile-first ecommerce frontend that
allows you to build super fast eCommerce
websites and apps, without changing the
backend platform.
Open Source
Head-less approach
Design Systems
Time2Market < 60 days
www.vuestorefront.io
e Cha #MM19IN

21. Provide native app features
Vue Storefront feels just like an app - it even has app-style interactions and
navigation.
Full screen
Hiding the browser
top URL bar and the
bottom navigation
menu
Home screen
Instant access from the
home screen without
opening the browser and
typing a URL
Push
Notifications
Push notifications with
a one click opt-in
directly from the PWA
site.
Offline mode
Browsing with a
weak or even lack of
a network
connection.
e Cha #MM19IN

22. Anytime. On any device.
Vue Storefront behaves the same on each
device.
Vue Storefront behaves the same on each
device. It delivers a 100% responsive and
smooth shopping experience, so it’s not
necessary to develop apps for different web
browsers and platforms.
Vue Storefront works on:
Android phones
Desktop browsers
(Edge, Chrome,
Safari, Opera etc.)
iOS phones and MacBooks
Windows
e Cha #MM19IN

23. Accelerate with PWA advantages
By combining the best of the web and native apps, Vue Storefront gives significant business capabilities.
Install directly
Vue Storefront is much
smaller than native apps,
so it loads faster, works
better over low-
bandwidth networks
and takes up less space
on a user’s device.
Up to date
PWAs synchronize data in
the background even
when a user is not active.
The app is always up-
to-date with the latest
version and content
served instantly.
Discoverable
Vue Storefront is fully
searchable and
indexable, contrary to
native apps.
You can easily
bookmark and share
every page.
Analytics
You can track website
users the mobile app
way, for example:
number of installs,
active & offline users
or even notification
performance.
Trusted by the World’s Top Brands
e Cha #MM19IN

24. With eCommerce features
Shopping - adding products to cart, stock
synchronization, Cart Expiration, Multi-store,
Products bundle and many more
Ordering - Offline ordering (via in-browser queue),
High speed with local caching, SSL for all online
orders, Crossell, Upsell and more
Checkout - built-in checkouts, external checkouts,
creating an Account during the Checkout Process,
checkout fallback
option and more
Payments - synchronization with major payment
service providers like Google, PayPal and a few
others
Shipping - online Tax and Shipping Calculation,
Multiple shipping addresses, free shipping
functionality and more
Open Source CMS and PIM
Open Source Loyalty
e Cha #MM19IN

25. The platform for future growth
Visual Recognition
Take advantage of the Clarifai.com
API with a PWA to automatically tag,
organize, and search visual content
with its machine learning engine.
Chatbot
Use a PWA as a platform for chatbot
development. It is much more
reasonable to offer a full blown user
experience via PWA than going into
native solutions.
Virtual Assistants
Virtual Assistants (Alexa, Siri, Google Now,
Cortana) usage grew 23.1% in 2017. This year,
60.5 million Americans will use them. It’s
nearly 20% of the US population.
One Touch checkout
The expiration of Amazon’s US patent
on one-click ordering (September 2017)
allows companies to use express
checkout functionality on their sites.
You can extend the mobile-first experience by adding more channels.
Voice Commerce
Amazon Alexa and Google Home
used with Vue Storefront
&
e Cha #MM19IN

26. Vue Storefront - The future-proof solution
We react quite fast and embrace all opportunities that are open for eCommerce.
Focus on frontend. Bringing frontend innovations at speed.
Google
made page
speed a factor
in mobile
search ranking.
January
‘18
February
‘18
March
‘18
April
‘18
July
‘18
Vue Storefront
is much faster to interact
with, as well as providing
smoother scrolling
and transitioning of
pages.
Microsoft
brought PWA
standard into
Microsoft Edge and
Windows 10.
Vue Storefront
is fully compatible with
Progressive Web App
standard, so it’s going to be
available on any Windows
device.
Google
began with
Mobile-first indexing
as a SEO ranking
factor.
Vue Storefront
delivers an exceptional
mobile UX which gives
higher rankings position-
even for desktop
searchers.
Apple
announced PWA
support on iOS
and macOS
devices.
Vue Storefront
works not only on Android
phones and desktop browsers
(IE, Chrome, Firefox, Opera) but
on iOS phones and MacBooks
too.
Google
Start marking
non-HTTPS sites
as
‘not secure’.
Vue Storefront
is served via HTTPS, ensuring
that data is encrypted, has
better performance & caching
and is promoted as SEO
ranking signal.
e Cha #MM19IN

27. 1.2k+ developers in the Community (Slack)
6th most popular eCommerce Platform on
GitHub
2nd most popular Magento repo on GitHub
30+ official Partners
join the Community
https://github.com/DivanteLtd/vue-storefront
Projects live: India, Holland, Italy, Russia, Denmark, Poland, USA, Singapore, ...
Workshops, Trainings, PoC, Time2Market <60 days
e Cha #MM19IN

28. Market
implementation
in Singapore
The Hour Glass, one of Asia’s luxury
watch retail groups wanted to engage
their customers, with a Nomos Watch
series limited offer. With their products,
content and styling, they developed a
product site based on PWA Storefront.
e Cha #MM19IN

29. Over 4000 GitHub Stars
e Cha #MM19IN

30. Build The Vue Storefront
Marketplace with us
We’d like to leverage on the Vue Storefront popularity and make our
commitment event stronger — providing the community with quality themes,
modules and integrations for #PWA.
We invite freelancers and companies to build:
e Cha #MM19IN

31. SPEED
Higher CR
Sites that load in 5 seconds vs
19 seconds observed:
● 25% higher ad viewability
● 70% longer average sessions
● 35% lower bounce rates
PAYMENTS
Lower cart
abandonment rate
● PayPal - 53% increase in
mobile payments thanks to
One Touch checkout.
● The expiration of Amazon’s US
patent on one-click ordering
allows companies to use
express checkout
functionality.
TRAFFIC
New Clients
● PWA is Mobile-First Index
Ready - if a website has
desktop content and mobile
content, then Google will
index mobile content first.
● 68% of Instagram followers
engage regularly with brands
e Cha #MM19IN

32. Try Vue Storefront
for Mobile-First Commerce
Tom Karwatka
tkarwatka@divante.co
e Cha #MM19IN

33. Sources
1. https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-shopping-ecosystem/
2. ttps://www.forbes.com/sites/michelleevans1/2017/04/12/how-china-won-the-race-to-being-considered-a-mobile-first-comm
erce-nation/#2c7e22a91b49
3. Mobile Payments Report 2018, Acapture by payvision
4. https://www.leadpages.net/blog/psychology-of-waiting/
5. https://neilpatel.com/blog/4-easy-ways-to-generate-ecommerce-sales-from-instagram/
6. https://trackmaven.com/blog/marketing-instagram-algorithm/
7. https://sproutsocial.com/insights/instagram-stats/
8. https://sproutsocial.com/insights/hashtags-for-instagram/
9. https://www.clickz.com/how-ecommerce-brands-use-instagram-to-reach-their-goals/95996/
10. https://medium.com/@distillerytech/digital-transformation-why-enterprises-need-progressive-web-apps-b37a9e223157
11. https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
12. http://www.retail-systems.com/rs/Retailer_Websites_Experiening_Downtimes.php
13. https://www.statuscake.com/websites-of-40-of-uk-e-commerce-firms-experience-downtime-during-seasonal-traffic-peaks/
14. https://www.practicalecommerce.com/10-Surprising-Mistakes-on-Large-Ecommerce-Sites
15. https://www.decibelinsight.com/blog/how-load-speed-impacts-user-focus-time-analysis-of-83828-sessions
e Cha #MM19IN