Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Craig Sullivan - Death by design: killing your growth with defective device experiences (Turing Fest 2019)

Craig Sullivan - Death by design: killing your growth with defective device experiences (Turing Fest 2019)

Craig has been blending UX, Analytics, AB Testing and Customer Insight methods for over 12 years, optimising growth for companies like Google, Amazon, Spotify, Eurostar, Lego, Asos, John Lewis and Red Bull.

He has trained hundreds of people to use ridiculously simple optimisation techniques, worked with over 400 clients, and helped them all to unlock latent value and growth inside their products or businesses. Using a mixture of Design Thinking, Lean, Agile, Analytics, User Research, AB Testing and cultural change, he’s driven over £4Bn in incremental revenue for his clients.

Turing Fest

August 29, 2019
Tweet

More Decks by Turing Fest

Other Decks in Technology

Transcript

  1. @OptimiseOrDie • Empathy in Design • Boredom, Free time from

    interruptions and manipulation • Privacy and Control of our personal data • Sustainable and usable packaging for humans • Being able to talk to a human being • Non algorithmic news consumption • Human beings from UI or Design Disasters • ‘Customer Service’ and human ‘Escalation’ • Having a ‘Right of Recourse’ • Companies from failing to measure and act on ‘experience’ • Business “doing the work” instead of you • Things that actually fucking work… The Death of Series:
  2. Killing Your Growth: 1. WTF is wrong? 2. Why don’t

    people complain? 3. Mine your data 4. Get Customer Centric testing 5. Fix costly conversion killers 6. Automate the things
  3. @OptimiseOrDie MILLIONS of hours of friction, wasted time, stress hormones,

    missed appointments, order errors, booking issues, password resets, broken buttons, anger, fear, worry and frustration.
  4. @OptimiseOrDie Most machine learning is dumb and brutal, able to

    accelerate inherent biases or massively scale up human stupidity
  5. • Modals / Overlays • Chat or survey popups •

    Map Jail (can’t scroll) • Product Image Jail (can’t scroll) • No scroll bars • Can’t dismiss modals • Viewport too small (off canvas) • Viewport stacked (breaks) • Touch Target Size & Spacing • Colour Contrast
  6. @OptimiseOrDie This website has revenue of £8-12M per month: Auto

    spelling? Hey Craig, On our Form Analytics, the most edited field is the “Customer Name”. Can you explain why people are having to edit their own names?
  7. 44

  8. @OptimiseOrDie 1. Change Growth Trajectory Manufacturing Methodologies • Maintain or

    Improve Quality • Remove Defects & Waste • Increase Production Capacity • Agility, Flexibility, Rapid Delivery • Continuous and Rapid Change • Roboticisation & Automation • Market, Demand, Resource Planning • Avoiding Consumer Deaths OptimiseOrDie AVOID SHIT THAT HURTS YOUR COMPANY
  9. @OptimiseOrDie Device Experience Questions: • What devices do customers really

    use? • What % of traffic do devices drive? • What % of revenue do devices drive? • What stuff converts above and below average? • Where do these devices abandon the funnel? • Are there any easy wins?
  10. GOOGLE ANALYTICS DEVICE EXPERIENCE Mobile Apple Desktop Tablet Android Split

    by Model (e.g. iPhone 5) Split by Brand or Brand / Model Windows Mac Chrome Edge Explorer Firefox Safari Chrome Apple iPad or Pro Android Split by Brand or Brand / Model Version Version
  11. The 15 Minute Model Recipe Complete step-by-step instructions: “Device Experience

    Mining for Ecommerce Conversion” medium.com/@optimiseordie/rapid-mining-for-ecommerce-conversion-53d1aab2e21
  12. Groundwork Slides: • Analytics Audit • The Kickoff Checklist •

    Marketing & Product History • Choose your time period • Do a Tag Walkthrough • Get an Analytics Buddy • (This hyperlink takes you to the bonus slides)
  13. DEVICE EXPERIENCE GRID EXAMPLE #1: • Android Phones and Tablets

    suck – why? • 13 bugs that affected ALL Android devices
  14. EXAMPLE #3: • Small Screen iPhones – why do they

    suck? • Navigation / Overlays are BROKEN!
  15. DEVICE EXPERIENCE MODEL Mobile Apple Desktop Tablet Droid Small 29%

    Medium 50% Large 15% X/XS 10% XS Max 2% Samsung 68% Huawei 11% Sony 5% Motorola 5% LG 2.3% Xiaomi 2% Google 2% Oneplus 2% HTC 1% Win Apple Chrome Explorer Safari Chrome Apple Droid 62% 31% 8% 63% 37% 74% 22% 77% 19% 61% 24% 54% 42% Edge 8% Ffox 6% 0.89% 0.58% 0.94% 1.31% 0.39% 0.56% • 3 days to test and find all the bugs • 1 day of DEV time to fix • Same marketing spend, double the conversions!
  16. Funnel success Funnel Step 2 Funnel Step 1 Sales Ecommerce

    Behaviour @OptimiseOrDie Traffic Device Funnel types: • Desktop, Laptop, Tablet, Mobile • Windows Browsers • Mac Browsers • iPhone Models • Android Brands & Models What sort of Device Funnel?
  17. @OptimiseOrDie NO CODING REQUIRED – only Excel: Free Google Sheets

    Addon: Google Sheets Addon: https://developers.google.com/analytics/solutions/google-analytics-spreadsheet-add-on Guide to getting started with the API: https://www.optimizesmart.com/how-to-use-google-analytics-api-without-any-coding/ Dimensions, Metrics, Query Explorer: Very useful for forming queries and getting to know the API: https://developers.google.com/analytics/devguides/reporting/core/dimsmets https://ga-dev-tools.appspot.com/query-explorer/
  18. @OptimiseOrDie Tools, Excel Plugins, Google Sheets Automating Google Sheets: https://medium.com/@jev/how-to-import-data-from-google-analytics-into-google-sheets-

    with-google-apps-script-5174a10b24d8 ProfitGrid: Simple tool to pull a multi-dimensional grid from any GA setup: http://app.profitgrid.io Analytics Edge: Very flexible excel tool for pulling API data. Free version available. Bristling with options: http://www.analyticsedge.com/simply-free/ Supermetrics: Free GA plugin for Excel and Google Sheets. Multiple data sources available: https://supermetrics.com/product/supermetrics-data-grabber/ https://supermetrics.com/product/supermetrics-for-google-drive/
  19. 2 Mobiles • Smaller iPhone (6/6S/5/SE) • Samsung Galaxy S8

    or S9 2 Laptops • Chrome, Firefox (latest version) • Microsoft Edge • Internet Explorer 11 • Mac Safari (latest version) 2 Tablets • iPad – recent model • Samsung – recent model Minimum Viable Testing List 6 devices
  20. • Apple iPhone 6S • Samsung Galaxy S8 • Mac

    Laptop with Chrome (1440 x 900) • Windows Laptop with Chrome (1366 x 768) >84% of all visitors • Add iPad and Safari on Mac for 92% Client Example – Data Driven Testing:
  21. Data Driven Screen Heights: Height Sessions % total <=800 24208

    27.2% <=900 25132 28.3% <=1024 3483 3.9% <=1080 28995 32.6% >1080 7128 8.0% • Significant audience has smaller height – laptops! • Design for where you want to lose audience! • Included in this deck here -> RESOLUTION HACK
  22. OptimiseOrDie £150iPhone 6S (Cash Converters) £160Samsung S8 (Cex) £240Windows Laptop

    (Amazon) £410Mac Laptop (eBay) Cheap Second Hand Device Lab:
  23. OptimiseOrDie Desktop Cloud Crossbrowsertesting.com Browserstack.com Devices in the Cloud Deviceanywhere.com

    Aws.amazon.com/device-farm bit.ly/MobileDeviceLab bit.ly/CrossDeviceOpt bit.ly/devicetesting What about Cloud Testing?
  24. Page Group % traffic Ecom CR # Sales % revenue

    List / Grid 44.33% 0.24% 7547 27.6% Product Page 15.19% 0.12% 1293 4.7% Homepage 13.49% 0.82% 7848 28.7% Brand 9.75% 1.28% 8851 32.3% Category 4.51% 0.31% 991 3.6% Blog 4.00% 0.21% 596 2.2% • ONE BUG on a single page template made this happen • The conversion is nearly 9 times higher now (1.06%) • 1.3M more sales a month – through one set of page templates • 40% of traffic to these pages was PPC • Nearly 90% of marketing spend was SHAFTED
  25. “F*** Me Craig. That simple bug you found is gonna

    earn us more money than all the freaking AB tests we ran in the last year”
  26. @OptimiseOrDie 1. Stop Making Assumptions 2. Make your Device Model

    3. Draw up your ‘Testing List’ 4. Buy the Hardware 5. Start testing, keep testing 6. Nobody will call
  27. @OptimiseOrDie • Browser and Device Compatibility • Font size, weight,

    style for content • Colour Contrast • Colour Blindness • Tab Order • Page Layout • Screen Readers • Alternative Content for audio & visuals • Video captioning & subtitling • Landmarks & Skip Links • Error handling & Recovery Accessibility = Reach & Conversion:
  28. @OptimiseOrDie Clothing £800K Telecoms £420K Travel £610K Events £1.5M Ecommerce

    £620K Luxury £1.3M Analysis of Losses Per Month: 2 issues 3 issues 8 issues 11 issues 5 issues 1 issue
  29. @OptimiseOrDie Fix the Door! • Accessibility expands your REACH •

    Device testing drives delight & profit • Let’s end device discrimination today!
  30. 2 – Groundwork (bonus deck) • Analytics Audit • The

    Kickoff Checklist • Marketing & Product History • Choose your time period • Do a Tag Walkthrough • Get an Analytics Buddy
  31. @OptimiseOrDie Analytics Audit Resources @OptimiseOrDie THE GOOGLE ANALYTICS AUDIT CHECKLIST

    FROM DISTILLED: Genuinely good and comprehensive list, resources, source articles, checklist: https://www.distilled.net/resources/google-analytics-audit-checklist/ https://docs.google.com/spreadsheets/d/1GnwB-jYnNJu18NwuZJzgarZAotXQ0kxXbZAIhI4H0IE/edit#gid=0 GOOGLE ANALYTICS HEALTH CHECK FROM CONVERSIONXL: Some excellent stuff not included in any other articles - a good roundup, sources, expert checklists: https://conversionxl.com/google-analytics-health-check HOW TO SELF AUDIT YOUR GOOGLE ANALYTICS A roundup of some useful things to audit but not a comprehensive checklist: https://boazsasson.com/tracking-reporting/how-to-self-audit-your-google-analytics/ 10 POINT CHECKLIST FOR A PERFECT GA SETUP: Some good information mixed with some less helpful stuff: http://supermetrics.com/blog/10-things-to-check-in-google-analytics-account/ GA CHECKLIST ON GOOGLE SHEETS: https://docs.google.com/spreadsheets/d/1pU9MpjjzxI-LLu45gPyGiHEpr_v-2rVpYuyNlPTXZ-I/edit#gid=0 GOOGLE ANALYTICS HEALTH CHECK: Solid checklist and additional articles - although probably needs expanding to include the best of the rest here: http://online-metrics.com/wp-content/uploads/2016/10/Google-Analytics-Health-Check.pdf TWO BASIC CHECKLISTS: https://www.dropbox.com/s/1f4w1vhpmzu938x/GoogleAnalyticsChecklist.pdf?dl=0 http://media.perpettersson.me/2017/02/GoogleAnalyticsImplementationChecklist.pdf
  32. @OptimiseOrDie The Kickoff Checklist to Rule Them All ▪ 137

    questions to ask when starting work with a product ▪ A big list of all the annoying questions I’ve ever asked ▪ They save my bacon every time ▪ Technical, historical, process, tools, marketing: bit.ly/2HFtAFs
  33. @OptimiseOrDie Marketing & Product History ▪ What historical marketing or

    product changes have happened? ▪ Is there any information on what happened in the last two years? ▪ Has there been any change in spend? Mix of activity? Focal areas? ▪ Is there a cyclical pattern to marketing spend or budget? ▪ How does the data and traffic mix fluctuate over the year? ▪ What cycles or seasonality does the business have? ▪ Are there any periods of promotion, sales, stock discounting? ▪ How often are emails sent out or are there other ‘spikes’ that we see? ▪ You need to work out everything that might have made a difference, until you’ve worked out everything that didn’t! ▪ The kickoff list will help you here!
  34. @OptimiseOrDie Choose a Time Period ▪ Start with a very

    long time period and examine traffic/channels/ ▪ Make sure you understand the small and large ‘cycles’ in the traffic ▪ Then, find a recent period with enough conversions (or other metric counts) ▪ Once you segment, your samples will get smaller – aim big! ▪ Make sure the period is ‘representative’ of traffic (that’s a long discussion) ▪ You are trying to pick a time period that will be used to model the value of shifting some metrics. ▪ Think carefully about the time period of data you use – and how it could be biased!
  35. @OptimiseOrDie Tagging Walkthrough ▪ WHAT tags are firing, sending WHAT

    data and WHEN during the journey as you are walking every interaction? ▪ For example – in modelling a client site this week – I had to: ▪ Look at all the category and product pages ▪ Work out how the “add to basket” shizzle works ▪ Figure out the flow from basket -> checkout ▪ Work out how existing customers could log in ▪ Map out the steps Registered customers see vs. New customers ▪ Tried guest checkout, tried as a registered customer by logging in, tried as a registered customer by purchasing when logged in already ▪ I mapped the customer journey and data layer trail simultaneously
  36. @OptimiseOrDie Tagging Walkthrough We inspect three things: What URL shows

    in the address bar when we do stuff? What tags (pageviews, events, data layer) fire when we use the product? What data is actally sent to Google Analytics? • We call this the tripod – what the address bar says, what the tags do, what ends up in GA • This is vital for mapping any of the ‘hooks’ we use for modelling • We also learn to trust (or distrust) certain pages as being ‘viable’ for modelling • If you don’t do this, even a GA audit won’t save you!
  37. @OptimiseOrDie Data Collection & Tagging Tools WASP Inspector: • Use

    for general purpose GA tag inspection & debugging • Find out what scripts are running in which order • Find out the data being sent to GA and how it is collected http://bit.ly/2qrYbRE
  38. @OptimiseOrDie Data Collection & Tagging Tools Analytics Pros Data Layer

    Inspector: • Inspect GA and GTM activity • Hack and test data layer bit.ly/2p0r5IN
  39. @OptimiseOrDie Data Collection & Tagging Tools Google Analytics Debugger: •

    General purpose GA debugger • I prefer WASP but some people use this one: bit.ly/2qrYbRE • Or this one: bit.ly/2p0NZzJ
  40. @OptimiseOrDie Data Collection & Tagging Tools Optimizely Chrome Extension: •

    See if they are running AB tests • Useful for QA & build bit.ly/2qrYs78
  41. @OptimiseOrDie Data Collection & Tagging Tools User Agent Switcher: •

    Mimic different user agent strings • Useful for testing and cross device work bit.ly/2pIMfZ1
  42. @OptimiseOrDie Data Collection & Tagging Tools Event Tracking Tracker: •

    Dump of event data in table • Handy for debugging GA and event issues • Find out what stuff is firing on the page bit.ly/2pHAlRg
  43. @OptimiseOrDie Data Collection & Tagging Tools Data Slayer: • Handy

    for debugging GA and event issues • Find out what stuff is firing on the page bit.ly/2pbNmPN
  44. @OptimiseOrDie What do I walk on the site? Everything! Key

    interaction patterns: ▪ Searching, Category and List Pages ▪ Filters, Sort Controls ▪ Product Page elements ▪ Guest checkout ▪ Key landing pages & Journeys ▪ Registered checkout ▪ Logged in checkout ▪ Logged out and then logged in checkout ▪ Basket handling ▪ Content pages ▪ Quick view ▪ Basket page ▪ Checkout steps ▪ Failure and error states ▪ Email handling, more, more, more....
  45. @OptimiseOrDie Walking the Site Tagging - How it Works! SO

    AFTER I WALKED THE SITE, I SEE STUFF LIKE THIS IN GA: ▪ Category Page /category/xxxx or /cat/xxxx ▪ Search /search?q=xxxx ▪ Product /product/xxxx ▪ Basket add /addtobasket ▪ Login /loginregister ▪ Guest flow /guestcheckout/address (then steps are the same) ▪ Registered flow /address (first time use) ▪ Delivery /deliveryoption ▪ Payment /paymentmethod ▪ Confirm /confirmorder ▪ Payment /payment ▪ Success /ordersuccess/xxxx
  46. @OptimiseOrDie The Holy Trinity There is a dance of 3

    elements to understand: SITE OR PRODUCT (how the site tags fire & send data) ANALYTICS SETUP (how google analytics is configured) TRAFFIC (historical & current traffic mix) ▪ If you are going to model a site, you need to understand these 3 ▪ History and Current configuration are both important ▪ Confidence in data comes from validating Data Collection ▪ If you haven’t checked, you don’t f***ing know, ok?
  47. OptimiseOrDie Tag & Journey Walking Common Weakness • Nobody checks

    the tags • You don’t know anything • The metrics are unreliable • The steps aren’t measured • Things are missing or broken • The analytics is broken • Nobody checks the basics! How to win • Do a tag walkthrough • Get some team training– just ask me! • See our live session 11 here: bit.ly/CRO4Agencies • Know the url structure • Know the data layer & flow • Understand and then model
  48. @OptimiseOrDie Pair Up with an Analytics Buddy ▪ Flying solo

    on any project carries a degree of risk ▪ When it comes to analytics & models, this is especially true ▪ You need the challenge, perspective and input of others to your work ▪ In the last week, I made two rookie mistakes – a “Time Period” and a “Forgot segment was applied” – I like having a safety net! ▪ 2 or more people work together on the modelling OR ▪ Others review and challenge the model, check the figures ▪ Why do developers get other developers to do code reviews or walkthroughs? ▪ Same reason here – quality is improved and you can have a bitch too!
  49. OptimiseOrDie Groundwork Summary Common Weakness • Not doing the groundwork!

    • Rapid models beat perfect models • Not walking the tags • Not mapping the GA data & journey • Not figuring out ‘the machine’ How to win • Ask all the questions (kickoff list) • Do the groundwork - everything • Get confidence in what you can trust • Work around broken data • Identify analytics holes or fixes
  50. @OptimiseOrDie • Learn how to craft useful and reliable advanced

    segments in GA • Make your own ‘on the fly’ ‘User’ or ‘Session’ funnels for anything! • Understand how the GA data model works • Understand data collection – how it works • Learn about common collection and configuration biases • Event Tracking, GTM and Data Layer manipulation • Pulling data direct from the API • Thinking about user, not session metrics (like Conversion Rate) • Considering cohorts rather than just ‘average’ or ‘mixed’ traffic • Automating and iterating models, grids and funnels Core Skillz
  51. @OptimiseOrDie • Browsers & Devices – how do they work

    (for analytics) • Tagging and Javascript – how it works (and tool proficiency) • Filters and Regex – for quickly hacking or grouping models • Data Model – familiarity with how GA collects and stores data • Advanced Segments – a stepping stone to mastering API pulls • Modelling – imposing your abstraction upon a dataset • Audit & Configuration – knowing exactly what’s broken or reliable • Visualisation – Presenting actionable, useful and simple truths • Automation – API pulls, Integration, GTM, Machine Learning Core Skills – MUST have
  52. @OptimiseOrDie • Paul Kok’s Excellent guide: https://online-metrics.com/regular-expressions/ • Annielytics –

    superb: https://www.annielytics.com/blog/analytics/regular-expressions-dont-use-google-analytics-without-them/ • Guide from Lunametrics: https://www.lunametrics.com/regex-book/Regular-Expressions-Google-Analytics.pdf • Guide for GTM and GA: https://www.apasters.com/blog/regex-guide-google-analytics-tag-manager/ • Various: http://www.regexpal.com & http://www.analyticsmarket.com/freetools/regex-tester & http://regex101.com http://www.leapthree.com/the-basics-of-regular-expressions-for-google-analytics/ https://brianclifton.com/blog/2012/05/11/jumpstart-regular-expression-tutorial/ https://www.youtube.com/watch?v=BtA4gRxoyIY Regex Resources
  53. Device Native Resolution GA Resolution Size iPhone X 1125 x

    2436 375 x 812 5.8” iPhone 8 Plus 1080 x 1920 414 x 736 5.5” iPhone 7 Plus 1080 x 1920 414 x 736 5.5” iPhone 6s Plus 1080 x 1920 375 x 667 5.5” iPhone 6s Plus 1080 x 1920 375 x 667 5.5” iPhone 8 750 x 1334 375 x 667 4.7” iPhone 7 750 x 1334 375 x 667 4.7” iPhone 6S 750 x 1334 375 x 667 4.7” iPhone SE 640 x 1136 320 x 568 4” iPhone 5 640 x 1136 320 x 568 4” iPhone 4 640 x 960 320 x 480 3.5” apple.co/2rfKtjh
  54. 2 – Groundwork (bonus deck) • Analytics Audit • The

    Kickoff Checklist • Marketing & Product History • Choose your time period • Do a Tag Walkthrough • Get an Analytics Buddy
  55. @OptimiseOrDie Resolutions Hack (bonus): GA has issues with device resolutions

    not being reality: • You CAN’T use any Tablet or Android Mobile resolutions • You CAN use resolutions for iPhone models What about laptops and desktops? That’s something we need to hack from the GA rez data We need to put the resolutions in buckets
  56. @OptimiseOrDie Desktop Resolutions Hack: Install this report and pick a

    time period: https://analytics.google.com/analytics/web/template?uid=MwKKJcbDTi2fURuQ7pez0A Export the data as Excel Then we can begin:
  57. @OptimiseOrDie • Add a new column B to the Excel

    and call it ‘Height’ • Add the following formula to the B column =RIGHT(A2,(LEN(A2)-FIND("x",A2))) • Using the bottom right bar, drag it all the way down the spreadsheet
  58. @OptimiseOrDie • It should look like the screenshot below •

    Delete the last row in the spreadsheet (the totals line) • Add a new column C, called Bucket
  59. @OptimiseOrDie • Sort the table by column B – “Height”

    • Now add the appropriate bucket to each set of heights • We use <=800, <=900, <=1024, <=1080, >1080 as our splits • Your spreadsheet should look like the diagram below • Now it’s time to sort the table • Sort the entire table by column C – “Bucket”
  60. @OptimiseOrDie • Now the table is sorted, you can subtotal

    it • Select the entire table and choose ‘Subtotal’ from the data menu in Excel
  61. @OptimiseOrDie • Choose the following subtotal options: • At each

    change in ‘bucket’, use function ‘sum’ • Add subtotal to Sessions, Revenue, Transactions • It should look like this:
  62. @OptimiseOrDie • After the subtotal, choose option ‘2’ on the

    left menu to collapse the totals • You should see the screenshot below • Now copy the whole area and paste it into Microsoft Word (or a text editor) • This strips the subtotals and hidden values in the subtotal table • Now add a new tab to the spreadsheet • Now copy the table from Microsoft Word (or your text editor) and paste it back into excel • You have a small table you can tidy up now
  63. @OptimiseOrDie • After tidying up the table, it should look

    like the screenshot below • Add 3 new columns
  64. @OptimiseOrDie • Add a formula to the columns to show

    the percentage of the total • If you use $ signs around the name of the cell, when you drag it, the $ marked bit won’t move • Let me show you!
  65. @OptimiseOrDie • Add formulas to all 3 columns • Drag

    them down using the bottom right control
  66. © Optimal Visit 2d018 © Optimal Visit 2019 • Significant

    audience has smaller height – laptops! • Design for where you want to lose audience! • Although some desktops are big, laptops are wider/shorter • Testing this site I’d aim for 1280x800 or 1366x768 CLIENT WORKED UP EXAMPLE Height Sessions % total <=800 24208 27.2% <=900 25132 28.3% <=1024 3483 3.9% <=1080 28995 32.6% >1080 7128 8.0%