Slides from my session at Multichannel Conference 2015... You never get a second chance to make a first impression. The same goes for online, where the decision to bounce is often made in the first 2 seconds, and Google will lower your ranking if your site is too slow... This talks is about why we should care about speed, how to improve design with speed and how to measure & optimize speed...

1. @jeroentjepkema
multichannel 2015
Fast, Responsive, Experiences

2. a.k.a. Design for First Impressions...

4. Part 1: Why should we care?

5. #mobilegeddon

8. Back to business...

9. ...True intent conversion rate

10. 0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Conversionrate(%)
Categorienaam
Real User Monitoring: True Conversion Ratio
Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum
0%
10%
Competitive Custom B2B

11. Real User Monitoring: True Conversion Ratio
Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum
0%
10%
Optimal Conversion: 1,8s
0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Conversionrate(%)
Categorienaam
Competitive Custom B2B

12. Real User Monitoring: True Conversion Ratio
Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum
0%
10%
Optimal Conversion: 1,8s
LD50: 4,3s
0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Conversionrate(%)
Categorienaam
Competitive Custom B2B

13. Real User Monitoring: True Conversion Ratio
Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum
0%
10%
Optimal Conversion: 1,8s
LD50: 4,3s
Poverty Line: 7,6s
0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Conversionrate(%)
Categorienaam
Competitive Custom B2B

14. On average a fast experience leads to a
4% higher true intent conversion rate...

15. That’s not my
website?

16. 0
25
50
75
100
1 2 3 4 5
Slow Average Fast
%ofrespondentsthatratedtheactualwebsitespeed
Design score (1=bad - 5=beautiful)

17. 60% of people ranked design
lower when they experienced a
slow website

18. Why should we care?

19. the WAITING experience
Source: Jakob Nielsen

20. 0 0,5
Visual
confirmation
Source: Jakob Nielsen
the WAITING experience

21. 0 0,5 1,5
Visual
confirmation
Understand
Navigation
Source: Jakob Nielsen
the WAITING experience

22. 0 0,5 1,5 3
Visual
confirmation
Understand
Navigation
Relevant
Content?
Source: Jakob Nielsen
the WAITING experience

23. 0 0,5 1,5 3 10
Visual
confirmation
Understand
Navigation
Relevant
Content?
Bye
Bye!
Source: Jakob Nielsen
the WAITING experience

24. Offline vs. Online

29. Mobile moments?

35. “Both offline and online consumers
associate (slow) performance with
poor customer service”

36. Click away slidePerformance tolerance?

37. Queuing for iPhone6 launch - London 2014
Purpose vs. Context

38. Online users often lack context for delays...

39. ...and see no other option than to click away

40. “Your website is at it’s best when
it creates the feeling that you don’t
have to work to achieve your goal”

41. Part 2: Design for fast experience

42. The Skip: http://musicmachinery.com/2014/05/02/the-skip/

43. “Hit them with a beat! The decision to continue
listening to a song is often determined in the first 10
seconds” - Dr. Dre, Source Magazine
The Skip: http://musicmachinery.com/2014/05/02/the-skip/

