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.

Fórum 2016 - UX Design to increase conversion. The Hubspot way.

310 views

Published on

Austin Knight, HubSpot, fala sobre UX Design to increase conversion. The Hubspot way. no Fórum E-Commerce Brasil 2016. Saiba mais em https://www.ecommercebrasil.com.br/forum2016

Published in: Business
  • Be the first to comment

Fórum 2016 - UX Design to increase conversion. The Hubspot way.

  1. 1. Austin Knight Senior UX Designer at HubSpot UX Design Inbound Marketing &
  2. 2. @ustinKnight UX Design Inbound Marketing
  3. 3. UX Design Inbound Marketing A deep-thinking, objective, goal-oriented, adaptable, and well-informed way of designing every aspect of a system and it’s experience. @ustinKnight
  4. 4. UX Design Inbound Marketing A deep-thinking, objective, goal-oriented, adaptable, and well-informed way of designing every aspect of a system and it’s experience. A friendly, data-driven, and value-focused way of naturally attracting customers to a brand and engaging with them. @ustinKnight
  5. 5. UX Design Inbound Marketing A human-centered approach to design A human-centered approach to marketing @ustinKnight
  6. 6. HUMAN-CENTERED @ustinKnight
  7. 7. Provide a great experience But there’s a problem! @ustinKnight
  8. 8. Provide a great experience But there’s a problem! @ustinKnight
  9. 9. Social media posts, search results, paid ads This is what we think about @ustinKnight
  10. 10. MARKETING Social media posts, search results, paid ads This is what we think about @ustinKnight
  11. 11. PRE-SITE Social media posts, search results, paid ads This is what we think about @ustinKnight
  12. 12. PRE-SITE ON-SITE POST-SITE Social media posts, search results, paid ads Landing page, navigation, blog structure, checkout or conversion flow. Sales or Support representative, email follow-up. @ustinKnight
  13. 13. PRE-SITE ON-SITE POST-SITE Social media posts, search results, paid ads Landing page, navigation, blog structure, checkout or conversion flow. Sales or Support representative, email follow-up. @ustinKnight
  14. 14. PRE-SITE ON-SITE POST-SITE Social media posts, search results, paid ads Landing page, navigation, blog structure, checkout or conversion flow. Sales or Support representative, email follow-up. @ustinKnight
  15. 15. By: Jane Doe What tools do you use to get your online marketing work done? Can you do all the same work of a digital marketer, and do it for free? TRY OUR FREE MARKETING TOOL Is it possible to have all these great tools without paying a cent? It was a fun challenge to come up with a way to build a $0 marketing stack, to find free alternatives to popular paid tools and services. I’m grateful for all the amazing companies out there that offer such value for so little. Here’s the list I came up with for free alternatives to paid tools. I’d love to know what you think! 31 Marketing Tools for Startups This is what we think about @ustinKnight
  16. 16. By: Jane Doe What tools do you use to get your online marketing work done? Can you do all the same work of a digital marketer, and do it for free? TRY OUR FREE MARKETING TOOL Is it possible to have all these great tools without paying a cent? It was a fun challenge to come up with a way to build a $0 marketing stack, to find free alternatives to popular paid tools and services. I’m grateful for all the amazing companies out there that offer such value for so little. Here’s the list I Join our email list Name Submit TechRev Services Pricing Blog Contact Us Email GET STARTED 31 Marketing Tools for Startups @ustinKnight
  17. 17. By: Jane Doe What tools do you use to get your online marketing work done? Can you do all the same work of a digital marketer, and do it for free? TRY OUR FREE MARKETING TOOL Is it possible to have all these great tools without paying a cent? It was a fun challenge to come up with a way to build a $0 marketing stack, to find free alternatives to popular paid tools and services. I’m grateful for all the amazing companies out there that offer such value for so little. Here’s the list I Join our email list Name Submit TechRev Services Pricing Blog Contact Us Email GET STARTED 31 Marketing Tools for Startups @ustinKnight
  18. 18. By: Jane Doe What tools do you use to get your online marketing work done? Can you do all the same work of a digital marketer, and do it for free? TRY OUR FREE MARKETING TOOL Is it possible to have all these great tools without paying a cent? It was a fun challenge to come up with a way to build a $0 marketing stack, to find free alternatives to popular paid tools and services. I’m grateful for all the amazing companies out there that offer such value for so little. Here’s the list I Join our email list Name Submit TechRev Services Pricing Blog Contact Us Email GET STARTED 31 Marketing Tools for Startups @ustinKnight
  19. 19. By: Jane Doe What tools do you use to get your online marketing work done? Can you do all the same work of a digital marketer, and do it for free? TRY OUR FREE MARKETING TOOL Is it possible to have all these great tools without paying a cent? It was a fun challenge to come up with a way to build a $0 marketing stack, to find free alternatives to popular paid tools and services. I’m grateful for all the amazing companies out there that offer such value for so little. Here’s the list I Join our email list Name Submit TechRev Services Pricing Blog Contact Us Email GET STARTED 31 Marketing Tools for Startups @ustinKnight
  20. 20. By: Jane Doe What tools do you use to get your online marketing work done? Can you do all the same work of a digital marketer, and do it for free? TRY OUR FREE MARKETING TOOL Is it possible to have all these great tools without paying a cent? It was a fun challenge to come up with a way to build a $0 marketing stack, to find free alternatives to popular paid tools and services. I’m grateful for all the amazing companies out there that Join our email list Name Submit TechRev Services Pricing Blog Contact Us Email GET STARTED 31 Marketing Tools for Startups Get 50% off when you sign up today REDEEM YOUR OFFER @ustinKnight
  21. 21. Get 50% off when you sign up today REDEEM YOUR OFFER By: Jane Doe What tools do you use to get your online marketing work done? Can you do all the same work of a digital marketer, and do it for free? TRY OUR FREE MARKETING TOOL Is it possible to have all these great tools without paying a cent? It was a fun challenge to come up with a way to build a $0 marketing stack, to find free alternatives to popular paid tools and services. I’m grateful for all the amazing companies out there that Join our email list Name Submit TechRev Services Pricing Blog Contact Us Email GET STARTED 31 Marketing Tools for Startups Sign up for an exclusive offer! SIGN ME UP X Don’t leave yet! SIGN ME UP Sign up today and we’ll give you our product for free! Just sign up! X @ustinKnight
  22. 22. is kingContent @ustinKnight
  23. 23. is kingContext @ustinKnight
  24. 24. UX Design A human-centered approach to design Inbound Marketing A human-centered approach to marketing @ustinKnight
  25. 25. UX Design A human-centered approach to design Inbound Marketing A human-centered approach to marketing @ustinKnight
  26. 26. UX Design Inbound Marketing DESIGNER MARKETER @ustinKnight
  27. 27. MARKETER DESIGNER UX Design Inbound Marketing @ustinKnight
  28. 28. MARKETER @ustinKnight
  29. 29. DESIGNER @ustinKnight
  30. 30. Example Tools Fundamentals Statistics @ustinKnight
  31. 31. THE FUNDAMENTALS OF UX DESIGN 1 @ustinKnightuxd.to/guide
  32. 32. What is UX? @ustinKnightuxd.to/guide User Experience (UX) involves all interactions that a user has with a particular product, system or service. It is the process of enhancing user satisfaction by improving the usability, ease of use, and pleasure provided in the interaction between the user and the product. It is human-centered, data-inspired design that assists both the users and the business in achieving their goals. Web UX involves the strategy, research, analysis, design, implementation, measurement, and iteration of a website.
  33. 33. What is UX? @ustinKnightuxd.to/guide It is human-centered, data-inspired design that assists both the users and the business in achieving their goals.
  34. 34. Principles @ustinKnightuxd.to/guide 1. The design is based upon an explicit understanding of users, tasks and environments
  35. 35. Principles @ustinKnightuxd.to/guide 1. The design is based upon an explicit understanding of users, tasks and environments 2. Users are involved throughout design and development
  36. 36. Principles @ustinKnightuxd.to/guide 1. The design is based upon an explicit understanding of users, tasks and environments 2. Users are involved throughout design and development 3. The design is driven and refined by user-centered evaluation
  37. 37. Principles @ustinKnightuxd.to/guide 1. The design is based upon an explicit understanding of users, tasks and environments 2. Users are involved throughout design and development 3. The design is driven and refined by user-centered evaluation 4. The process is iterative
  38. 38. Principles @ustinKnightuxd.to/guide 1. The design is based upon an explicit understanding of users, tasks and environments 2. Users are involved throughout design and development 3. The design is driven and refined by user-centered evaluation 4. The process is iterative 5. The design addresses the whole user experience
  39. 39. Principles @ustinKnightuxd.to/guide 1. The design is based upon an explicit understanding of users, tasks and environments 2. Users are involved throughout design and development 3. The design is driven and refined by user-centered evaluation 4. The process is iterative 5. The design addresses the whole user experience 6. The design team includes multidisciplinary skills and perspectives
  40. 40. Process @ustinKnightuxd.to/guide Lean UX
  41. 41. Process @ustinKnightuxd.to/guide
  42. 42. Process @ustinKnightuxd.to/guide
  43. 43. Process @ustinKnightuxd.to/guide Think Make Check Strategy Research Analysis Design Implementation Measuring Iteration Competitive analysis Stakeholder interviews Brainstorming KPI definition Value proposition Ecosystem map Mood boards Story boards Analytics review Surveys Content audit User interviews Card sorting Heuristic review User testing analysis A/B testing Analytics review Personas Scenarios Mental models Use cases User flows Heuristic review User testing analysis Collaborative design Taxonomies Sketches Wireframes Mockups Prototypes User testing Code development QA testing Beta and public launch Analytics review KPI performance Heat mapping Scroll mapping User testing Bug fixes Qualitative user feedback Quantitative feedback User pain point reduction Feature innovation
  44. 44. Process @ustinKnightuxd.to/guide THINK Scenarios
  45. 45. Process @ustinKnightuxd.to/guide THINK MAKE Scenarios Wireframes
  46. 46. Process @ustinKnightuxd.to/guide THINK MAKE CHECK Scenarios Wireframes Heat Maps
  47. 47. Thoughtful solutions @ustinKnightuxd.to/guide
  48. 48. Why should we care about UX? @ustinKnightuxd.to/guide
  49. 49. STATISTICS RELATED TO UX 2 @ustinKnightuxd.to/guide
  50. 50. Why should we care about UX? @ustinKnightuxd.to/guide 94% of a user’s first impressions of a brand result from the design of its website. USERS CARE ABOUT DESIGN
  51. 51. Why should we care about UX? @ustinKnightuxd.to/guide 79% of users will go to a different site if they don’t immediately find what they’re looking for USERS ARE IMPATIENT
  52. 52. Why should we care about UX? @ustinKnightuxd.to/guide The average user will leave a website and not return if it does not load in 3 seconds. USERS ARE IMPATIENT
  53. 53. Why should we care about UX? @ustinKnightuxd.to/guide A one second page load delay would cost Amazon $1.6 Billion in sales per year. USERS ARE IMPATIENT
  54. 54. Why should we care about UX? @ustinKnightuxd.to/guide 50 million mobile apps are downloaded every day. 95% are abandoned within a month. USERS ARE IMPATIENT
  55. 55. Why should we care about UX? @ustinKnightuxd.to/guide 25% of apps are abandoned after a single day. USERS ARE IMPATIENT
  56. 56. Why should we care about UX? @ustinKnightuxd.to/guide Over 220 million desktop users and 420 million mobile users run an ad blocker. USERS VALUE GOOD EXPERIENCES
  57. 57. Why should we care about UX? @ustinKnightuxd.to/guide You are 64 times more likely to climb Mount Everest than click on a banner ad. USERS VALUE GOOD EXPERIENCES
  58. 58. Why should we care about UX? @ustinKnightuxd.to/guide Spotify’s 10 second Snapchat ad received 26 million views, causing a 30% lift in subscription intent. USERS VALUE GOOD EXPERIENCES
  59. 59. Why should we care about UX? @ustinKnightuxd.to/guide This Taco Bell lens received 244 million views on Snapchat in a single day. The average user plays with a lens for 22 seconds. USERS VALUE GOOD EXPERIENCES
  60. 60. Why should we care about UX? @ustinKnightuxd.to/guide Google now punishes sites that are not mobile optimized, have mobile pop-ups, or are not using SSL encryption. USERS VALUE GOOD EXPERIENCES
  61. 61. @ustinKnightuxd.to/guide In 10 years, a $10,000 investment in design centric companies would have yielded returns 228% greater than the same investment in the S&P. Why should we care about UX? UX IS A GOOD INVESTMENT
  62. 62. Why should we care about UX? @ustinKnightuxd.to/guide
  63. 63. Why should we care about UX? @ustinKnightuxd.to/guide 
  64. 64. Why should we care about UX? @ustinKnightuxd.to/guide  ơ
  65. 65. Why should we care about UX? @ustinKnightuxd.to/guide  ơ ſ
  66. 66. Why should we care about UX? @ustinKnightuxd.to/guide
  67. 67. uxd.to/guide @ustinKnight UX is growing globally
  68. 68. google.com/trends @ustinKnight
  69. 69. designerhangout.co @ustinKnight
  70. 70. kpcb.com/internet-trends @ustinKnight User behavior is changing
  71. 71. kpcb.com/internet-trends @ustinKnight
  72. 72. kpcb.com/internet-trends @ustinKnight
  73. 73. kpcb.com/internet-trends @ustinKnight
  74. 74. kpcb.com/internet-trends @ustinKnight
  75. 75. kpcb.com/internet-trends @ustinKnight
  76. 76. kpcb.com/internet-trends @ustinKnight
  77. 77. kpcb.com/internet-trends @ustinKnight
  78. 78. kpcb.com/internet-trends @ustinKnight
  79. 79. @ustinKnight Understand your audience
  80. 80. How is this actually done? @ustinKnight
  81. 81. UX DESIGN AT HUBSPOT 3 @ustinKnight
  82. 82. @ustinKnight
  83. 83. @ustinKnight
  84. 84. Analytics Review @ustinKnight
  85. 85. Heat Mapping and Scroll Mapping @ustinKnight
  86. 86. Session Recordings @ustinKnight
  87. 87. User Testing @ustinKnight
  88. 88. Stakeholder and Customer Interviews @ustinKnight
  89. 89. Unsolicited Feedback @ustinKnight
  90. 90. Wireframes @ustinKnight
  91. 91. Mockups @ustinKnight
  92. 92. Interactions @ustinKnight
  93. 93. Smart Content @ustinKnight
  94. 94. Accessibility @ustinKnight
  95. 95. Internationalization @ustinKnight
  96. 96. Code Development @ustinKnight
  97. 97. QA Testing @ustinKnight
  98. 98. @ustinKnight
  99. 99. @ustinKnight
  100. 100. Conversion Rate
 (22% Actual Increase to Product Pages)○ @ustinKnight
  101. 101. Conversion Rate
 (22% Actual Increase to Product Pages)○ Exit Rate
 (18% Actual Decrease in Exit Rate)○ @ustinKnight
  102. 102. Conversion Rate
 (22% Actual Increase to Product Pages)○ Exit Rate
 (18% Actual Decrease in Exit Rate)○ Pain Point Behaviors
 (FAQ, Search Queries, Misguided Clicks)○ @ustinKnight
  103. 103. What are the ideal tools for UX Design? uxd.to/guide @ustinKnight
  104. 104. TOOLSWORTH USING 4 uxd.to/guide @ustinKnight
  105. 105. uxd.to/guide @ustinKnight Think • UserTesting.com • Hotjar • CrazyEgg • Usabilla • UsabilityHub • Optimal Workshop Make • Gliffy • XMind • Balsamiq / Axure • Sketch / Photoshop • InVision / Adobe XD Marvel / Webflow
 UXPin / Keynote Check • Google Analytics • HubSpot • Mixpanel • KISSmetrics • Optimizely
  106. 106. uxd.to/guide @ustinKnight
  107. 107. @ustinKnight Design Marketing
  108. 108. @ustinKnight AustinKnight.com uxd.to/guide @HubSpot HubSpot.com
  109. 109. uxd.to/guide @ustinKnight
  110. 110. Why should we care about UX? @ustinKnightuxd.to/fail uxd.to/fail

×