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

719 views

Published on

Data is all around us, which is both a good and bad thing. Good, because we need it. Bad, because there’s simply too much to know where and how to start using it. This is one of several reasons that marketing teams are currently dysfunctional – I’ll reveal the rest in my talk – but it doesn’t have to be this way. Data-Driven Design (3D) is an actionable evidence-based framework that gives marketing teams (marketers, designers, & copywriters) accelerated access to the data they really need, coupled with a process for understanding how to use that data to make informed changes to the digital marketing experiences you’re creating today. In Oli’s talk, you’ll learn how to use The 3D Playbook to narrow four hundred sources of overwhelming data into the five you actually need.

Published in: Marketing
  • Be the first to comment

Oli Gardner - Data-Driven Design

  1. 1. 3DDATA-DRIVEN DESIGN
  2. 2. 1
  3. 3. 65%OF M AR KETERS IN THIS RO O M SAID THEY DO N’T HAVE ENOUG H DATA TO DO TH EIR JOB EF F EC TIVELY. 65% * who responded to my pre-conference survey * @oligardner #TuringFest
  4. 4. We did it because it was trendy
  5. 5. DESIGN DECISIONS NEED TO BE INFORMED BY DATA NOT TRENDS @oligardner #TuringFest
  6. 6. BEING TRENDY DOESN’T MAKE IT RIGHT
  7. 7. Scrappy
  8. 8. @oligardner bit.ly/oli-tf
  9. 9. I interviewed and surveyed over 700 people who work on marketing teams
  10. 10. DESIGNER COPYWRITERMARKETER
  11. 11. DESIGNER COPYWRITERMARKETER
  12. 12. DESIGNER COPYWRITER Writers want me to start designing before they give me content. MARKETER
  13. 13. 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.”
  14. 14. DESIGNER COPYWRITER Writers don't get that search engines see things differently to humans. MARKETER
  15. 15. DESIGNER COPYWRITER Marketers have no understanding of customer behaviour. MARKETER
  16. 16. DESIGNER COPYWRITER they're too myopic and enjoy naval gazing. MARKETER
  17. 17. na·vel-gaz·ing /‘ nāvel gāziNG/ noun self-indulgent or excessive contemplation of oneself…
  18. 18. DESIGNER COPYWRITER …they don't respect design
 and think they know how it should be done. MARKETERMARKETER
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. DESIGNER COPYWRITERMARKETER
  23. 23. DESIGNER COPYWRITERMARKETER Designers are too sensitive.
  24. 24. Are you a designer?
  25. 25. MacGyver.
  26. 26. MacGyvered
  27. 27. design == empathy
  28. 28. design != copying shit
  29. 29. TRENDLINETREND
  30. 30. 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 #TuringFest
  31. 31. - Pinot Noir
  32. 32. - Pinot Noir - Another wine varietal
  33. 33. - Pinot Noir - Another wine varietal
  34. 34. 2004 Image Source: GQ
  35. 35. 2004 Image Source: GQ Jeremy
  36. 36. 2004 Image Source: GQ
  37. 37. Source: http://www.decanter.com/wine-news/sideways-effect-confirmed-76585/
  38. 38. “It only takes one tree to make a thousand matches.
 

  39. 39. “It only takes one tree to make a thousand matches.
 
 Only takes one match to burn a thousand trees.” — Stereophonics
  40. 40. I DRINK A LOT OF WINE
  41. 41. But I haven’t bought a bottle of Merlot in 13 years #TRENDpower
  42. 42. @oligardner #TuringFest bit.ly/oli-tf 3D ! " N H E I THE DATA-DRIVEN DESIGN (3D) PROCESS
  43. 43. CONSULT 3D PLAYBOOK The 3D Playbook is a simple 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. 1 ! " N H E I
  44. 44. 1 ! " N H E I Choose Object of Interest Isolate the data sources you need SCROLL MAP VISUAL ID VISUAL ID BOUNCE RATE FALSE BOTTOM FALSE BOTTOM STOCK PHOTO STOCK PHOTO NAV CTA HERO SHOT HERO SHOT FORM VISUAL ID FALSE BOTTOM STOCK PHOTO CONSULT 3D PLAYBOOK The 3D Playbook is a simple 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.
  45. 45. THE 3D PLAYBOOK ANINTERACTIVEOPTIMIZATIONLOOKUPCHARTFORMARKETINGTEAMS 3D bit.ly/oli-tf
  46. 46. COLLECT DATA Doing this as a collaborative process will empower your team, and create working relationships that remove the frustrations marketers, designers, and copywriters often feel. A simple status document helps. 2 ! " N H E I CONSULT 3D PLAYBOOK The 3D Playbook is a simple 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.
  47. 47. Tech Setup Complete Date Started Days Needed CollectingTool Used Sample Size NeededData Type Assigned To X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X WORKSHEET #1 - DATA COLLECTION3D DATA-DRIVEN DESIGN (3D) WORKSHEET #1
  48. 48. Tech Setup Complete Date Started Days Needed CollectingTool Used Sample Size NeededData Type Assigned To X X X X X X X X X X X X X X X X X X X X X WORKSHEET #1 - DATA COLLECTION3D Aug 3, 20175-10Usability Test Aug 3, 201725Visual ID Test Aug 3, 20172,000Scroll Map Camtasia Usability Hub Hotjar 1 1 14 Oli Michael Andrea X X X X XXX X X X
  49. 49. MAKE OBSERVATIONS Viewing the data together (recordings, heat maps, survey results) develops empathy, and ultimately better digital experiences. Have the whole team take notes as you look through it. CONSULT 3D PLAYBOOK The 3D Playbook is a simple 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. 3 ! " N H E I COLLECT DATA Doing this as a collaborative process will empower your team, and create working relationships that remove the frustrations marketers, designers, and copywriters often feel. A simple status document helps.
  50. 50. PROJECT NAME # CARD #TEAM MEMBER DATA TYPE TOOL / SOURCE SAMPLE DATE Data-Driven Design (3D) by Oli Gardner from Unbounce DATA-DRIVEN DESIGN (3D) WORKSHEET #2 DESIGN NOTES # # # 1. DATA 2. OBSERVATIONS 3. DESIGN IDEAS # # # # (either sketch a complete solution or break it into multiple sketches by observation #)(describe in words the problems you witness) (these can be general notes about your design ideas, or applicable to each observation+design combination #) 3D SEVERITY MICRO METRICS SEVERITY MICRO METRICS SEVERITY MICRO METRICS SEVERITY MICRO METRICS 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 DATA-DRIVEN DESIGN (3D) WORKSHEET #2
  51. 51. Data-Driven Design (3D) by Oli Gardner from Unbounce 2. OBSERVATIONS (describe in words the problems you witness) TURING FEST 2017 2OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA WRITE DOWN ALL OBSERVED: - MISTAKES - PROBLEMS - REACTIONS - FRUSTRATIONS - SURPRISES - SUCCESSES 1 # # # 7 of 8 usability test participants were unable to find the map when looking for directions to the hotel. Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag. Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag. Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag.
  52. 52. Data-Driven Design (3D) by Oli Gardner from Unbounce 2 3 4 2. OBSERVATIONS (describe in words the problems you witness) SEVERITY SEVERITY SEVERITY SEVERITY 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 7 of 8 usability test participants were unable to find the map when looking for directions to the hotel. Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag. Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag. Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag. 1 RATE THE SEVERITY OF EACH OBSERVATION FROM 1 TO 5 TURING FEST 2017 2OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA
  53. 53. 4 ! " N H E I ASSIGN 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. MAKE OBSERVATIONS CONSULT 3D PLAYBOOK The 3D Playbook is a simple 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. COLLECT DATA Doing this as a collaborative process will empower your team, and create working relationships that remove the frustrations marketers, designers, and copywriters often feel. A simple status document helps. Viewing the data together (recordings, heat maps, survey results) develops empathy, and ultimately better digital experiences. Have the whole team take notes as you look through it.
  54. 54. What are Micro Metrics?
  55. 55. What are Micro Metrics? “The aggregation of marginal gains.

  56. 56. What are Micro Metrics? “The aggregation of marginal gains.
 Each improvement may seem trivial, but the cumulative effect can be huge.”
 — Dave Brailsford
  57. 57. What are Micro Metrics? “Micro-metrics measure how your design decisions change on-page behaviours.”
 — Me
  58. 58. 3D Playbook 3 45 7 6 Click Map Session RecScreen Res Interview Reading Ease DATA 2 Usability Test 1 Lead Data
  59. 59. 3D Playbook 2 3.1 3 4 1 5 7 6 3.2 3.3 3.4 2.1 4.2 4.1 4.35.1 5.2 6.2 6.1 6.3 7.1 1.31.2 1.4 1.51.1 Usability Test Click Map Session Rec Lead Data Screen Res Interview Reading Ease OBSERVATIONS DATA
  60. 60. Do Nothing
  61. 61. Fix Do Nothing or
  62. 62. Optimize & Track Micro Metric Fix or Do Nothing or
  63. 63. 3D Playbook 2 3.1 3 4 1 5 7 6 3.2 3.3 3.4 2.1 4.2 4.1 4.35.1 5.2 6.2 6.1 6.3 7.1 1.31.2 1.4 1.51.1 Usability Test Click Map Session Rec Lead Data Screen Res Interview Reading Ease OBSERVATIONS DATA MICRO METRICS
  64. 64. 3D Playbook 2 3.1 3 4 1 5 7 6 3.2 3.3 3.4 2.1 4.2 4.1 4.35.1 5.2 6.2 6.11 6.3 7.1 1.31.2 1.4 1.51.1 Usability Test Click Map Session Rec Lead Data Screen Res Interview Reading Ease 1.2 1.5 OBSERVATIONS DATA MICRO METRICS
  65. 65. 3D Playbook 2 3.1 3 4 1 5 7 6 3.2 3.3 3.4 2.1 4.2 4.1 4.35.1 5.2 6.2 6.11 6.3 7.1 1.31.2 1.4 1.51.1 Usability Test Click Map Session Rec Lead Data Screen Res Interview Reading Ease 3.1 3.3 1.2 1.5 OBSERVATIONS DATA MICRO METRICS
  66. 66. I just made 4 people fall asleep
  67. 67. MumDadBro Sis
  68. 68. “DESIGN CARD” MOCKUPS 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 are all designers. ASSIGN MICRO METRICS MAKE OBSERVATIONS CONSULT 3D PLAYBOOK The 3D Playbook is a simple 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. COLLECT DATA Doing this as a collaborative process will empower your team, and create working relationships that remove the frustrations marketers, designers, and copywriters often feel. A simple status document helps. 5 ! " N H E I Viewing the data together (recordings, heat maps, survey results) develops empathy, and ultimately better digital experiences. Have the whole team take notes as you look through it. 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.
  69. 69. Data-Driven Design (3D) by Oli Gardner from Unbounce DESIGN NOTES 3. DESIGN IDEAS # # # # (either sketch a complete solution or break it into multiple sketches by observation #) (these can be general notes about your design ideas, or applicable to each observation+design combination #) 1 2 3 4 2. OBSERVATIONS (describe in words the problems you witness) Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats. Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS. Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard. In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions. SEVERITY MICRO METRICS % who can find the map SEVERITY MICRO METRICS % of ppl who scroll to bottom SEVERITY MICRO METRICS Ratio of calls to form fills SEVERITY MICRO METRICS Attention Ratio 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 TURING FEST 2017 2OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA
  70. 70. Data-Driven Design (3D) by Oli Gardner from Unbounce DESIGN NOTES 3. DESIGN IDEAS # # # # (either sketch a complete solution or break it into multiple sketches by observation #) (these can be general notes about your design ideas, or applicable to each observation+design combination #) 1 2 3 4 2. OBSERVATIONS (describe in words the problems you witness) Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats. Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS. Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard. In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions. 11 Try bigger underpants 2 3 4 TURING FEST 2017 2OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA SEVERITY MICRO METRICS % who can find the map SEVERITY MICRO METRICS % of ppl who scroll to bottom SEVERITY MICRO METRICS Ratio of calls to form fills SEVERITY MICRO METRICS Attention Ratio 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5
  71. 71. Data-Driven Design (3D) by Oli Gardner from Unbounce DESIGN NOTES 3. DESIGN IDEAS # # # # (either sketch a complete solution or break it into multiple sketches by observation #) (these can be general notes about your design ideas, or applicable to each observation+design combination #) 1 2 3 4 2. OBSERVATIONS (describe in words the problems you witness) Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats. Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS. Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard. In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions. 1 2 3 4 2 Try bigger underpants + Toilet humor TURING FEST 2017 2OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA SEVERITY MICRO METRICS % who can find the map SEVERITY MICRO METRICS % of ppl who scroll to bottom SEVERITY MICRO METRICS Ratio of calls to form fills SEVERITY MICRO METRICS Attention Ratio 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5
  72. 72. Data-Driven Design (3D) by Oli Gardner from Unbounce DESIGN NOTES 3. DESIGN IDEAS # # # # (either sketch a complete solution or break it into multiple sketches by observation #) (these can be general notes about your design ideas, or applicable to each observation+design combination #) 1 2 3 4 2. OBSERVATIONS (describe in words the problems you witness) Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats. Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS. Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard. In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions. 1 2 3 4 3 Try bigger underpants + Toilet humor Panda diapers? TURING FEST 2017 2OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA SEVERITY MICRO METRICS % who can find the map SEVERITY MICRO METRICS % of ppl who scroll to bottom SEVERITY MICRO METRICS Ratio of calls to form fills SEVERITY MICRO METRICS Attention Ratio 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5
  73. 73. 1 2 3 4 2. OBSERVATIONS (describe in words the problems you witness) Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats. Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS. Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard. In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions. Data-Driven Design (3D) by Oli Gardner from Unbounce DESIGN NOTES 3. DESIGN IDEAS 1 2 3 4 (either sketch a complete solution or break it into multiple sketches by observation #) (these can be general notes about your design ideas, or applicable to each observation+design combination #) Try bigger underpants Toilet humor usually works Panda diapers? Unique as a snowflake TURING FEST 2017 2OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA SEVERITY MICRO METRICS % who can find the map SEVERITY MICRO METRICS % of ppl who scroll to bottom SEVERITY MICRO METRICS Ratio of calls to form fills SEVERITY MICRO METRICS Attention Ratio 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5
  74. 74. Data-Driven Design (3D) by Oli Gardner from Unbounce DESIGN NOTES 3. DESIGN IDEAS (either sketch a complete solution or break it into multiple sketches by observation #) (these can be general notes about your design ideas, or applicable to each observation+design combination #) 1 2 3 4 2. OBSERVATIONS (describe in words the problems you witness) Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats. Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS. Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard. In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions. #HipsterPandaPoopPants 1 2 3 4 TURING FEST 2017 2OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA SEVERITY MICRO METRICS % who can find the map SEVERITY MICRO METRICS % of ppl who scroll to bottom SEVERITY MICRO METRICS Ratio of calls to form fills SEVERITY MICRO METRICS Attention Ratio 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5
  75. 75. “DESIGN CARD” MOCKUPS 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 are all designers. ASSIGN MICRO METRICS MAKE OBSERVATIONS CONSULT 3D PLAYBOOK The 3D Playbook is a simple 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. COLLECT DATA Doing this as a collaborative process will empower your team, and create working relationships that remove the frustrations marketers, designers, and copywriters often feel. A simple status document helps. 6 ! " N H E I TEST & MEASURE MICRO METRICS Micro metrics focus on the holistic elements of the whole. Each observation you are trying to improve creates its own micro metric that can be measured as part of the reporting process. Viewing the data together (recordings, heat maps, survey results) develops empathy, and ultimately better digital experiences. Have the whole team take notes as you look through it. 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.
  76. 76. RESULTS TEST RESULTS: MICRO METRICS6 ! " N H E ID 1.2 1.5 MICRO METRIC DATA TYPE TOOL/SOURCE SEVERITY CONTROL 3D TREATMENT CHANGE % of people who can find the map Average # of form errors Usability Test GA Camtasia GTM Script 5 2 12.5% 1.5
  77. 77. RESULTS TEST RESULTS: MICRO METRICS6 ! " N H E ID 1.2 1.5 MICRO METRIC % of people who can find the map Average # of form errors DATA TYPE Usability Test GA TOOL/SOURCE Camtasia GTM Script SEVERITY 5 2 CONTROL 12.5% 1.5 3D TREATMENT 15% 2.2 CHANGE +20% +47%
  78. 78. “Which types of data would you MOST like at the start of a project, that you DON'T usually have access to?”
  79. 79. “Which types of data would you MOST like at the start of a project, that you DON'T usually have access to?”
  80. 80. On the way to Nashville…
  81. 81. “He parked in the middle of the road, got out of the car… — Nicole
  82. 82. “He parked in the middle of the road, got out of the car… We sat awkwardly in the back feeling lost and belittled. — Nicole
  83. 83. “We then smiled as we figured out how to work this terrible experience into Oli’s on-stage presentation at the Country Music Hall of Fame.” — Nicole
  84. 84. “Nicole, we only pick up by appointment. We did not have any reservation for you and the vehicle belonged to another family.“ — Metro Livery
  85. 85. “Then your driver should never have welcomed us into his vehicle. Again, we thank you for this most excellent example and hope you figure your shit out.” — Nicole
  86. 86. 4.2
  87. 87. 4.2
  88. 88. Keep language positive. If even just 1% of page copy subconsciously reminds your visitors of feelings of anger or fear, you could be seeing up to 25% lower conversion rates. No one wants to be angry on their vacation! CONVERSION BENCHMARK REPORT TRAVEL business vertical EMOTION: ANGER what’s being measured insights 0% 5% 10% 15% 0.0% 0.5% 1.0% 1.5% 2.0% anger ConversionRate
  89. 89. bit.ly/oli-tf
  90. 90. THE 3D PLAYBOOK3D bit.ly/oli-tf WORD COUNT
  91. 91. THE 3D PLAYBOOK3D bit.ly/oli-tf READING EASE
  92. 92. THE 3D PLAYBOOK3D bit.ly/oli-tf SENTIMENT
  93. 93. THE 3D PLAYBOOK3D bit.ly/oli-tf EMOTION
  94. 94. moods.mybluemix.net
  95. 95. https://tone-analyzer-demo.mybluemix.net/
  96. 96. 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
  97. 97. NEW
 TREND THE CONVERSATIONAL FORM 3D ! " N H E I
  98. 98. 1. CHECK 3D PLAYBOOK 1 ! " N H E I
  99. 99. BOUNCE RATE SESSION REC. SESSION REC. POLL MOBILE QA MOBILE QA 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 DEVICE BRAND 5-SEC TEST CHECK 3D PLAYBOOK: CONVERSATIONAL FORM1 ! " N H E I
  100. 100. 2. COLLECT DATA 2 ! " N H E I
  101. 101. Tech Setup Complete Date Started Days Needed CollectingTool Used Sample Size NeededData Type July 17, 20171Mobile QA July 17, 20171,000Scroll Map July 17, 2017500Lead Data July 17, 2017100Session Recordings July 17, 20176Usability Test July 17, 20171,000Click Map iPhone Hotjar Unbounce Hotjar Camtasia Hotjar 1 7 28 1 1 7 Assigned To Oli Oli Oli Oli Oli Oli X X X X X X X X X X X X X X X X X X COLLECT DATA: CONVERSATIONAL FORM2 ! " N H E I
  102. 102. 3. MAKE OBSERVATIONS 3 ! " N H E I
  103. 103. Session Recording Mobile QA Usability Test Scroll Map Click Map Lead Data New trends should never follow the set it and forget it model. Session recordings will be the fastest way to get visual qualitative feedback from real visitors. Consider it an extension of QA, and be prepared to roll back if needed. OBSERVATIONS: SESSION RECORDING3 ! " N H E I
  104. 104. Session Recording Mobile QA Usability Test Scroll Map Click Map Lead Data OBSERVATIONS3 ! " N H E I
  105. 105. Session Recording Mobile QA Usability Test Scroll Map Click Map Lead Data OBSERVATIONS3 ! " N H E I
  106. 106. Session Recording Mobile QA Usability Test Scroll Map Click Map Lead Data OBSERVATIONS3 ! " N H E I
  107. 107. Apologies for the poor experience with that form!
  108. 108. 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,
  109. 109. 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,
  110. 110. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS: MOBILE QA3 ! " N H E I Does the data entry mode for a conversational form work well on a phone?
  111. 111. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS3 ! " N H E I
  112. 112. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS3 ! " N H E I
  113. 113. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS3 ! " N H E I
  114. 114. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS: USABILITY TEST3 ! " N H E I
  115. 115. Test Instructions This test is to evaluate how a landing page works. You cannot do anything wrong. Any problems that arise are the fault of the page, and not your actions. TEN 2-MINUTE USABILITY TESTS WITH CO-WORKERS Please read out the task, and verbalize all of your thoughts, observations, choices and actions. Task 1 I searched Google for a landing page course and arrived on this page. Find a way to take the course.
  116. 116. Usability Test The animated dots make it appear as though someone on the other end of the conversation is typing, giving reason to pause. OBSERVATIONS: USABILITY TEST3 ! " N H E I
  117. 117. Usability Test The animated dots make it appear as though someone on the other end of the conversation is typing, giving reason to pause. Typing a value from the dropdown list buttons results in the first value being submitted. You have to click the button for it to work. Because there were no visible form fields, the participant was unsure how many questions there were going to be in the process. OBSERVATIONS: USABILITY TEST3 ! " N H E I
  118. 118. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS: CLICK MAP3 ! " N H E I
  119. 119. Click Map OBSERVATIONS: CLICK MAP3 ! " N H E I
  120. 120. Click Map OBSERVATIONS: CLICK MAP3 ! " N H E I
  121. 121. Click Map 12% of visitors clicked the first question on the form (which isn’t an interactive element). OBSERVATIONS: CLICK MAP3 ! " N H E I
  122. 122. Lead Data Conversational forms look and behave like chat sessions (or a chat bot). Check the quality of the lead data that you receive in case there is an increase in fake/spam emails. OBSERVATIONS: LEAD DATA3 ! " N H E I
  123. 123. Lead Data 2.5x fake email addresses entered, compared to a regular form. OBSERVATIONS: LEAD DATA3 ! " N H E I
  124. 124. Speaking of spam… "
  125. 125. 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
  126. 126. 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
  127. 127. Not all books should be preserved.
  128. 128. Scrappy
  129. 129. 4. DEFINE MICRO METRICS " 4 ! " N H E I
  130. 130. Data Sources 2 3.1 3 4 1 5 6 3.2 3.3 2.1 4.15.1 6.2 6.1 1.21.1 Mobile QA Usability Test Scroll Map Session Recording Click Map Lead Data OBSERVATIONS DATA 4 ! " N H E I MICRO METRICS
  131. 131. Optimize & Track Micro Metric Fix or Do Nothing or
  132. 132. Data Sources 2 3.1 3 4 1 5 6 3.2 3.3 2.1 4.15.1 6.2 6.1 1.21.1 Mobile QA Usability Test Scroll Map Session Recording Click Map Lead Data OBSERVATIONS DATA MICRO METRICS Turn off Required Fields Disable on Mobile Hide Dots Add
 “4 Qs Only” Subhead 4 ! " N H E I
  133. 133. Data Sources 2 3.1 3 4 1 5 6 3.2 3.3 2.1 4.15.1 6.1 1.21.1 Mobile QA Usability Test Scroll Map Session Recording Click Map Lead Data OBSERVATIONS DATA MICRO METRICS % Spam Emails # of Q1 Clicks Turn off Required Fields Disable on Mobile Hide Dots Add
 “4 Qs Only” Subhead 4 ! " N H E I 6.2
  134. 134. 5. DESIGN CARD MOCKUPS " 5 ! " N H E I
  135. 135. FINAL 3D DESIGN TREATMENT5 ! " N H E I
  136. 136. FINAL 3D DESIGN TREATMENT5 ! " N H E I
  137. 137. FINAL 3D DESIGN TREATMENT5 ! " N H E I
  138. 138. 4.1 3.2 5.1 3.1 FINAL 3D DESIGN TREATMENT5 ! " N H E I
  139. 139. 6. TEST & MEASURE MICRO METRICS 6 ! " N H E I
  140. 140. TEST & MEASURE MICRO METRICS6 ! " N H E I RESULTS ID MICRO METRIC DATA TYPE TOOL/SOURCE SEVERITY CONTROL 3D TREATMENT CHANGE
  141. 141. TEST & MEASURE MICRO METRICS6 ! " N H E I RESULTS ID 5.1 MICRO METRIC % clicking on first question DATA TYPE Heat Map: Click TOOL/SOURCE Hotjar SEVERITY 2 CONTROL 11.94% 3D TREATMENT CHANGE
  142. 142. TEST & MEASURE MICRO METRICS6 ! " N H E I RESULTS ID 5.1 MICRO METRIC % clicking on first question DATA TYPE Heat Map: Click TOOL/SOURCE Hotjar SEVERITY 2 CONTROL 11.94% 3D TREATMENT 6.28% CHANGE -47%
  143. 143. TEST & MEASURE MICRO METRICS6 ! " N H E I RESULTS ID 5.1 6.1 MICRO METRIC % clicking on first question # of fake emails entered DATA TYPE Heat Map: Click Lead Data TOOL/SOURCE Hotjar Unbounce SEVERITY 2 5 CONTROL 11.94% 63 3D TREATMENT 6.28% CHANGE -47%
  144. 144. TEST & MEASURE MICRO METRICS6 ! " N H E I RESULTS ID 5.1 6.1 MICRO METRIC % clicking on first question # of fake emails entered DATA TYPE Heat Map: Click Lead Data TOOL/SOURCE Hotjar Unbounce SEVERITY 2 5 CONTROL 11.94% 63 3D TREATMENT 6.28% 40 CHANGE -47% -37%
  145. 145. TEST & MEASURE MICRO METRICS6 ! " N H E I RESULTS ID 5.1 6.1 6.2 MICRO METRIC % 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 SEVERITY 2 5 3 CONTROL 11.94% 63 19.2% 3D TREATMENT 6.28% 40 CHANGE -47% -37%
  146. 146. TEST & MEASURE MICRO METRICS6 ! " N H E I RESULTS ID 5.1 6.1 6.2 MICRO METRIC % 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 SEVERITY 2 5 3 CONTROL 11.94% 63 19.2% 3D TREATMENT 6.28% 40 33.6% CHANGE -47% -37% +75%
  147. 147. TEST & MEASURE MICRO METRICS6 ! " N H E I RESULTS ID 5.1 6.1 6.2 0 MICRO METRIC % clicking on first question # of fake emails entered % personal email addresses (gmail etc) Conversion Rate DATA TYPE Heat Map: Click Lead Data Lead Data A/B Test TOOL/SOURCE Hotjar Unbounce Unbounce Unbounce SEVERITY 2 5 3 - CONTROL 11.94% 63 19.2% 7.55% 3D TREATMENT 6.28% 40 33.6% CHANGE -47% -37% +75% - ?
  148. 148. MARKETER
  149. 149. COREY
  150. 150. Corey, why did we make an explainer video?
  151. 151. Well... we made a bunch of shit up, without asking the audience it was meant for, what they thought about it. COREY
  152. 152. Well... we made a bunch of shit up, without asking the audience it was meant for, what they thought about it. 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.
  153. 153. Cheesy & entirely unnecessary elevator sequence Fake businesswoman walking by at the right time. Patronizing jerk *Not real developers Really? Is this the DMV? “Minority Report” segment. Cos we’re a tech company Fake businesswoman developer
  154. 154. Marketing Team Frustration
  155. 155. MARKETER DESIGNER COPYWRITER Marketing Team Frustration
  156. 156. MARKETER DESIGNER COPYWRITER Marketing Team Frustration
  157. 157. MARKETER DESIGNER COPYWRITER Marketing Team Frustration
  158. 158. Marketing Team Frustration MARKETER DESIGNER COPYWRITER 45% OF DESIGNERS FIND MARKETERS FRUSTRATING 32% OF MARKETERS FIND DESIGNERS FRUSTRATING
  159. 159. “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 are our symbiotic organism. 
 
 We die without them.” “They are 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
  160. 160. data-
 driven design
  161. 161. data-
 driven design == empathy
  162. 162. data-
 driven design == empathy == results
  163. 163. Thank you! bit.ly/oli-tf

×