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.

Oli Gardner – Data Driven Design

3,643 views

Published on

a

Published in: Data & Analytics
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ●●● https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★★ How Long Does She Want You to Last? ★★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here�s the link to the report ♥♥♥ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Oli Gardner – Data Driven Design

  1. 1. 3DDATA-DRIVEN DESIGN
  2. 2. 1
  3. 3. 67%OF M AR KETERS SAID THEY D ON’T HAVE ENO UGH DATA TO DO TH EIR J OB EF F EC TIVELY. 67% * who responded to my research surveys * @oligardner #mktfest
  4. 4. why create an explainer video?
  5. 5. We did it because it was trendy
  6. 6. DESIGN DECISIONS NEED TO BE INFORMED BY DATA NOT TRENDS @oligardner #mktfest
  7. 7. BEING TRENDY DOESN’T MAKE IT RIGHT
  8. 8. Scrappy
  9. 9. @oligardner bit.ly/oli-prg
  10. 10. What does it mean to be data-driven?
  11. 11. WE SHOULD BE DATA-INFORMED AND CUSTOMER-DRIVEN Talia Wolf - @TaliaGW #mktfest “ “
  12. 12. I interviewed and surveyed over 800 people who work on marketing teams
  13. 13. DESIGNER COPYWRITERMARKETER
  14. 14. DESIGNER COPYWRITERMARKETER
  15. 15. DESIGNER COPYWRITER Writers want me to start designing before they give me content. MARKETER
  16. 16. 81%OF DESIGNERS HAVE TO START THEIR D ESIGN WORK BEFORE THEY RECEIVE THE COPY 81% “Design gets frustrating when you don't have everything you need from the beginning” * * % of designers polled in a survey regarding working in marketing “It’s like painting by numbers.”
  17. 17. DESIGNER COPYWRITER Writers don't get that search engines see things differently to humans. MARKETER
  18. 18. DESIGNER COPYWRITER Marketers have no understanding of customer behaviour. MARKETER
  19. 19. DESIGNER they're too myopic and enjoy naval gazing. MARKETER COPYWRITER
  20. 20. na·vel-gaz·ing /‘ nāvel gāziNG/ noun self-indulgent or excessive contemplation of oneself…
  21. 21. DESIGNER …they don't respect design
 and think they know how it should be done. MARKETERMARKETER COPYWRITER
  22. 22. 98%OF MARKETERS SAID THEY ARE RESPONSIBLE FOR GIVING DES IGN FEEDBACK TO DESIGNE RS 98%* * % of marketers polled in a survey regarding working with designers and copywriters in marketing
  23. 23. 87%OF MARKETERS WHO GIVE D ESIGN FEEDBACK B ELI EVE THEY ARE QUALIFIED TO DO S O. 87%* * % of marketers polled in a survey regarding working with designers and copywriters in marketing
  24. 24. 87%OF MARKETERS WHO GIVE D ESIGN FEEDBACK B ELI EVE THEY ARE QUALIFIED TO DO S O. 87%* * % of marketers polled in a survey regarding working with designers and copywriters in marketing
  25. 25. DESIGNER MARKETER Designers are too sensitive. COPYWRITER
  26. 26. Are you a designer?
  27. 27. MacGyver.
  28. 28. MacGyvered
  29. 29. design == empathy
  30. 30. design != copying others
  31. 31. 2011 2010 PARALLAX SCROLLING A beautiful motion design and photographic technique, parallax scrolling can create an excellent experience. Sadly it was quickly abused. CINEMAGRAPHS Another beautiful concept, that didn’t gain much traction, instead its subtlety was passed over in favour of the surging animated GIF. STICKY NAVIGATION A similar device to the HelloBar, but designed for anchor (in-page) navigation. Something that can really help long landing pages. INLINE FORM FIELD LABELS This one blew up UX and CRO communities. Primarily because the label disappeared when the field was clicked, removing context and hints. BUTTON COLOUR As affordable A/B testing tools hit the market, so cometh a slew of bad case studies that encourage bad experimentation practices. HELLO BAR The first sticky bar emerges from Digital Telepathy, allowing you to place persistent offers at the top of the page. 2012 EXPLAINER VIDEOS Everyone needs an explainer video, right? Explain that to me. FULLSCREEN HERO IMAGES Wide adoption of fullscreen background images was the beginning of many trends that would harm readability of the all-important above-the-fold value prop area of web pages everywhere. 1991 WWW The World Wide Web is made available to the general public. 1994 THE FOLD Jakob Nielsen proclaims that people don’t scroll, and most debated topic in digital marketing begins, and never stops. 1997 CAPTCHAS The first evil interruptive device is added to web forms. Creating a usability nightmare. 1998 POPUPS Things get even uglier as web designers and developers begin hacking browser behaviour. The hard to escape Javascript popup empowers the black hats to start misbehaving. 2004 PINOT NOIR Not a design trend, but an example of the power trends can wield when left unchecked. 2007 CAROUSELS Oft looked upon as a way to pacify stakeholder politics, carousel sliders hit every homepage adding massive amounts of content destined never to be seen. RE-CAPTCHA The evil captcha is turned into a device that does good – by crowdsourcing digitizing of hard- to-read books. Gets acquired by Google in 2009. RESPONSIVE WEB DESIGN One of the biggest web bandwagons ever. RWD seemed like a great idea at the time, but the lack of control over the mobile experience can cause issues. MOBILE-FIRST DESIGN Closely tied to RWD, mobile-first sought to future-proof web experiences by placing emphasis on mobile – because all of your traffic is mobile, right? EYE TRACKING An expensive and fancy way to detect what people are looking at on a web page. It quickly gained notoriety when the “baby gaze” experiment did the rounds on marketing blogs. 2013 INLINE FORM FIELD LABELS II A community-led success story. Designers created a way to keep the label inline without disappearing. HAMBURGER MENU Massive debates raged about this one, but influence from OS designers has forced this into mass adoption. FLAT DESIGN Affordance is thrown out the window en masse with a trend that can destroy app usability. 2014 BACKGROUND VIDEOS The fullscreen hero image extends to video, further impacting readability and increasing instances of “false bottoms”. CONGRATULATIONS! A Facebook hack more than a design trend. But quite hilarious. Congratulations!!! GHOST BUTTONS Rectangles with opaque fills create quite awesome secondary state buttons, but poor affordance and readability can render them unclickable-looking. GOOD COP / BAD COP The psychological term for the two- button popup, whereby you have to click something you don’t agree with to exit the experience. SCROLLJACKING 20 years of interaction design thrown down the toilet. Designers once more try to re-invent the quite perfect browser scrolling mechanism. 2015 SCROLL-TRIGGERED ANIMATIONS As you scroll down the page, images and text start to fly in, drawing your attention to them. Great the first time you see them. Thereafter annoying as hell. CSS ANIMATED CTAs These have the ability to get really out of hand. Although there are some really nice subtle effects. WELCOME MAT An entrance-overlay method from SumoMe whereby the entire screen is covered. An interruptive experience that has seen some positive updates. 2016 OVERLAYS Unbounce signals the end to the popup, ushering in a new era of responsible marketing practices. SKELETON SCREENS A technique where a wireframe-like layout appears before the content to accelerate load times and provide a signal that loading is happening. CONVERSATIONAL FORMS One of the most interesting new interaction models to emerge, conversational forms turn a regular web form into a chat-like experience. CONFIRM SHAMING A new name for good cop / bad cop emerges. Manipulinks is another. Regardless of the name, I hope one sticks as it makes it easier to track the trend. STICKY TOP AND BOTTOM Top-anchored sticky bars are awesome, bottom ones feel slightly more interruptive, but when both are used at the same time it destroys the viewport. 2017 SMART NAVIGATION This will be an interesting one, where navigational devices will be presented to visitors where and when they hold the most contextual importance and utility. ASYMMETRIC DESIGN Could this simple yet elegant and dynamic trend be the saviour of the false bottom? Quite possibly. 2017? 2017 will be an interesting year for trends, hopefully we’ll see an increase in experimentation and validation. DESIGN TRENDLINE @OliGardner @Unbounce #mktfest
  32. 32. - Pinot Noir
  33. 33. - Pinot Noir - Another wine varietal
  34. 34. - Pinot Noir - Another wine varietal
  35. 35. 2004 Image Source: GQ
  36. 36. Source: http://www.decanter.com/wine-news/sideways-effect-confirmed-76585/
  37. 37. “It only takes one tree to make a thousand matches.
 

  38. 38. “It only takes one tree to make a thousand matches.
 
 Only takes one match to burn a thousand trees.” — Stereophonics
  39. 39. I DRINK A LOT OF WINE
  40. 40. But I haven’t bought a bottle of Merlot in 13 years #TRENDpower
  41. 41. 2011 2010 2012 1991 1994 1997 1998 2004 2007 2013 2014 2015 2016 2017 PARALLAX SCROLLING A beautiful motion design and photographic technique, parallax scrolling can create an excellent experience. Sadly it was quickly abused. CINEMAGRAPHS Another beautiful concept, that didn’t gain much traction, instead its subtlety was passed over in favour of the surging animated GIF. STICKY NAVIGATION A similar device to the HelloBar, but designed for anchor (in-page) navigation. Something that can really help long landing pages. INLINE FORM FIELD LABELS This one blew up UX and CRO communities. Primarily because the label disappeared when the field was clicked, removing context and hints. BUTTON COLOUR As affordable A/B testing tools hit the market, so cometh a slew of bad case studies that encourage bad experimentation practices. HELLO BAR The first sticky bar emerges from Digital Telepathy, allowing you to place persistent offers at the top of the page. EXPLAINER VIDEOS Everyone needs an explainer video, right? Explain that to me. FULLSCREEN HERO IMAGES Wide adoption of fullscreen background images was the beginning of many trends that would harm readability of the all-important above-the-fold value prop area of web pages everywhere. WWW The World Wide Web is made available to the general public. THE FOLD Jakob Nielsen proclaims that people don’t scroll, and most debated topic in digital marketing begins, and never stops. CAPTCHAS The first evil interruptive device is added to web forms. Creating a usability nightmare. POPUPS Things get even uglier as web designers and developers begin hacking browser behaviour. The hard to escape Javascript popup empowers the black hats to start misbehaving. PINOT NOIR Not a design trend, but an example of the power trends can wield when left unchecked. CAROUSELS Oft looked upon as a way to pacify stakeholder politics, carousel sliders hit every homepage adding massive amounts of content destined never to be seen. RE-CAPTCHA The evil captcha is turned into a device that does good – by crowdsourcing digitizing of hard- to-read books. Gets acquired by Google in 2009. RESPONSIVE WEB DESIGN One of the biggest web bandwagons ever. RWD seemed like a great idea at the time, but the lack of control over the mobile experience can cause issues. MOBILE-FIRST DESIGN Closely tied to RWD, mobile-first sought to future-proof web experiences by placing emphasis on mobile – because all of your traffic is mobile, right? EYE TRACKING An expensive and fancy way to detect what people are looking at on a web page. It quickly gained notoriety when the “baby gaze” experiment did the rounds on marketing blogs. INLINE FORM FIELD LABELS II A community-led success story. Designers created a way to keep the label inline without disappearing. HAMBURGER MENU Massive debates raged about this one, but influence from OS designers has forced this into mass adoption. FLAT DESIGN Microsoft’s 2010 efforts were amplified by Apple and affordance is thrown out the “window” en masse. BACKGROUND VIDEOS The fullscreen hero image extends to video, further impacting readability and increasing instances of “false bottoms”. CONGRATULATIONS! A Facebook hack more than a design trend. But quite hilarious. Congratulations!!! GHOST BUTTONS Rectangles with opaque fills create quite awesome secondary state buttons, but poor affordance and readability can render them unclickable-looking. GOOD COP / BAD COP The psychological term for the two- button popup, whereby you have to click something you don’t agree with to exit the experience. SCROLLJACKING 20 years of interaction design thrown down the toilet. Designers once more try to re-invent the quite perfect browser scrolling mechanism. SCROLL-TRIGGERED ANIMATIONS As you scroll down the page, images and text start to fly in, drawing your attention to them. Great the first time you see them. Thereafter annoying as hell. CSS ANIMATED CTAs These have the ability to get really out of hand. Although there are some really nice subtle effects. WELCOME MAT An entrance-overlay method from SumoMe whereby the entire screen is covered. An interruptive experience that has seen some positive updates. OVERLAYS Unbounce signals the end to the popup, ushering in a new era of responsible marketing practices. SKELETON SCREENS A technique where a wireframe-like layout appears before the content to accelerate load times and provide a signal that loading is happening. CONVERSATIONAL FORMS One of the most interesting new interaction models to emerge, conversational forms turn a regular web form into a chat-like experience. CONFIRM SHAMING A new name for good cop / bad cop emerges. Manipulinks is another. Regardless of the name, I hope one sticks as it makes it easier to track the trend. STICKY TOP AND BOTTOM Top-anchored sticky bars are awesome, bottom ones feel slightly more interruptive, but when both are used at the same time it destroys the viewport. SMART NAVIGATION This will be an interesting one, where navigational devices will be presented to visitors where and when they hold the most contextual importance and utility. ASYMMETRIC DESIGN Could this simple yet elegant and dynamic trend be the saviour of the false bottom? Quite possibly. 2017? 2017 will be an interesting year for trends, hopefully we’ll see an increase in experimentation and validation. Data visualization has become big business, one whose needs will only grow as data expands like a new universe. After an initial peak, the quality declined as the market got swamped. INFOGRAPHICS 2016 CONVERSATIONAL FORMS One of the most interesting new interaction models to emerge, conversational forms turn a regular web form into a chat-like experience. 2016
  42. 42. NEW
 TREND THE CONVERSATIONAL FORM FROM DANISH AGENCY SPACE10
  43. 43. DATA-DRIVEN DESIGN (3D) PROCESS @oligardner #mktfest bit.ly/oli-prg 3D N H I
  44. 44. 1 THE 3D PROJECT PLAYBOOK A data-driven design project starts with
 The 3D Playbook. An interactive optimization lookup tool for taking the overwhelming amount of data that exists, and narrowing it down to the types, sources, and formats that are most relevant to what you’re working on. N
  45. 45. 3D N H I Isolate the data sources you NEED BOUNCE RATE SESSION REC. SESSION REC. POLL MOBILE QA QA ON MOBILE USABILITY TEST USABILITY TEST CONV FORM CONV FORM PAGE LENGTH NPS SURVEY SCROLL MAP CLICK MAP FORM ABANDON LEAD DATA NEW VS RETURN SCROLL MAP CLICK MAP LEAD DATA Choose object of interest SESSION REC. QA ON MOBILE USABILITY TEST SCROLL MAP CLICK MAP LEAD DATA
  46. 46. THE 3D PLAYBOOK ANINTERACTIVEOPTIMIZATIONLOOKUPCHARTFORMARKETINGTEAMS 3D bit.ly/oli-prg
  47. 47. 2 OBSERVATIONS &
 MICRO METRICS Every observed pain point needs a corresponding solution. If you can measure it, you can optimize and improve it. Assigning micro metrics ensures you can measure the impact of every design decision you make. N THE 3D PROJECT PLAYBOOK A data-driven design project starts with
 The 3D Playbook. An interactive optimization lookup tool for taking the overwhelming amount of data that exists, and narrowing it down to the types, sources, and formats that are most relevant to what you’re working on.
  48. 48. Mobile QA Usability Test Scroll Map Click Map Lead Data 3 N H E I Session Rec.
  49. 49. 3 N H E I Session Rec. Mobile QA Usability Test Scroll Map Click Map Lead Data
  50. 50. Apologies for the poor experience with that form!
  51. 51. Hi Oli, Wow! I have been a consultant for 25+ years and can say without hesitation that this is the best example of taking responsibility for an error that resulted in a bad customer experience. Equally important was the timeliness of this follow up – thank you! Thanks for the link. Please note that I was able to view the content via the link but was unable to complete the opt in form to download the content. I look forward to viewing the content and will be much more likely to continue to engage with the unbounce brand as a result of this email. Regards,
  52. 52. Hi Oli, Wow! I have been a consultant for 25+ years and can say without hesitation that this is the best example of taking responsibility for an error that resulted in a bad customer experience. Equally important was the timeliness of this follow up – thank you! Thanks for the link. Please note that I was able to view the content via the link but was unable to complete the opt in form to download the content. I look forward to viewing the content and will be much more likely to continue to engage with the Unbounce brand as a result of this email. Regards,
  53. 53. 3 N H E I Mobile QA Usability Test Scroll Map Click Map Lead DataSession Rec.
  54. 54. QA is essential in marketing
  55. 55. Mobile QA Usability Test Scroll Map Click Map Lead Data 3 N H E I Session Rec. ANIMATED DOTS
  56. 56. Mobile QA Usability Test Scroll Map Click Map Lead Data 3 N H E I Session Rec. CLICKING FIRST QUESTION
  57. 57. Mobile QA Usability Test Scroll Map Click Map Lead Data 3 N H E I Session Rec. 12% of people were clicking the first question.
  58. 58. Mobile QA Usability Test Scroll Map Click Map Lead Data 3 N H E I Session Rec.
  59. 59. Mobile QA Usability Test Scroll Map Click Map Lead Data 3 N H E I Session Rec. +150% increase in the number of fake or spam emails.
  60. 60. 2011 2010 2012 1991 1994 1997 1998 2004 2007 2013 2014 2015 2016 2017 PARALLAX SCROLLING A beautiful motion design and photographic technique, parallax scrolling can create an excellent experience. Sadly it was quickly abused. CINEMAGRAPHS Another beautiful concept, that didn’t gain much traction, instead its subtlety was passed over in favour of the surging animated GIF. STICKY NAVIGATION A similar device to the HelloBar, but designed for anchor (in-page) navigation. Something that can really help long landing pages. INLINE FORM FIELD LABELS This one blew up UX and CRO communities. Primarily because the label disappeared when the field was clicked, removing context and hints. BUTTON COLOUR As affordable A/B testing tools hit the market, so cometh a slew of bad case studies that encourage bad experimentation practices. HELLO BAR The first sticky bar emerges from Digital Telepathy, allowing you to place persistent offers at the top of the page. EXPLAINER VIDEOS Everyone needs an explainer video, right? Explain that to me. FULLSCREEN HERO IMAGES Wide adoption of fullscreen background images was the beginning of many trends that would harm readability of the all-important above-the-fold value prop area of web pages everywhere. WWW The World Wide Web is made available to the general public. THE FOLD Jakob Nielsen proclaims that people don’t scroll, and most debated topic in digital marketing begins, and never stops. CAPTCHAS The first evil interruptive device is added to web forms. Creating a usability nightmare. POPUPS Things get even uglier as web designers and developers begin hacking browser behaviour. The hard to escape Javascript popup empowers the black hats to start misbehaving. PINOT NOIR Not a design trend, but an example of the power trends can wield when left unchecked. CAROUSELS Oft looked upon as a way to pacify stakeholder politics, carousel sliders hit every homepage adding massive amounts of content destined never to be seen. RE-CAPTCHA The evil captcha is turned into a device that does good – by crowdsourcing digitizing of hard- to-read books. Gets acquired by Google in 2009. RESPONSIVE WEB DESIGN One of the biggest web bandwagons ever. RWD seemed like a great idea at the time, but the lack of control over the mobile experience can cause issues. MOBILE-FIRST DESIGN Closely tied to RWD, mobile-first sought to future-proof web experiences by placing emphasis on mobile – because all of your traffic is mobile, right? EYE TRACKING An expensive and fancy way to detect what people are looking at on a web page. It quickly gained notoriety when the “baby gaze” experiment did the rounds on marketing blogs. INLINE FORM FIELD LABELS II A community-led success story. Designers created a way to keep the label inline without disappearing. HAMBURGER MENU Massive debates raged about this one, but influence from OS designers has forced this into mass adoption. FLAT DESIGN Microsoft’s 2010 efforts were amplified by Apple and affordance is thrown out the “window” en masse. BACKGROUND VIDEOS The fullscreen hero image extends to video, further impacting readability and increasing instances of “false bottoms”. CONGRATULATIONS! A Facebook hack more than a design trend. But quite hilarious. Congratulations!!! GHOST BUTTONS Rectangles with opaque fills create quite awesome secondary state buttons, but poor affordance and readability can render them unclickable-looking. GOOD COP / BAD COP The psychological term for the two- button popup, whereby you have to click something you don’t agree with to exit the experience. SCROLLJACKING 20 years of interaction design thrown down the toilet. Designers once more try to re-invent the quite perfect browser scrolling mechanism. SCROLL-TRIGGERED ANIMATIONS As you scroll down the page, images and text start to fly in, drawing your attention to them. Great the first time you see them. Thereafter annoying as hell. CSS ANIMATED CTAs These have the ability to get really out of hand. Although there are some really nice subtle effects. WELCOME MAT An entrance-overlay method from SumoMe whereby the entire screen is covered. An interruptive experience that has seen some positive updates. OVERLAYS Unbounce signals the end to the popup, ushering in a new era of responsible marketing practices. SKELETON SCREENS A technique where a wireframe-like layout appears before the content to accelerate load times and provide a signal that loading is happening. CONVERSATIONAL FORMS One of the most interesting new interaction models to emerge, conversational forms turn a regular web form into a chat-like experience. CONFIRM SHAMING A new name for good cop / bad cop emerges. Manipulinks is another. Regardless of the name, I hope one sticks as it makes it easier to track the trend. STICKY TOP AND BOTTOM Top-anchored sticky bars are awesome, bottom ones feel slightly more interruptive, but when both are used at the same time it destroys the viewport. SMART NAVIGATION This will be an interesting one, where navigational devices will be presented to visitors where and when they hold the most contextual importance and utility. ASYMMETRIC DESIGN Could this simple yet elegant and dynamic trend be the saviour of the false bottom? Quite possibly. 2017? 2017 will be an interesting year for trends, hopefully we’ll see an increase in experimentation and validation. 1997 CAPTCHAS The first evil interruptive device is added to web forms. Creating a usability nightmare. 1997
  61. 61. 2011 2010 2012 1991 1994 1997 1998 2004 2007 2013 2014 2015 2016 2017 PARALLAX SCROLLING A beautiful motion design and photographic technique, parallax scrolling can create an excellent experience. Sadly it was quickly abused. CINEMAGRAPHS Another beautiful concept, that didn’t gain much traction, instead its subtlety was passed over in favour of the surging animated GIF. STICKY NAVIGATION A similar device to the HelloBar, but designed for anchor (in-page) navigation. Something that can really help long landing pages. INLINE FORM FIELD LABELS This one blew up UX and CRO communities. Primarily because the label disappeared when the field was clicked, removing context and hints. BUTTON COLOUR As affordable A/B testing tools hit the market, so cometh a slew of bad case studies that encourage bad experimentation practices. HELLO BAR The first sticky bar emerges from Digital Telepathy, allowing you to place persistent offers at the top of the page. EXPLAINER VIDEOS Everyone needs an explainer video, right? Explain that to me. FULLSCREEN HERO IMAGES Wide adoption of fullscreen background images was the beginning of many trends that would harm readability of the all-important above-the-fold value prop area of web pages everywhere. WWW The World Wide Web is made available to the general public. THE FOLD Jakob Nielsen proclaims that people don’t scroll, and most debated topic in digital marketing begins, and never stops. CAPTCHAS The first evil interruptive device is added to web forms. Creating a usability nightmare. POPUPS Things get even uglier as web designers and developers begin hacking browser behaviour. The hard to escape Javascript popup empowers the black hats to start misbehaving. PINOT NOIR Not a design trend, but an example of the power trends can wield when left unchecked. CAROUSELS Oft looked upon as a way to pacify stakeholder politics, carousel sliders hit every homepage adding massive amounts of content destined never to be seen. RE-CAPTCHA The evil captcha is turned into a device that does good – by crowdsourcing digitizing of hard- to-read books. Gets acquired by Google in 2009. RESPONSIVE WEB DESIGN One of the biggest web bandwagons ever. RWD seemed like a great idea at the time, but the lack of control over the mobile experience can cause issues. MOBILE-FIRST DESIGN Closely tied to RWD, mobile-first sought to future-proof web experiences by placing emphasis on mobile – because all of your traffic is mobile, right? EYE TRACKING An expensive and fancy way to detect what people are looking at on a web page. It quickly gained notoriety when the “baby gaze” experiment did the rounds on marketing blogs. INLINE FORM FIELD LABELS II A community-led success story. Designers created a way to keep the label inline without disappearing. HAMBURGER MENU Massive debates raged about this one, but influence from OS designers has forced this into mass adoption. FLAT DESIGN Microsoft’s 2010 efforts were amplified by Apple and affordance is thrown out the “window” en masse. BACKGROUND VIDEOS The fullscreen hero image extends to video, further impacting readability and increasing instances of “false bottoms”. CONGRATULATIONS! A Facebook hack more than a design trend. But quite hilarious. Congratulations!!! GHOST BUTTONS Rectangles with opaque fills create quite awesome secondary state buttons, but poor affordance and readability can render them unclickable-looking. GOOD COP / BAD COP The psychological term for the two- button popup, whereby you have to click something you don’t agree with to exit the experience. SCROLLJACKING 20 years of interaction design thrown down the toilet. Designers once more try to re-invent the quite perfect browser scrolling mechanism. SCROLL-TRIGGERED ANIMATIONS As you scroll down the page, images and text start to fly in, drawing your attention to them. Great the first time you see them. Thereafter annoying as hell. CSS ANIMATED CTAs These have the ability to get really out of hand. Although there are some really nice subtle effects. WELCOME MAT An entrance-overlay method from SumoMe whereby the entire screen is covered. An interruptive experience that has seen some positive updates. OVERLAYS Unbounce signals the end to the popup, ushering in a new era of responsible marketing practices. SKELETON SCREENS A technique where a wireframe-like layout appears before the content to accelerate load times and provide a signal that loading is happening. CONVERSATIONAL FORMS One of the most interesting new interaction models to emerge, conversational forms turn a regular web form into a chat-like experience. CONFIRM SHAMING A new name for good cop / bad cop emerges. Manipulinks is another. Regardless of the name, I hope one sticks as it makes it easier to track the trend. STICKY TOP AND BOTTOM Top-anchored sticky bars are awesome, bottom ones feel slightly more interruptive, but when both are used at the same time it destroys the viewport. SMART NAVIGATION This will be an interesting one, where navigational devices will be presented to visitors where and when they hold the most contextual importance and utility. ASYMMETRIC DESIGN Could this simple yet elegant and dynamic trend be the saviour of the false bottom? Quite possibly. 2017? 2017 will be an interesting year for trends, hopefully we’ll see an increase in experimentation and validation. Data visualization has become big business, one whose needs will only grow as data expands like a new universe. After an initial peak, the quality declined as the market got swamped. INFOGRAPHICS 2007 RE-CAPTCHA The evil captcha is turned into a device that does good – by crowdsourcing digitizing of hard- to-read books. Gets acquired by Google in 2009. 2007
  62. 62. Not all books should be preserved.
  63. 63. Scrappy
  64. 64. 4 N H E I What are Micro Metrics?
  65. 65. What are Micro Metrics? Micro-metrics measure
 how your design decisions
 impact on-page behaviour 4 N H E I
  66. 66. CTA
  67. 67. CTA HEALTHY BODY
  68. 68. CTA HEALTHY BODY HEALTHY PAGE
  69. 69. CTA MICRO METRIC: # OF CLICKS ON “FEATURES” NAV ITEM
  70. 70. CTA MICRO METRIC: # OF SLIDES VIEWED
  71. 71. CTA MICRO METRIC: % WHO CAN RECALL
 IMPORTANT DETAILS
  72. 72. CTA MICRO METRIC: % OF ANGRY RESPONSES TYPED IN LIVE CHAT
  73. 73. CTA MICRO METRICS: % OF FAKE EMAILS % OF PRO EMAILS % OF FORM ABANDONS
  74. 74. The teams mission is to
 create design solutions
 that change on-page behaviour
 improving these 3 micro metrics.
  75. 75. 3CRAZY 4’S TEAM
 DESIGN SKETCHES This is the MacGyver phase. Take your observations, hypotheses, and your new understanding of the user experience, and sketch before/after ways to solve each problem, as a team. Remember, we’re all designers. N H OBSERVATIONS &
 MICRO METRICS Every observed pain point needs a corresponding solution. If you can measure it, you can optimize and improve it. Assigning micro metrics ensures you can measure the impact of every design decision you make. THE 3D PROJECT PLAYBOOK A data-driven design project starts with
 The 3D Playbook. An interactive optimization lookup tool for taking the overwhelming amount of data that exists, and narrowing it down to the types, sources, and formats that are most relevant to what you’re working on.
  76. 76. PROJECT NAME TEAM MEMBERDATA-DRIVEN DESIGN (3D) WORKSHEET #3 - DESIGN CARDS OBSERVATION ID SKETCH 1-4 DESIGN SOLUTIONS 3D 1 2 3 4 5 SEVERITY MICRO METRIC DESCRIPTION
  77. 77. PROJECT NAME TEAM MEMBERDATA-DRIVEN DESIGN (3D) WORKSHEET #3 - DESIGN CARDS OBSERVATION ID SKETCH 1-4 DESIGN SOLUTIONS 3D 1 2 3 4 5 SEVERITY MICRO METRIC DESCRIPTION Try bigger underpants
  78. 78. PROJECT NAME TEAM MEMBERDATA-DRIVEN DESIGN (3D) WORKSHEET #3 - DESIGN CARDS OBSERVATION ID SKETCH 1-4 DESIGN SOLUTIONS 3D 1 2 3 4 5 SEVERITY MICRO METRIC DESCRIPTION Try bigger underpants Add some toilet humour
  79. 79. PROJECT NAME TEAM MEMBERDATA-DRIVEN DESIGN (3D) WORKSHEET #3 - DESIGN CARDS OBSERVATION ID SKETCH 1-4 DESIGN SOLUTIONS 3D 1 2 3 4 5 SEVERITY MICRO METRIC DESCRIPTION Try bigger underpants Add some toilet humour Panda nappies?
  80. 80. PROJECT NAME TEAM MEMBERDATA-DRIVEN DESIGN (3D) WORKSHEET #3 - DESIGN CARDS OBSERVATION ID SKETCH 1-4 DESIGN SOLUTIONS 3D 1 2 3 4 5 SEVERITY MICRO METRIC DESCRIPTION Try bigger underpants Add some toilet humour Panda nappies? Unique as a snowflake
  81. 81. PROJECT NAME TEAM MEMBERDATA-DRIVEN DESIGN (3D) WORKSHEET #3 - DESIGN CARDS OBSERVATION ID SKETCH 1-4 DESIGN SOLUTIONS 3D 1 2 3 4 5 SEVERITY MICRO METRIC DESCRIPTION #HipsterPandaPoopyPants
  82. 82. these exercises breed empathy
  83. 83. FINAL 3D DESIGN TREATMENT5 N H E I
  84. 84. FINAL 3D DESIGN TREATMENT5 N H E I
  85. 85. FINAL 3D DESIGN TREATMENT5 N H E I
  86. 86. CF-OG-5 FINAL 3D DESIGN TREATMENT5 N H E I CF-OG-7 CF-OG-6 CF-OG-3
  87. 87. 4 TEST AND MEASURE
 MICRO METRICS Once all design solutions have been incorporated into your new page, an 
 A/B test should be performed with reporting focusing on the impacts the micro metric designs have on on-page behaviour. N H I OBSERVATIONS &
 MICRO METRICS Every observed pain point needs a corresponding solution. If you can measure it, you can optimize and improve it. Assigning micro metrics ensures you can measure the impact of every design decision you make. THE 3D PROJECT PLAYBOOK CRAZY 4’S TEAM
 DESIGN SKETCHES This is the MacGyver phase. Take your observations, hypotheses, and your new understanding of the user experience, and sketch before/after ways to solve each problem, as a team. Remember, we’re all designers. A data-driven design project starts with
 The 3D Playbook. An interactive optimization lookup tool for taking the overwhelming amount of data that exists, and narrowing it down to the types, sources, and formats that are most relevant to what you’re working on.
  88. 88. TEST & MEASURE MICRO METRICS6 N H E I RESULTS OBSER. ID CF-OG-5 MICRO METRIC % of ppl clicking on first question DATA TYPE Heat Map: Click TOOL/SOURCE Hotjar SEV. 3 BEFORE 11.94% AFTER CHANGE
  89. 89. TEST & MEASURE MICRO METRICS RESULTS OBSER. ID CF-OG-5 MICRO METRIC % of ppl clicking on first question DATA TYPE Heat Map: Click TOOL/SOURCE Hotjar SEV. 3 BEFORE 11.94% AFTER 6.28% CHANGE -47% 6 N H E I
  90. 90. TEST & MEASURE MICRO METRICS RESULTS OBSER. ID CF-OG-5 CF-OG-6 MICRO METRIC % of ppl clicking on first question % of fake emails entered DATA TYPE Heat Map: Click Lead Data TOOL/SOURCE Hotjar Unbounce SEV. 3 5 BEFORE 11.94% 7.9% AFTER 6.28% CHANGE -47% 6 N H E I
  91. 91. TEST & MEASURE MICRO METRICS RESULTS OBSER. ID CF-OG-5 CF-OG-6 MICRO METRIC % of ppl clicking on first question % of fake emails entered DATA TYPE Heat Map: Click Lead Data TOOL/SOURCE Hotjar Unbounce SEV. 3 5 BEFORE 11.94% 7.9% AFTER 6.28% 5% CHANGE -37% -47% 6 N H E I
  92. 92. TEST & MEASURE MICRO METRICS RESULTS OBSER. ID CF-OG-5 CF-OG-6 CF-OG-7 MICRO METRIC % of ppl clicking on first question % of fake emails entered % personal email addresses (gmail etc) DATA TYPE Heat Map: Click Lead Data Lead Data TOOL/SOURCE Hotjar Unbounce Unbounce SEV. 3 5 5 BEFORE 11.94% 7.9% 66.4% AFTER 6.28% 5% CHANGE -37% -47% 6 N H E I
  93. 93. Email Address START THE COURSE NOW 41% 65% +59% +15%Your Best Email Address START THE COURSE NOW Work Email Address START THE COURSE NOW Business Email Address START THE COURSE NOW 47% 50% +22%
  94. 94. TEST & MEASURE MICRO METRICS RESULTS OBSER. ID CF-OG-5 CF-OG-6 CF-OG-7 MICRO METRIC % of ppl clicking on first question % of fake emails entered % pro email addresses DATA TYPE Heat Map: Click Lead Data Lead Data TOOL/SOURCE Hotjar Unbounce Unbounce SEV. 3 5 5 BEFORE 11.94% 7.9% 66.4% AFTER 6.28% 5% 80.8% CHANGE -37% +21.7% -47% 6 N H E I
  95. 95. TEST & MEASURE MICRO METRICS RESULTS OBSER. ID CF-OG-5 CF-OG-6 CF-OG-7 MICRO METRIC % of ppl clicking on first question % of fake emails entered % pro email addresses Conversion Rate DATA TYPE Heat Map: Click Lead Data Lead Data A/B Test TOOL/SOURCE Hotjar Unbounce Unbounce Unbounce SEV. 3 5 5 - BEFORE 11.94% 7.9% 66.4% 7.55% AFTER 6.28% 5% 80.8% CHANGE -37% +21.7% -47% 6 N H E I
  96. 96. TEST & MEASURE MICRO METRICS RESULTS OBSER. ID CF-OG-5 CF-OG-6 CF-OG-7 - MICRO METRIC % of ppl clicking on first question % of fake emails entered % pro email addresses Conversion Rate DATA TYPE Heat Map: Click Lead Data Lead Data A/B Test TOOL/SOURCE Hotjar Unbounce Unbounce Unbounce SEV. 3 5 5 - BEFORE 11.94% 7.9% 66.4% 7.55% AFTER 6.28% 5% 80.8% 7.53% CHANGE -37% +21.7% - -47% 6 N H E I ?
  97. 97. but I still care about conversion rates!!!
  98. 98. IPAD MAKES IT LOOK LIKE AN EBOOK, NOT A COURSE
  99. 99. HOW MANY QUESTIONS WILL I BE ASKED?
  100. 100. TOO MUCH TEXT
  101. 101. HE LOOKS TRUSTWORTHY
  102. 102. +8% INCREASE IN CONVERSION RATE
  103. 103. Who wants more optimization data based on your landing pages?
  104. 104. Free landing page optimization tool/grader - launching Nov 15th.
 Get early access bit.ly/new-LPA
  105. 105. SAD COREY
  106. 106. Sad Corey,
 why did we make an explainer video?
  107. 107. Well... we made a bunch of shit up, without asking the audience it was meant for, what they thought about it. SAD COREY
  108. 108. Well... we made a bunch of shit up, without asking the audience it was meant for, what they thought about it. SAD COREY We also started the project because we thought we needed a video, not because we got some feedback from our prospects that said we needed it.
  109. 109. Cheesy & entirely unnecessary elevator sequence Fake businesswoman walking by at the right time. Patronizing jerk *Not real developers Really? Is this the Motor Tax Office? “Minority Report” segment. Cos we’re a tech company Fake businesswoman developer
  110. 110. Marketing Team Frustration
  111. 111. MARKETER DESIGNER COPYWRITER Marketing Team Frustration
  112. 112. MARKETER DESIGNER COPYWRITER Marketing Team Frustration
  113. 113. MARKETER DESIGNER COPYWRITER Marketing Team Frustration
  114. 114. Marketing Team Frustration MARKETER DESIGNER COPYWRITER 45% OF DESIGNERS FIND MARKETERS FRUSTRATING 32% OF MARKETERS FIND DESIGNERS FRUSTRATING
  115. 115. “They take a concept and do magic…” marketers talking about designers “They come from a planet with super powers.” “They're enthusiastic and motivated. Full of ideas, even if most of the ideas are bad.” “They're enthusiastic and motivated. Full of ideas, even if most of the ideas are bad.” “They're enthusiastic and motivated. Full of ideas, even if most of the ideas are bad.” designers talking about marketersdesigners talking about copywriters “They're intelligent, and can turn the bullshit of a marketer into something a customer can understand.” “They’re our symbiotic organism. 
 
 We die without them.” “They’re our symbiotic organism. 
 
 We die without them.” “They're intelligent, and can turn the bullshit of a marketer into something a customer can understand.” Music: “The Diary” by Relejar
  116. 116. data-
 driven design
  117. 117. design == empathy data-
 driven
  118. 118. data-
 driven design == empathy == results
  119. 119. Thank you! bit.ly/oli-prg

×