Oli Gardner – Data-Driven Design (Turing Fest 2017)

Transcript

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

48. “It only takes one tree to make a thousand matches.
 
 Only takes one match to burn a thousand trees.” — Stereophonics
49. I DRINK A LOT OF WINE
50. But I haven’t bought a bottle of Merlot in 13 years #TRENDpower
51. @oligardner #TuringFest bit.ly/oli-tf 3D ! " N H E I THE DATA-DRIVEN DESIGN (3D) PROCESS
52. 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
53. 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.
54. THE 3D PLAYBOOK AN INTERACTIVE OPTIMIZATION LOOKUP CHART FOR MARKETING TEAMS 3D bit.ly/oli-tf
56. 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.
57. Tech Setup Complete Date Started Days Needed Collecting Tool Used Sample Size Needed Data 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 COLLECTION 3D DATA-DRIVEN DESIGN (3D) WORKSHEET #1
58. Tech Setup Complete Date Started Days Needed Collecting Tool Used Sample Size Needed Data 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 COLLECTION 3D Aug 3, 2017 5-10 Usability Test Aug 3, 2017 25 Visual ID Test Aug 3, 2017 2,000 Scroll Map Camtasia Usability Hub Hotjar 1 1 14 Oli Michael Andrea X X X X X X X X X X
59. 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.
60. 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
61. Data-Driven Design (3D) by Oli Gardner from Unbounce 2. OBSERVATIONS (describe in words the problems you witness) TURING FEST 2017 2 OLI 8 Aug 3, 2017 DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA 3D 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.
62. 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 2 OLI 8 Aug 3, 2017 DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA 3D USABILITY TEST CAMTASIA
63. 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.
64. What are Micro Metrics?
65. What are Micro Metrics? “The aggregation of marginal gains.

66. What are Micro Metrics? “The aggregation of marginal gains.
 Each improvement may seem trivial, but the cumulative effect can be huge.”
 — Dave Brailsford
67. What are Micro Metrics? “Micro-metrics measure how your design decisions change on-page behaviours.”
 — Me
68. 3D Playbook 3 4 5 7 6 Click Map Session Rec Screen Res Interview Reading Ease DATA 2 Usability Test 1 Lead Data
69. 3D Playbook 2 3.1 3 4 1 5 7 6 3.2 3.3 3.4 2.1 4.2 4.1 4.3 5.1 5.2 6.2 6.1 6.3 7.1 1.3 1.2 1.4 1.5 1.1 Usability Test Click Map Session Rec Lead Data Screen Res Interview Reading Ease OBSERVATIONS DATA
70. Do Nothing
71. Fix Do Nothing or
72. Optimize & Track Micro Metric Fix or Do Nothing or
73. 3D Playbook 2 3.1 3 4 1 5 7 6 3.2 3.3 3.4 2.1 4.2 4.1 4.3 5.1 5.2 6.2 6.1 6.3 7.1 1.3 1.2 1.4 1.5 1.1 Usability Test Click Map Session Rec Lead Data Screen Res Interview Reading Ease OBSERVATIONS DATA MICRO METRICS
74. 3D Playbook 2 3.1 3 4 1 5 7 6 3.2 3.3 3.4 2.1 4.2 4.1 4.3 5.1 5.2 6.2 6.11 6.3 7.1 1.3 1.2 1.4 1.5 1.1 Usability Test Click Map Session Rec Lead Data Screen Res Interview Reading Ease 1.2 1.5 OBSERVATIONS DATA MICRO METRICS
75. 3D Playbook 2 3.1 3 4 1 5 7 6 3.2 3.3 3.4 2.1 4.2 4.1 4.3 5.1 5.2 6.2 6.11 6.3 7.1 1.3 1.2 1.4 1.5 1.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
76. I just made 4 people fall asleep
77. Mum Dad Bro Sis
78. “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.
79. 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 2 OLI 8 Aug 3, 2017 DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA 3D USABILITY TEST CAMTASIA
80. 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 1 Try bigger underpants 2 3 4 TURING FEST 2017 2 OLI 8 Aug 3, 2017 DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA 3D 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
81. 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 2 OLI 8 Aug 3, 2017 DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA 3D 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
82. 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 2 OLI 8 Aug 3, 2017 DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA 3D 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
83. 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 2 OLI 8 Aug 3, 2017 DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA 3D 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
84. 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 2 OLI 8 Aug 3, 2017 DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA 3D 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
85. “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.
86. RESULTS TEST RESULTS: MICRO METRICS 6 ! " 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
87. RESULTS TEST RESULTS: MICRO METRICS 6 ! " 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%
88. “Which types of data would you MOST like at the start of a project, that you DON'T usually have access to?”
89. “Which types of data would you MOST like at the start of a project, that you DON'T usually have access to?”
90. On the way to Nashville…
91. “He parked in the middle of the road, got out of the car… — Nicole
92. “He parked in the middle of the road, got out of the car… We sat awkwardly in the back feeling lost and belittled. — Nicole
93. “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
94. “Nicole, we only pick up by appointment. We did not have any reservation for you and the vehicle belonged to another family.“ — Metro Livery
97. “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
99. 4.2
100. 4.2
102. 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 Conversion Rate
103. bit.ly/oli-tf
105. THE 3D PLAYBOOK 3D bit.ly/oli-tf WORD COUNT
106. THE 3D PLAYBOOK 3D bit.ly/oli-tf READING EASE
107. THE 3D PLAYBOOK 3D bit.ly/oli-tf SENTIMENT
108. THE 3D PLAYBOOK 3D bit.ly/oli-tf EMOTION
109. moods.mybluemix.net
111. https://tone-analyzer-demo.mybluemix.net/
114. 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
115. NEW
 TREND THE CONVERSATIONAL FORM 3D ! " N H E I