44. Current state of responsive web ;-(

45. WiFi 3G
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

46. Optimize for #mobilegeddon

47. Responsive & Fits on every screen

48. NO FLASH! EVER!

49. Eliminate faulty redirects...

50. Again... Speed!

52. 5 fast design ‘hacks’ to avoid the (mobile) ‘skip’

53. 1. Speed-up your perception

54. Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

55. Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

56. Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

57. Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

58. “The faster you can visualize your content,
the more engaged your visitors will become”

59. 2. Defer non-priority content

60. Which contents loads in which order?

61. A: Load carousel first B: Delayed download
20% time spent on priority content 1% time spent on priority content
http://www.nngroup.com/articles/website-response-times/

62. 83% of all Twinkle100 sites loads menu
before content...

65. “The faster you can paint your priority content,
the more engaged your visitors will become”

66. 3. Sequencing

68. “Users might overlook things that change
too fast and/or often. Changeable screen
elements are harder to understand in a
limited timeframe”

69. Homepage Search
Product
overview
Product
Detail
Basket

70. Homepage Search
Product
overview
Product
Detail
Basket

71. Homepage Search
Product
overview
Product
Detail
Basket
Understand
navigation
(1-2 sec.)
Consistent
navigation
(0,5-1 sec.)
Renew your
orientation
(1-2 sec.)
renew
your navigation
(1-2 sec.)
Consistent
navigation
(0,5-1 sec.)

72. Consistent, simple & user generated navigation

73. Design your Carousel

74. Item 1 Item 2 Item 3 Item 4
Call to action ><
Descriptive labels
Buy me?
Arrows for navigation
direction

75. Item 1 Item 2 Item 3 Item 4
Call to action ><
Descriptive labels
Buy me?
Arrows for navigation
direction
Call to action first
Load other items
seperately, in the
background
Load only primary
image second

76. 4. Increase perceived value

77. Homepage Search
Product
overview
Product
Detail
Payment
Tolerated
speed

78. Fast response = Fast Experience?

79. The kayak effect: http://bit.ly/UgTneD
People prefer to wait for up
to a minute to get what they
want from an app rather
than get it instantly – if, and
it’s an important if, they
believe the app is working
for them

80. http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed

82. http://blog.placeit.net/ux-tactics-make-slow-things-seem-faster/

83. Show effort,
provide specific content,
build trust

84. 5. Let the device work...

87. Make life easy, insert touch events...

88. Search

89. Touch gestures

90. Native gestures

91. Scrolling

92. Questions so far?

93. Part 3: Find out what works

94. Frictionless = Happy users

95. Frictionless = Reducing Complexity

96. Frictionless = Recognizable navigation

97. Frictionless = Fast delivery

98. Trouble is stickyness?
Gum/Shoe
Reaching stickeyness..

99. With modern day technologies it’s no longer IF
we can build, but if anyone will CARE...

100. That’s why we have to learn & adapt fast...

101. One Metric That Matters

102. Importance of correlation vs. causation

103. 1
100
10000
Jan Feb Mar Apr May Jun Jul Aug Sept Oct Nov Dec
Relation between Ice cream and drownings?
Ice cream consumption Drownings

104. http://www.flickr.com/photos/25159787@N07/3766111564

105. http://www.flickr.com/photos/25159787@N07/3766111564
1
100
10000
Jan Feb Mar Apr May Jun Jul Aug Sept Oct Nov Dec
True causality
Ice cream consumption Drownings Temperature

106. A leading, causal, connection is
the analytics superpower...

107. That’s why we pick one at at time...

108. Predicting downtime

111. All systems green?

112. Or not?

113. 2 examples

114. Challenge: Can we predict downtime?

115. 0
15
30
45
60
0 5 10 15 20 25 30 35 40 45 50 55 60
#pageviews
Example downtime pattern
Min/Hour

116. 0
15
30
45
60
0 5 10 15 20 25 30 35 40 45 50 55 60
Regular operations
#pageviews
Example downtime pattern
Min/Hour

117. 0
15
30
45
60
0 5 10 15 20 25 30 35 40 45 50 55 60
Regular operations
News
papers
#pageviews
Example downtime pattern
Min/Hour

118. 0
15
30
45
60
0 5 10 15 20 25 30 35 40 45 50 55 60
Regular operations
News
papers
Alerts?
#pageviews
Example downtime pattern
Min/Hour

119. 0
15
30
45
60
0 5 10 15 20 25 30 35 40 45 50 55 60
Regular operations
News
papers
Alerts? Downtime
#pageviews
Example downtime pattern
Min/Hour

120. Min/Hour
#pageviews
0
15
30
45
60
0 5 10 15 20 25 30 35 40 45 50 55 60
Regular operations
News
papers
Alerts? Downtime
Example downtime pattern
This is where we need to be!

121. Min/Hour
#pageviews
0
15
30
45
60
0 5 10 15 20 25 30 35 40 45 50 55 60
Regular operations
News
papers
Alerts? Downtime
2.
Social
Media
This is where we need to be!
1.
Click
Behavior
Example downtime pattern
Min/Hour

122. Step 1: Profiling

124. Clickpath prediction

125. Step 2: Detection

126. How fast do I need to be?

127. Step 3: Filter social media

128. + = Predicting downtime?
Sentiment Profile Behavior
0
15
30
45
60
0 5 10 15 20 25 30 35 40 45 50 55 60

129. Test results
(Data derived from incident analysis of 3 websites, across a period of 4 months.
Data points matched (manually) over time period, per incident)

130. Time period in which we can detect a persistent
change in pattern per type of monitoring
0
15
30
45
60
0 5 10 15 20 25 30 35 40 45 50 55 60
Social Alerting
Change in click behavior
Performance
alerting
Example downtime pattern

131. Your mileage may vary... for now, type of incident
determines predictive nature

133. 3 types of data:
Which pages are clicked on?
How fast is it on every device?
Which elements do they click on?

134. Real User monitoring

135. 1
Insert tag (.js file) into
(mobile) web pages
Pages are requested
from browser/device
As pages execute,
tag collects
performance metrics
After onload tag send
detailed report for
further analysis
tag.js
tag.js
tag.js
tag.js
2 3 4

136. Top 5 DESKTOPTop 5 DESKTOPTop 5 DESKTOP
Top Browser type Bouncerate avg. Back-End Time avg. Front-End time Total avg. load time
1 Chrome30 49% 0.26 1.31 1.61
2 IE10 51% 0.27 0.81 1.18
3 Firefox25 48% 0.35 1.42 1.88
4 IE9 51% 0.27 1.26 1.61
5 Mobile Safari7 48% 0.52 1.86 2.79
Top 5 MOBILETop 5 MOBILETop 5 MOBILE
Browser type Bouncerate Backend Time FrontEnd time Loadtime
1 Android 4 72% 0.27 2.38 2.64
2 Mobile Safari 7 53% 0.93 1.04 2.58
3 Chrome Mobile 30 75% 0.40 1.19 1.99
4 Chrome Mobile 18 82% 0.41 1.53 2.25
5 Android 2 59% 0.72 1.88 3.05
Browsers, usage, performance...

138. Heatmapping

139. Where do you click to book a hotel?

140. As designed Homepage Last Minute
Product type
Destination
Preferences
Departure
Search?
Free search?

141. + =
Real
User
Monitoring
Heat
mapping
Money
in the bank

142. Are you #fast enough?
http://webpagetest.org
http://benchmark.measureworks.nl

144. Set your thresholds...

145. ...experiment to move the needle

146. Validating experiments:
B.R.A.S.S. framework

147. Blink Relevance Availability Scalability Sum

148. Blink Relevance Availability Scalability Sum
5-second rule
Gut feeling
Instinct score
Don’t overthink it

149. Blink Relevance Availability Scalability Sum
5-second rule
Gut feeling
Instinct score
Don’t overthink it
Do we have the
available
resources?
Do we have the
skills?
Do we have the
tools?
Is it expensive?

150. Blink Relevance Availability Scalability Sum
5-second rule
Gut feeling
Instinct score
Don’t overthink it
Is this Channel
relevant to your
product/service?
Does your
audience hang out
on this channel?
Can you target
them effectively?
Do we have the
available
resources?
Do we have the
skills?
Do we have the
tools?
Is it expensive?

151. Blink Relevance Availability Scalability Sum
5-second rule
Gut feeling
Instinct score
Don’t overthink it
Is this Channel
relevant to your
product/service?
Does your
audience hang out
on this channel?
Can you target
them effectively?
Do we have the
available
resources?
Do we have the
skills?
Do we have the
tools?
Is it expensive?
How scalable is
this channel?
Can we easily
increase it?
Law of diminishing
returns

152. Blink Relevance Availability Scalability Sum
5-second rule
Gut feeling
Instinct score
Don’t overthink it
Is this Channel
relevant to your
product/service?
Does your
audience hang out
on this channel?
Can you target
them effectively?
Do we have the
available
resources?
Do we have the
skills?
Do we have the
tools?
Is it expensive?
How scalable is
this channel?
Can we easily
increase it?
Law of diminishing
returns
1-5 1-5 1-5 1-5 BRASS score

154. bit.ly/brassframework

155. Iz overwhelmed?

156. Thanks! More questions?
M: jtjepkema@measureworks.nl
T: @jeroentjepkema
W: www.measureworks.nl
View slides: bit.ly/MW-MultiChannel15