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

1. Austin Knight
Senior UX Designer at HubSpot
UX Design
Inbound Marketing
&

2. @ustinKnight
UX Design Inbound Marketing

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. 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. UX Design Inbound Marketing
A human-centered
approach to design
A human-centered
approach to marketing
@ustinKnight

6. HUMAN-CENTERED
@ustinKnight

7. Provide a great experience
But there’s a
problem!
@ustinKnight

8. Provide a great experience
But there’s a
problem!
@ustinKnight

9. Social media
posts, search
results, paid ads
This is what
we think about
@ustinKnight

10. MARKETING
Social media
posts, search
results, paid ads
This is what
we think about
@ustinKnight

11. PRE-SITE
Social media
posts, search
results, paid ads
This is what
we think about
@ustinKnight

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. is kingContent
@ustinKnight

23. is kingContext
@ustinKnight

24. UX Design
A human-centered
approach to design
Inbound Marketing
A human-centered
approach to marketing
@ustinKnight

25. UX Design
A human-centered
approach to design
Inbound Marketing
A human-centered
approach to marketing
@ustinKnight

26. UX Design Inbound Marketing
DESIGNER MARKETER
@ustinKnight

27. MARKETER DESIGNER
UX Design Inbound Marketing
@ustinKnight

28. MARKETER
@ustinKnight

29. DESIGNER
@ustinKnight

30. Example Tools
Fundamentals Statistics
@ustinKnight

31. THE FUNDAMENTALS
OF UX DESIGN
1
@ustinKnightuxd.to/guide

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. 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. Principles
@ustinKnightuxd.to/guide
1. The design is based upon an explicit understanding of users,
tasks and environments

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. 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. 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. 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. 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. Process
@ustinKnightuxd.to/guide
Lean UX

41. Process
@ustinKnightuxd.to/guide

42. Process
@ustinKnightuxd.to/guide

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. Process
@ustinKnightuxd.to/guide
THINK
Scenarios

45. Process
@ustinKnightuxd.to/guide
THINK MAKE
Scenarios Wireframes

46. Process
@ustinKnightuxd.to/guide
THINK MAKE CHECK
Scenarios Wireframes Heat Maps

47. Thoughtful solutions
@ustinKnightuxd.to/guide

48. Why should we care about UX?
@ustinKnightuxd.to/guide

49. STATISTICS
RELATED TO UX
2
@ustinKnightuxd.to/guide

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. 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. 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. 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. 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. Why should we care about UX?
@ustinKnightuxd.to/guide
25% of apps are abandoned
after a single day.
USERS ARE IMPATIENT

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. 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. 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. 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. 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. @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. Why should we care about UX?
@ustinKnightuxd.to/guide

63. Why should we care about UX?
@ustinKnightuxd.to/guide


64. Why should we care about UX?
@ustinKnightuxd.to/guide
 ơ

65. Why should we care about UX?
@ustinKnightuxd.to/guide
 ơ ſ

66. Why should we care about UX?
@ustinKnightuxd.to/guide

67. uxd.to/guide @ustinKnight
UX is growing globally

68. google.com/trends @ustinKnight

69. designerhangout.co @ustinKnight

70. kpcb.com/internet-trends @ustinKnight
User behavior is changing

71. kpcb.com/internet-trends @ustinKnight

72. kpcb.com/internet-trends @ustinKnight

73. kpcb.com/internet-trends @ustinKnight

74. kpcb.com/internet-trends @ustinKnight

75. kpcb.com/internet-trends @ustinKnight

76. kpcb.com/internet-trends @ustinKnight

77. kpcb.com/internet-trends @ustinKnight

78. kpcb.com/internet-trends
@ustinKnight

79. @ustinKnight
Understand your audience

80. How is this actually done?
@ustinKnight

81. UX DESIGN
AT HUBSPOT
3
@ustinKnight

82. @ustinKnight

83. @ustinKnight

84. Analytics Review
@ustinKnight

85. Heat Mapping and Scroll Mapping
@ustinKnight

86. Session Recordings
@ustinKnight

87. User Testing
@ustinKnight

88. Stakeholder and Customer Interviews
@ustinKnight

89. Unsolicited Feedback
@ustinKnight

90. Wireframes
@ustinKnight

91. Mockups
@ustinKnight

92. Interactions
@ustinKnight

93. Smart Content
@ustinKnight

94. Accessibility
@ustinKnight

95. Internationalization
@ustinKnight

96. Code Development
@ustinKnight

97. QA Testing
@ustinKnight

98. @ustinKnight

99. @ustinKnight

100. Conversion Rate
(22% Actual Increase to Product Pages)○
@ustinKnight

101. Conversion Rate
(22% Actual Increase to Product Pages)○
Exit Rate
(18% Actual Decrease in Exit Rate)○
@ustinKnight

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. What are the ideal
tools for UX Design?
uxd.to/guide @ustinKnight

104. TOOLSWORTH USING
4
uxd.to/guide @ustinKnight

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. uxd.to/guide @ustinKnight

107. @ustinKnight
Design
Marketing

108. @ustinKnight
AustinKnight.com
uxd.to/guide
@HubSpot
HubSpot.com

109. uxd.to/guide @ustinKnight

110. Why should we care about UX?
@ustinKnightuxd.to/fail
uxd.to/fail