116. 1. CHECK 3D PLAYBOOK 1 ! " N H E I
117. 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 FORM 1 ! " N H E I
118. 2. COLLECT DATA 2 ! " N H E I
119. Tech Setup Complete Date Started Days Needed Collecting Tool Used Sample Size Needed Data Type July 17, 2017 1 Mobile QA July 17, 2017 1,000 Scroll Map July 17, 2017 500 Lead Data July 17, 2017 100 Session Recordings July 17, 2017 6 Usability Test July 17, 2017 1,000 Click 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 FORM 2 ! " N H E I
120. 3. MAKE OBSERVATIONS 3 ! " N H E I
121. 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 RECORDING 3 ! " N H E I
122. Session Recording Mobile QA Usability Test Scroll Map Click Map Lead Data OBSERVATIONS 3 ! " N H E I
123. Session Recording Mobile QA Usability Test Scroll Map Click Map Lead Data OBSERVATIONS 3 ! " N H E I
124. Session Recording Mobile QA Usability Test Scroll Map Click Map Lead Data OBSERVATIONS 3 ! " N H E I
125. Apologies for the poor experience with that form!
126. 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,
127. 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,
128. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS: MOBILE QA 3 ! " N H E I Does the data entry mode for a conversational form work well on a phone?
129. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS 3 ! " N H E I
130. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS 3 ! " N H E I
131. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS 3 ! " N H E I
132. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS: USABILITY TEST 3 ! " N H E I
133. 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.
134. 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 TEST 3 ! " N H E I
135. 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 TEST 3 ! " N H E I
136. Mobile QA Usability Test Scroll Map Click Map Lead Data Session Recording OBSERVATIONS: CLICK MAP 3 ! " N H E I
137. Click Map OBSERVATIONS: CLICK MAP 3 ! " N H E I
138. Click Map OBSERVATIONS: CLICK MAP 3 ! " N H E I
139. Click Map 12% of visitors clicked the first question on the form (which isn’t an interactive element). OBSERVATIONS: CLICK MAP 3 ! " N H E I
140. 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 DATA 3 ! " N H E I
141. Lead Data 2.5x fake email addresses entered, compared to a regular form. OBSERVATIONS: LEAD DATA 3 ! " N H E I
142. Speaking of spam… "
143. 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
144. 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
145. Not all books should be preserved.
147. Scrappy
152. 4. DEFINE MICRO METRICS " 4 ! " N H E I
153. Data Sources 2 3.1 3 4 1 5 6 3.2 3.3 2.1 4.1 5.1 6.2 6.1 1.2 1.1 Mobile QA Usability Test Scroll Map Session Recording Click Map Lead Data OBSERVATIONS DATA 4 ! " N H E I MICRO METRICS
154. Optimize & Track Micro Metric Fix or Do Nothing or
155. Data Sources 2 3.1 3 4 1 5 6 3.2 3.3 2.1 4.1 5.1 6.2 6.1 1.2 1.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
156. Data Sources 2 3.1 3 4 1 5 6 3.2 3.3 2.1 4.1 5.1 6.1 1.2 1.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
157. 5. DESIGN CARD MOCKUPS " 5 ! " N H E I
160. FINAL 3D DESIGN TREATMENT 5 ! " N H E I
161. FINAL 3D DESIGN TREATMENT 5 ! " N H E I
162. FINAL 3D DESIGN TREATMENT 5 ! " N H E I
163. 4.1 3.2 5.1 3.1 FINAL 3D DESIGN TREATMENT 5 ! " N H E I
164. 6. TEST & MEASURE MICRO METRICS 6 ! " N H E I
165. TEST & MEASURE MICRO METRICS 6 ! " N H E I RESULTS ID MICRO METRIC DATA TYPE TOOL/SOURCE SEVERITY CONTROL 3D TREATMENT CHANGE
166. TEST & MEASURE MICRO METRICS 6 ! " 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
167. TEST & MEASURE MICRO METRICS 6 ! " 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%
168. TEST & MEASURE MICRO METRICS 6 ! " 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%
169. TEST & MEASURE MICRO METRICS 6 ! " 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%
170. TEST & MEASURE MICRO METRICS 6 ! " 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%
171. TEST & MEASURE MICRO METRICS 6 ! " 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%
172. TEST & MEASURE MICRO METRICS 6 ! " 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% - ?
173. MARKETER
174. COREY
175. Corey, why did we make an explainer video?
176. Well... we made a bunch of shit up, without asking the audience it was meant for, what they thought about it. COREY
177. 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.
178. 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
179. Marketing Team Frustration
180. MARKETER DESIGNER COPYWRITER Marketing Team Frustration
181. MARKETER DESIGNER COPYWRITER Marketing Team Frustration
182. MARKETER DESIGNER COPYWRITER Marketing Team Frustration
183. Marketing Team Frustration MARKETER DESIGNER COPYWRITER 45% OF DESIGNERS FIND MARKETERS FRUSTRATING 32% OF MARKETERS FIND DESIGNERS FRUSTRATING
185. “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 marketers designers 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
186. data-
 driven design
187. data-
 driven design == empathy
188. data-
 driven design == empathy == results
189. Thank you! bit.ly/oli-tf