Associate Creative Director Jessica DeJong explores what’s next in digital by focusing on three forward-thinking themes: artificial intelligence, design systems and progressive web apps. DeJong explains the essentials of each trend and shares case studies on how they function in business today.

1. Experience Lab 2017 | 11.08 – 11.10 2017
BY DESIGN
Subtitle Goes Here
Designing for
the Future

2. Experience Lab 2017 | 11.08 – 11.10 2017
Jessica DeJong
@jessdejong

3. Experience Lab 2017 | 11.08 – 11.10 2017
D
Flashback! 1995

5. Experience Lab 2017 | 11.08 – 11.10 2017
D
Fast Forward 2017

7. 2017:
MarTech
Unicorn

8. Tech Design UX

9. Tech Design UX

10. AI DS PWA

11. Experience Lab 2017 | 11.08 – 11.10 2017
D
Artificial
Intelligence

20. Experience Lab 2017 | 11.08 – 11.10 2017
There’s a lot of hype about AI.
There’s also tremendous promise.

21. Experience Lab 2017 | 11.08 – 11.10 2017
Who here is already
working with AI?

22. Experience Lab 2017 | 11.08 – 11.10 2017

23. Experience Lab 2017 | 11.08 – 11.10 2017
So what exactly is AI?

24. Experience Lab 2017 | 11.08 – 11.10 2017
Artificial intelligence is simply
a better way to turn
data into actionable insights.

25. Experience Lab 2017 | 11.08 – 11.10 2017
S Y S T E M S T H A T …
PREDICTACT LEARN CREATE EVOLVE
Source: TopBots.com
Machine Learning Continuum

26. Experience Lab 2017 | 11.08 – 11.10 2017
D
Systems that Act

28. Experience Lab 2017 | 11.08 – 11.10 2017
D
Systems that Predict

30. Experience Lab 2017 | 11.08 – 11.10 2017
D
Systems that Learn

31. Experience Lab 2017 | 11.08 – 11.10 2017Experience Lab 2017 | 11.08 – 11.10 2017

32. Experience Lab 2017 | 11.08 – 11.10 2017
80%of businesses want chatbots by 2020.

33. Experience Lab 2017 | 11.08 – 11.10 2017

37. Experience Lab 2017 | 11.08 – 11.10 2017
D
Systems that Create

38. Experience Lab 2017 | 11.08 – 11.10 2017

42. Experience Lab 2017 | 11.08 – 11.10 2017
Virtual / Augmented Reality
CNN “Hologram” 2008 election night Tupac ”Hologram”, Coachella 2012

46. Experience Lab 2017 | 11.08 – 11.10 2017
D
Systems that Evolve

48. Experience Lab 2017 | 11.08 – 11.10 2017
S Y S T E M S T H A T …
PREDICTACT LEARN CREATE EVOLVE
Source: TopBots.com
Machine Learning Continuum

49. Experience Lab 2017 | 11.08 – 11.10 2017
As machines become more
capable, we’ll see our role shift
from creator to curator.

50. Experience Lab 2017 | 11.08 – 11.10 2017
AI has the power to free us up
and massively amplify our ability
to explore, experiment and
refine.

51. Experience Lab 2017 | 11.08 – 11.10 2017Experience Lab 2017 | 11.08 – 11.10 2017
! Enhanced search experiences
! Conversational UI for FAQs
! Bot for thought leadership, client alerts
! Personalization/recommended content
Ideas!

52. Experience Lab 2017 | 11.08 – 11.10 2017
D
Design Systems

53. Experience Lab 2017 | 11.08 – 11.10 2017
Design Systems
Also known as …
Atomic Design Design Language
Pattern Library Digital Style
Guide
Design Standards

54. Experience Lab 2017 | 11.08 – 11.10 2017
Design Systems:
Before

56. Experience Lab 2017 | 11.08 – 11.10 2017
In this age of device diversity,
we need to focus more on
patterns than pages.

57. Experience Lab 2017 | 11.08 – 11.10 2017
Patterns: reusable bits of
design and content that we
can stitch together into
responsive design systems.

58. Brad Frost’s Atomic Design

59. Experience Lab 2017 | 11.08 – 11.10 2017
D
But … won’t that get boring?

60. Experience Lab 2017 | 11.08 – 11.10 2017
Let’s use a familiar metaphor.

