Many companies still consider web and apps two totally separate silos with different POs, contents, dev teams, design principles etc. It doesn’t have to be like this. Hence, combining web and app development and operations in a smart way has become one of my favourite topics recently. In May 2019 I got to share my views at the E-handelsskola organised by DIBS at Retail Experience Live exhibition in Sweden. I was asked to talk about progressive web apps but since I feel they are not a viable solution yet, I ended up telling why and what you should do instead. This is an extended edition of the slides I used at the event. This was my summary of what I would currently suggest by default: - Maximise usage of web-based content inside your app - Leverage app stores as a delivery channel - Leverage native for special tech as needed (push, sensors, proper camera etc.) - Be ready to pivot to PWA if that takes off

1. The smart way
of combining
web & apps
Matias Pietilä, Head of design
@mpietila #retailexperiencelive
DIBS E-handelsskola on Retail Experience Live | 16.5.2019

2. Mobile browsing
typically exceeds
50% already

3. Mobile browsing
typically exceeds
50% already
However, mobile
sales tend to lag
behind

4. B L U E A R R O W
T O P 3
W I N N E R
W I N N E R
We create measurable impact
What we do?

5. We helped St1 bring Apple
Pay to Nordics and issue
compatible cards directly
inside the app

6. The smart way of combining web & apps
DIBS E-handelsskola
Market overview
Highlights from App Annie state
of the mobile 2019
Web vs. app vs.
the rest
What about
PWA?
When to build and app?
How to direct traffic between
channels?
Where do we stand and what
should you do?

7. Highlights of the recent The
State of Mobile report by
AppAnnie

8. Downloads are
the first to grow,
followed by first
usage and then
revenue
https://www.appannie.com/en/go/state-of-mobile-2019/

9. Downloads no
longer increasing
in the Western
countries
https://www.appannie.com/en/go/state-of-mobile-2019/

10. However, the
time spent in
apps is still
growing
https://www.appannie.com/en/go/state-of-mobile-2019/

11. It’s increasingly
hard to get
installed
https://www.appannie.com/en/go/state-of-mobile-2019/

12. Daily competition
is even more
fierce (2017 data)
https://www.appannie.com/en/go/state-of-mobile-2019/

13. Mobile retail is
taking off
https://www.appannie.com/en/go/state-of-mobile-2019/

14. Engagement is
the path to
revenue
https://www.appannie.com/en/go/state-of-mobile-2019/

15. “Bricks-and-
Clicks”
merchants are
catching up
https://www.appannie.com/en/go/state-of-mobile-2019/

16. Nike: reservation
https://news.nike.com/news/nike-app-at-retail-shopping-experience

17. Nike: scan
https://news.nike.com/news/nike-app-at-retail-shopping-experience

18. Read our summary at
Section or topic
bit.ly/QvikSOM2019

19. The smart way of combining web & apps
DIBS E-handelsskola
Market overview
Highlights from App Annie state
of the mobile 2019
Web vs. app vs.
the rest
What about
PWA?
When to build and app?
How to direct traffic between
channels?
Where do we stand and what
should you do?

20. Not only about technology
App vs. web
Technology Design Business

21. Notifications
are a major
channel
Full hardware
access
(optimal UX,
beacons etc.)
Monetisation
options
App stores as
a marketing
channel
What’s good in native?
App vs. web

22. Installation
friction
Less effective
development
Review
process,
content
limitations
Limitations in
payment
options
What’s bad in native?
App vs. web

23. Hybrid apps
(web + native)
Cross
platform
(React Native,
Flutter)
Progressive
web apps
+ the next cool
thing that will
arrive
tomorrow
Why is this the wrong question?
App vs. web

24. Detach tech and channel
Application
stores
Web
N A T I V E
C R O S S - P L A T F O R M
W E B T E C H
W E B T E C H

25. Same service, different user profile, similar revenue
80/20 rule applies
92%
returning users
37%
returning users
App Web

26. Customer factory metaphor
Scale the product
Adapted from: Scaling Lean, Ash Maurya (2016)
A C Q U I S I T I O N A C T I V AT I O N R E V E N U E
R E T E N T I O N
1 2
3
4
SaleSaleSaleSaleSaleSaleSaleSaleSaleSale
R E F E R R A L
5

27. Jennifer Norman
Web Browser
42%Sketch 9:41 AM
GET
Y O U ’ R E
L O G G E D
I N
H E R E …
WEB WEB APP STORE APP
… W E ’ L L
L O G Y O U I N
A U T O M A T I C
A L LY H E R E
Bridge the gap between web and your app

28. The smart way of combining web & apps
DIBS E-handelsskola
Market overview
Highlights from App Annie state
of the mobile 2019
Web vs. app vs.
the rest
What about
PWA?
When to build and app?
How to direct traffic between
channels?
Where do we stand and what
should you do?

