Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MeasureWorks - Design for Fast Experiences (Startup session).key

970 views

Published on

Slides from my session at StartupBootcamp Smart City & Living program... 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 startups should care about speed when building product, how to improve design with speed and how to measure & optimize speed and beat the (corporate) competition...

Published in: Internet
  • Be the first to comment

MeasureWorks - Design for Fast Experiences (Startup session).key

  1. 1. @jeroentjepkema multichannel 2015 Fast, Responsive, Experiences
  2. 2. a.k.a. Design for First Impressions...
  3. 3. Part 1: Why should we care?
  4. 4. #mobilegeddon
  5. 5. Back to business...
  6. 6. ...True intent conversion rate
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. On average a fast experience leads to a 4% higher true intent conversion rate...
  12. 12. That’s not my website?
  13. 13. 0 25 50 75 100 1 2 3 4 5 Slow Average Fast %ofrespondentsthatratedtheactualwebsitespeed Design score (1=bad - 5=beautiful)
  14. 14. 60% of people ranked design lower when they experienced a slow website
  15. 15. Why should we care?
  16. 16. the WAITING experience Source: Jakob Nielsen
  17. 17. 0 0,5 Visual confirmation Source: Jakob Nielsen the WAITING experience
  18. 18. 0 0,5 1,5 Visual confirmation Understand Navigation Source: Jakob Nielsen the WAITING experience
  19. 19. 0 0,5 1,5 3 Visual confirmation Understand Navigation Relevant Content? Source: Jakob Nielsen the WAITING experience
  20. 20. 0 0,5 1,5 3 10 Visual confirmation Understand Navigation Relevant Content? Bye Bye! Source: Jakob Nielsen the WAITING experience
  21. 21. http://amzn.to/1biSi6C
  22. 22. Offline vs. Online
  23. 23. Mobile moments?
  24. 24. “Both offline and online consumers associate (slow) performance with poor customer service”
  25. 25. Click away slidePerformance tolerance?
  26. 26. 0 10 20 30 40 50 60 70 80 90 100 0 1 2 3 4 5 6 7 8 9 10 Bouncerate per pagetype/session Bouncerate(%) Page load time (sec.) Median Campaign Product search
  27. 27. 0 10 20 30 40 50 60 70 80 90 100 0 1 2 3 4 5 6 7 8 9 10 Bouncerate(%) Page load time (sec.) Median Campaign Product search Bouncerate per pagetype/session
  28. 28. Queuing for iPhone6 launch - London 2014 Purpose vs. Context
  29. 29. Online users often lack context for delays...
  30. 30. ...and see no other option than to click away
  31. 31. “Your website is at it’s best when it creates the feeling that you don’t have to work to achieve your goal”
  32. 32. Part 2: Design for fast experience
  33. 33. The Skip: http://musicmachinery.com/2014/05/02/the-skip/
  34. 34. “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/
  35. 35. Current state of responsive web ;-(
  36. 36. WiFi 3G Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  37. 37. Optimize for #mobilegeddon
  38. 38. Responsive & Fits on every screen
  39. 39. NO FLASH! EVER!
  40. 40. Eliminate faulty redirects...
  41. 41. Again... Speed!
  42. 42. Fixing vs. Designing
  43. 43. Search/Orientation phase Perception of experience 1 Performance influence cycle http://twinkle100.measureworks.nl
  44. 44. Delivered experience Your website 3 5 2 Stimulate content/ conversion 4 Performance influence cycle Search/Orientation phase Perception of experience 1 http://twinkle100.measureworks.nl
  45. 45. Eco System of Me?
  46. 46. Your BRAND Eco System of Me?
  47. 47. every day Flipboard e-mail Twitter Fitbit Foursquare Human.co facebook twitter linkedin NBA.com News apps Your BRAND Eco System of Me?
  48. 48. every week every day Flipboard e-mail Netflix Youtube Twitter Dropbox Parkmobile Soundcloud Evernote Fitbit Foursquare Human.co whatsapp Facetime facebook twitter linkedin NBA.com News apps Your BRAND Eco System of Me?
  49. 49. every week every day Flipboard e-mail Shazam Google Hangouts Netflix Youtube Twitter Dropbox Parkmobile Google Plus Soundcloud Evernote Google Maps Appie Skype Pathe Youtube Meetup Fitbit Foursquare Human.co whatsapp Facetime facebook twitter linkedin NBA.com News apps every month Your BRAND Eco System of Me?
  50. 50. ? every week every day Flipboard e-mail shazam Google Hangouts Netflix Youtube Twitter Dropbox Parkmobile Google Plus Soundcloud Evernote Google Maps appie Skype Pathe Youtube Meetup Fitbit Foursquare Human.co whatsapp Facetime facebook twitter linkedin NBA.com every month Your BRAND Eco System of Me?
  51. 51. Which order? Product, Price, User Experience
  52. 52. 5 fast design ‘hacks’ to avoid the (mobile) ‘skip’
  53. 53. 1. Speed-up your perception
  54. 54. http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0
  55. 55. http://answers.yahoo.com/question/index?qid=1005081200005
  56. 56. nytimes.com/2004/02/27/nyregion/27BUTT.html
  57. 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. 58. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  59. 59. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  60. 60. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  61. 61. “The faster you can visualize your content, the more engaged your visitors will become”
  62. 62. 2. Defer non-priority content
  63. 63. Which contents loads in which order?
  64. 64. 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/
  65. 65. 83% of all Twinkle100 sites loads menu before content...
  66. 66. “The faster you can paint your priority content, the more engaged your visitors will become”
  67. 67. 3. Sequencing
  68. 68. “Users might overlook things that change too fast and/or often. Changeable screen elements are harder to understand in a limited timeframe”
  69. 69. Homepage Search Product overview Product Detail Basket
  70. 70. Homepage Search Product overview Product Detail Basket
  71. 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. 72. Consistent, simple & user generated navigation
  73. 73. Design your Carousel
  74. 74. Item 1 Item 2 Item 3 Item 4 Call to action >< Descriptive labels Buy me? Arrows for navigation direction
  75. 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. 76. 4. Increase perceived value
  77. 77. Homepage Search Product overview Product Detail Payment Tolerated speed
  78. 78. Fast response = Fast Experience?
  79. 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. 80. http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed
  81. 81. http://blog.placeit.net/ux-tactics-make-slow-things-seem-faster/
  82. 82. Show effort, provide specific content, build trust
  83. 83. 5. Let the device work...
  84. 84. Make life easy, insert touch events...
  85. 85. Search
  86. 86. Touch gestures
  87. 87. Native gestures
  88. 88. Scrolling
  89. 89. Questions so far?
  90. 90. Part 3: Find out what works
  91. 91. Frictionless = Happy users
  92. 92. Frictionless = Reducing Complexity
  93. 93. Frictionless = Recognizable navigation
  94. 94. Frictionless = Fast delivery
  95. 95. Trouble is stickyness? Gum/Shoe Reaching stickeyness..
  96. 96. With modern day technologies it’s no longer IF we can build, but if anyone will CARE...
  97. 97. That’s why we have to learn & adapt fast...
  98. 98. One Metric That Matters
  99. 99. Every website has goals
  100. 100. Your Analytics measures the movement towards these goals
  101. 101. Importance of correlation vs. causation
  102. 102. 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
  103. 103. http://www.flickr.com/photos/25159787@N07/3766111564 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. 104. 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
  105. 105. Holy causation, Batman...
  106. 106. A leading, causal, connection is the analytics superpower...
  107. 107. That’s why we need to pick one at at time...
  108. 108. Landing page design A/B testing Cohort analysis General analytics URL shortening Funnel analytics Influencer Marketing Publisher analytics SaaS analytics Gaming analytics User interaction Customer satisfaction KPI dashboardsUser segmentation User analytics Spying on users
  109. 109. Predicting downtime
  110. 110. Challenge: Can we predict downtime?
  111. 111. 0 15 30 45 60 0 5 10 15 20 25 30 35 40 45 50 55 60 #pageviews Example downtime pattern Min/Hour
  112. 112. 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
  113. 113. 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
  114. 114. 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
  115. 115. 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
  116. 116. 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!
  117. 117. 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
  118. 118. Step 1: Patterns in Client Behavior?
  119. 119. Clickpath prediction
  120. 120. Step 2: Detection
  121. 121. How fast do I need to be?
  122. 122. Step 3: False positives?
  123. 123. + = Predicting downtime? Sentiment Profile Behavior 0 15 30 45 60 0 5 10 15 20 25 30 35 40 45 50 55 60
  124. 124. 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)
  125. 125. 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
  126. 126. Your mileage may vary... for now, type of incident determines predictive nature
  127. 127. 3 types of data: Which pages are clicked on? How fast is it on every device? Which elements do they click on?
  128. 128. Synthetic Benchmark
  129. 129. Go check your site @ Webpagetest.org (For settings: Akamai State of the Internet)
  130. 130. Real User monitoring
  131. 131. 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
  132. 132. 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...
  133. 133. Heatmapping
  134. 134. Where do you click to book a hotel?
  135. 135. As designed Homepage Last Minute Product type Destination Preferences Departure Search? Free search?
  136. 136. + = Real User Monitoring Heat mapping Money in the bank
  137. 137. Are you #fast enough? http://webpagetest.org http://benchmark.measureworks.nl
  138. 138. Quick links Measure Performance: Google Analytics Site speed: http://bit.ly/1ivGWTt Soast mPulse: http://bit.ly/I5ngs8 Webpagetest: www.webpagetest.org Optimize performance: Yslow: yslow.org GTmetrix: gtmetrix.com Google Pagespeed tools: https://developers.google.com/speed/pagespeed/
  139. 139. What’s your time to first tweet? https://blog.twitter.com/2012/improving-performance-on-twittercom
  140. 140. Defining Service Levels
  141. 141. First, establish a baseline:
  142. 142. A pre-defined set of metrics First, establish a baseline:
  143. 143. A pre-defined set of metrics that describes normal behavior First, establish a baseline:
  144. 144. A pre-defined set of metrics that describes normal behavior in order to detect variancies First, establish a baseline:
  145. 145. and to be comparable within historic context A pre-defined set of metrics that describes normal behavior in order to detect variancies First, establish a baseline:
  146. 146. A practical (and easy DIY) example:
  147. 147. Service Window Purchasing a bed, must be completed (speed), where every page loads under 3 sec., from any location in the Netherlands, for 95% of all users, every 5 minutes between 6am and 12pm, using IE9 and higher, Customer journey Metric: Speed Target: Sec User scenario User locations Percentile measured with Synthetic Monitoring. Monitoring type Business Performance
  148. 148. Repeatable, End-User focused & Quantifiable
  149. 149. Performance SLA for Bol.com
  150. 150. Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum 0 12,5 25 37,5 50 62,5 75 87,5 100 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 Non-Bouncerate(%) Categorienaam Pageviews(#) Bouncerate # Pageviews Bol.com: Speed vs. Engagement per month
  151. 151. 0 12,5 25 37,5 50 62,5 75 87,5 100 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 Non-Bouncerate(%) Categorienaam Pageviews(#) Bouncerate # Pageviews Bol.com: Speed vs. Engagement per month Non-Bounce Mobile LD50: 4.85 sec. Baseline: 2,7 sec. Poverty Line: 10,6 sec. Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum
  152. 152. ...experiment till you find what moves the needle
  153. 153. Validating experiments: B.R.A.S.S. framework
  154. 154. Blink Relevance Availability Scalability Sum
  155. 155. Blink Relevance Availability Scalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it
  156. 156. 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?
  157. 157. 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?
  158. 158. 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
  159. 159. 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
  160. 160. bit.ly/brassframework
  161. 161. Iz overwhelmed?
  162. 162. Thanks! More questions? M: jtjepkema@measureworks.nl T: @jeroentjepkema W: www.measureworks.nl View slides: bit.ly/MW-SCL15

×