61. Experience Lab 2017 | 11.08 – 11.10 2017

68. Experience Lab 2017 | 11.08 – 11.10 2017

69. Experience Lab 2017 | 11.08 – 11.10 2017
“Be consistent. Not uniform.”

70. Experience Lab 2017 | 11.08 – 11.10 2017
D
Examples

95. styleguides.io

96. Experience Lab 2017 | 11.08 – 11.10 2017
Benefits of Design Systems:
! Lays the foundation for breaking the bimodal
! Necessary for personalization, A/B testing
! Creates consistency within applications/sites
! Extends consistency across all digital channels

97. Experience Lab 2017 | 11.08 – 11.10 2017
Colors Typography Logos/Icons
Grids Motion
Component
Library
Usability
Principles
Resource
Center
Accessibility

98. Experience Lab 2017 | 11.08 – 11.10 2017
How to start:
! Start documenting now
! Documentation must be digital/in-browser
! Commit to regular maintenance (budget + schedule)

99. Experience Lab 2017 | 11.08 – 11.10 2017
D
Progressive Web Apps

100. Experience Lab 2017 | 11.08 – 11.10 2017
53%of users abandon sites that take
longer than 3 seconds to load.

101. Experience Lab 2017 | 11.08 – 11.10 2017
19sec
Average mobile web page load on 3G

103. Progressive Responsive Discoverable
App-Like
Connectivity
Independent
Push-Notifications Easier & Faster Installable on
Home Screen
Linkable

105. Experience Lab 2017 | 11.08 – 11.10 2017
PWAs are responsive
websites that act and feel
like native apps.

107. Experience Lab 2017 | 11.08 – 11.10 2017
PWAs are just a higher bar for
user experience on websites.

109. Experience Lab 2017 | 11.08 – 11.10 2017
D
Examples

112. m.uber.com
! Designed to work well on
intermittent networks
! 3s interactive on 2G

113. m.uber.com
! Designed to work well on
intermittent networks
! 3s interactive on 2G

114. westelm.com*
! 15% increase in average
time spent
! 9% lift in revenue per visit
*rolling out throughout Q4 2017

115. forbes.com
! PWA loads in 2.5s versus 6.5s
of previous mobile site
! 20% more impressions
! 6x completion rate

116. preview.starbucks.com
! 0.4% size of its native app
counterpart

117. Android iOS PWA
9.6MB
56MB
150KB
home feed
Comparing Size of PWAs vs. Native Apps

118. Experience Lab 2017 | 11.08 – 11.10 2017

119. Experience Lab 2017 | 11.08 – 11.10 2017
D
Now for Some Bad News …

120. Experience Lab 2017 | 11.08 – 11.10 2017
D
Technical Requirements of PWAs
https Service
worker
Web App
Manifest

121. Support for Service Workers

122. Experience Lab 2017 | 11.08 – 11.10 2017Experience Lab 2017

123. Experience Lab 2017 | 11.08 – 11.10 2017
What does that mean?

124. Progressive Responsive Discoverable
App-Like
Connectivity
Independent
Push-Notifications Easier & Faster Installable on
Home Screen
Linkable

125. Progressive Responsive Discoverable
App-Like
Connectivity
Independent
Easier & Faster Installable on
Home Screen
Linkable

126. Experience Lab 2017 | 11.08 – 11.10 2017
Should I wait to
build a PWA until
iOS supports
service workers?

127. Experience Lab 2017 | 11.08 – 11.10 2017

128. m.aliexpress.com
! 104% for new users across all
browsers; 82% increase in iOS
conversion rate
! 2X more pages visited per session,
per user, across all browsers
! 74% increase in time spent per
session, across all browsers

129. Experience Lab 2017 | 11.08 – 11.10 2017
D
But Wait!

130. Experience Lab 2017 | 11.08 – 11.10 2017

131. In development
Support for Service Workers

132. Experience Lab 2017 | 11.08 – 11.10 2017
Is a PWA right for my project?
! Ideal for apps or sites that are regularly visited
! Best for content that is heavily trafficked by mobile users

133. Experience Lab 2017 | 11.08 – 11.10 2017
D
Final Thoughts

135. pwa.onenorth.com

137. Experience Lab 2017 | 11.08 – 11.10 2017
BY DESIGN
Subtitle Goes Here
Designing for
the Future