29. PWA
Progressive web apps

30. PWAvalue proposition
Mythical creatures
Cross-platform compatibility
Simpler development
App Store independence
Search engine friendly
https://appsco.pe/about

31. Trywhat’s possible
https://whatwebcando.today/

32. Apple & PWA
Apple initially created the whole concept of
web apps that can be installed on your
home screen
Recently Apple has been the one to stall the
process – many core features still missing
on iOS
https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

33. Know the limitations (iOS)
It’s not quite ready yet
No Push Notifications,
The app can store offline data and files only up to 50 Mb
If the user doesn’t use the app for a fewweeks, iOS will free up the app’s files. The icon will still be there
on the home screen, and when accessed the app will be downloaded again
No access to some features, such as Bluetooth, serial, Beacons, Touch ID, Face ID, ARKit, altimeter
sensor, battery information
No access to execute code while in the background
No one-click install on the web
No access to private information (contacts, background location) and also no access to native social apps
No access to In App Payments and many other Apple-based services
No icon badge or Siri integration
https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

34. iOS 12.2 fixes
some issues
https://medium.com/@firt/whats-
new-on-ios-12-2-for-progressive-
web-apps-75c348f8e945

35. http://gs.statcounter.com/os-version-market-share/ios/mobile-tablet/worldwide

36. WhyApple is in no hurry to fix this?
Security
The current strict review policy
keeps malware away
Financial impact
Platform
stickiness
App Store is a huge business Platform-specific apps increase
stickiness
C H I C K E N A N D E G G : A S L O N G A S P W A S A R E N O T T R U LY C R O S S - P L A T F O R M ,
T H E D E V E L O P M E N T I S S L O W

37. Typical fallacy
“Somebody might
like this”

38. Litmus test
“If there was a PWA
available, would I prefer it
over an app”

39. Reality
check

40. Litmus test
“If my competitor had
an app, would I be
comfortable not to
have one?”

41. Highly scientific quantitative analysis
5 syllables1 syllable
App PWA

42. You knowwhat to do
(despite the language)
App stores as a delivery channel

43. You knowwhat to do
(despite the language)
App stores as a delivery channel

44. Hybrid solutions
Hand-picking the best of both worlds

45. Possible benefits of hybrid approach over pure native
Cross platform
efficiency gains
Easier team mix
More flexible
releases
( N O N E O F T H I S W I L L M A T E R I A L I S E U N L E S S Y O U H A V E F U L L
C O N T R O L O V E R B O T H E N D S : T H E N A T I V E A N D T H E W E B )

46. Things have evolved
UIWebView WKWebView
+ M U C H B E T T E R P E R F O R M A N C E I N H A R D W A R E

47. NATIVE APP
123456
WEB-BASED SERVICES
SSO
Booking change
Booking confirmation
Booking service
Travel companion
Check-in &
boarding pass

48. 3
native
screens
100+
integrated
web
screens

49. It’s possible to reach great qualitywith
hybrid approach

50. T O P 3
B L U E A R R O W
User ratings
> 4,5
Appstore & Google Play
M O B I L E
S A L E S82,5 years after release
X
R O I162,5 years after release
X
M O N T H LY A C T I V E U S E R S
250 000
in booking service

51. @QVIK
From
native to a
web view

52. @QVIK
From
native to a
web view

53. @QVIK
Web
content
inside a
web view

54. @QVIK
Web content
inside a web
view, slow
phone

55. @QVIK
Native
animation
between web
views

56. @QVIK
Native view
that uses
gyroscope
(for the fancy
3D effects)

57. Mindset
Think in terms of building an
application with native look
and feel that just happens to
have certain screens built
with web technologies.

58. Technical things to solve
Making hybrid approach work
Syncing app and web versions
Letting the web service know the
environment in which it’s run (app or
web, OS, version)
Where to maintain the custom
navigation? (web or app side)
Hiding unnecessary stuff inside app
context
When to hide native loading screens?
How to manage where links should be
opened?
How to support offline?
How to utilise native animations

59. Maximise
usage of web-
based content
Leverage app
stores as a
delivery
channel
Leverage
native for
special tech
Be ready to
pivot to PWA
What I would do today?
DIBS E-handelsskola

60. Recap: The smart way of combining web & apps
DIBS E-handelsskola
Market overview
Highlights from App Annie state
of the mobile 2019
Web vs. app vs.
the rest
What about
PWA?
When to build and app?
How to direct traffic between
channels?
Where do we stand and what
should you do?

61. This looks like an awfully good
time to ask something, right?
www.qvik.fi
Matias Pietilä
@mpietila
matias@qvik.com
W O U L D Y O U L I K E T O G E T T H E S L I D E S ?
P L E A S E G E T I N T O U C H !