If your Website is not easy to use for your target audiences, it will not be as successful as it should be. In this practical workshop, Top Floor Technologies' experts review the latest best practices in Website design and usability and discuss proven methods for improving your results. - Key principles for creating a great Website user experience - The most common Web usability mistakes and how to avoid them - Specific design examples to illustrate strong and poor usability

1. WELCOME
CREATING A DESIGN & USER EXPERIENCE
THAT DRIVE CONVERSION
User Experience Forum 2013
Friday, April 5, 13

2. AGENDA
Introductions
Increasing conversion through usability design
Some examples
Know your users - start with personas and user goals
The elements of interactive design
How modern technologies have driven increased conversion
Some examples
Mobile user experience
Break
Peer review of websites
Friday, April 5, 13

3. INTRODUCTIONS
About Shane Fell
•! 18 years of marketing and business development
experience
•! With Top Floor Technologies since 2002
•! Spearheaded the launch of Top Floor’s ongoing
series of Internet marketing educational seminars
•! Worked with numerous TFT clients to help create
a vision for their web marketing strategy
•! Featured speaker on a variety of online marketing
subjects
Friday, April 5, 13

4. INTRODUCTIONS
About Clay Konnor
•! 20 years digital marketing experience
•! Nationally featured speaker on the topic of
user experience design
•! Designed hundreds of websites
•! Worked with brands such as The Gap,
Bombay Company, Motorola, Northwestern
Mutual, Honeywell, ADP, GE Healthcare,
Farmers Insurance
Friday, April 5, 13

5. INTRODUCTIONS
About Top Floor
•! 14 years of digital marketing
•! Website design & development
•! Search engine marketing
•! Web analytics and conversion optimization
•! Branding and rebranding
•! Online content marketing
•! Integrated marketing
•! Digital support of trade shows and events
Friday, April 5, 13

6. WEBSITE AS HUB OF MARKETING
Friday, April 5, 13

7. 10 MOST EFFECTIVE B2B MARKETING CHANNELS
Friday, April 5, 13

8. PROGRESSION OF WEBSITE GOALS
10-15 years ago …
“Quick, we need a Web site!”
4-8 years ago …
“Okay, now that we have a Web site, how do we get people
to find it?”
Today …
“Now that people are on our Web site, how do we engage
them and get them to do what we want them to do?”
Friday, April 5, 13

9. THE IMPACT OF INTERNET TECHNOLOGIES ON MARKETING
Friday, April 5, 13

10. SUCCESS FORMULA
Website Visits x Conversion Percentage = Results
Friday, April 5, 13

11. INCREASING CONVERSION THROUGH UX DESIGN
Friday, April 5, 13

12. INCREASING CONVERSION THROUGH UX DESIGN
Friday, April 5, 13

13. THE IMPACT OF USABILITY ON CONVERSION
defining usability
“Usability • making sure that something works
well: that a person of average (or even below
average) ability and experience can use the
thing – whether it’s a website, a fighter jet, or a
revolving door – for its intended purpose
without getting hopelessly frustrated”
--Steve Krug - Author
Friday, April 5, 13

14. DEFINING USABILITY
Friday, April 5, 13

15. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
• The component most under your control
• Delivers the biggest bang for your buck
• Exponential effect on bottom line
• You get the benefit… forever
• Competitive advantage
• Customer loyalty goes to the best user experience
Friday, April 5, 13

16. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
• Companies that have engaged in conversion
enhancement initiatives have seen average increases of
25%-600% or more
• The median conversion increase is 40-60%
-- Jakob Nielsen’s report “ROI on Usability”
Friday, April 5, 13

17. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
which had greater conversion?
Friday, April 5, 13

18. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
familiar top nav
brief headline
simple
instructions
contact info
stock photo of
happy person
Friday, April 5, 13

19. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
simplify layout to
two columns and
removed all nav shade form column
replace entire
header of site with more detailed copy
just logo about offer
replace stock photo
with actually
relevant image
remove alternate big submit button -
contact info only button on page
Friday, April 5, 13

20. visual parity to
online ad
after testing:
less copy worked
better
Friday, April 5, 13

21. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
Conversion Increase = 600%
Friday, April 5, 13

22. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
Friday, April 5, 13

23. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
Conversion Increase = 58%
Friday, April 5, 13

24. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
Friday, April 5, 13

25. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
Friday, April 5, 13

26. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
Friday, April 5, 13

27. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
Conversion Increase = 2%
Friday, April 5, 13

28. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
why it matters
Conversion Increase = 2%
A Measly 2%?!
Friday, April 5, 13

29. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
effects on the bottom line
Option 1 Option 2
Design
Click and Load Site Asynchronous Site
Budget 1,000,000 1,000,000
Traffic 1,000,000 1,000,000
CPC $1.00 $1.00
Conversion Rate 3% 5%
Sales 30,000 50,000
Average Revenue
$100 $100
Per Sale
Total Web Sales $3,000,000 $5,000,000
Friday, April 5, 13

30. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
What are some attributes of a good website?
Friday, April 5, 13

31. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
What are some attributes of a good website?
What are some attributes of a bad website?
Friday, April 5, 13

32. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Web users who have a positive user experience on your
site are:
•! Twice as likely to return to the site
•! Four times as likely to report enhanced brand
opinion.
•! Four times as likely to make a future purchase.
Friday, April 5, 13

33. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
top reasons for site abandonment
Found it difficult to locate products or information 36
Did not trust the site 32
Forms required too much information 22
Friday, April 5, 13

34. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
the consequences of poor design
76 74
71
54
45
24
Never visit Unsubscribe Never View the Complain to Complain to
the site again from purchase company others company
promotions from the negatively
and emails company
Friday, April 5, 13

35. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
increased importance of usablity to users
29
24
22
21
20
18
13 13
Security and Ease of Ease of use Confirmation
confidence conversion (usability) of action
2007 2010
Friday, April 5, 13

36. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Creating a user experience that facilitates:
Discovery
Recovery
Context
Feedback
Experimentation
Comparison
Collaboration
Friday, April 5, 13

37. A SUCCESSFUL WEBSITE
•! Based on strategic planning
•! Targets specific, measurable goals
•! Has a look and feel that establishes trust and
confidence in the brand
•! Provides sufficient content to engage the user
•! Built to perform in search engines
•! Communicates clearly with visitors
•! Provides sufficient content to engage the user
•! Is built with a focus on user experience
Friday, April 5, 13

38. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
•! Built to maximize conversion
•! Built around known personas and user goals
•! The website allows users to manipulate
information “their way”
•! Paths to user goals are obvious and guide users
•! Conversion is easy
Friday, April 5, 13

39. KNOW YOUR USERS
•! You are not your user
•! Users have different goals than each other
•! Users have different goals than you
•! Users don’t care as you do
Friday, April 5, 13

40. WHO ARE YOU BUILDING YOUR WEBSITE FOR?
More $ales
-Excellent!
Friday, April 5, 13

41. WHO ARE YOU BUILDING YOUR WEBSITE FOR?
Your CEO?
More $ales
-Excellent!
Friday, April 5, 13

42. WHO ARE YOU BUILDING YOUR WEBSITE FOR?
Everyone who
visits our
Website must
register and
provide all of
their contact
information.
Friday, April 5, 13

43. WHO ARE YOU BUILDING YOUR WEBSITE FOR?
Your Sales Team?
Everyone who
visits our
Website must
register and
provide all of
their contact
information.
Friday, April 5, 13

44. WHO ARE YOU BUILDING YOUR WEBSITE FOR?
Why would
we want any
images on
our Website?
Friday, April 5, 13

45. WHO ARE YOU BUILDING YOUR WEBSITE FOR?
Your IT Department?
Why would
we want any
images on
our Website?
Friday, April 5, 13

46. WHO ARE YOU BUILDING YOUR WEBSITE FOR?
'To Start
Press Any
Key'.
Where's the
ANY key?”
Friday, April 5, 13

47. GET TO KNOW YOUR USERS
Who are your target customers?
What are their goals on you website once they are there?
What roles do they play?
How does your product/service help them?
What questions do they ask when considering your offerings?
What can they accomplish on your Website?
What industries are they in?
What is their education?
How technically savvy are they?
Friday, April 5, 13

48. GET TO KNOW YOUR USERS
Who are your target customers?
What are their goals on you website once they are there?
What roles do they play?
How does your product/service help them?
What questions do they ask when considering your offerings?
What can they accomplish on your Website?
What industries are they in?
What is their education?
How technically savvy are they?
How do we deliver information to them in the methods that
are most meaningful and useful to each?
Friday, April 5, 13

49. WHAT FRUSTRATES USERS?
•! Anything that slows the path to their goal
•! Intro pages
•! Ambiguous navigation
•! Long navigation paths
•! Page loads
•! Long forms
•! Registration without benefit
•! Difficult conversion once goal is identified
•! Each time you make a user think too much you risk
abandonment
Friday, April 5, 13

50. GET TO THE POINT
•! Users scan, search engines read
•! Users should be able to quickly understand what each
piece of content is about
•! Users need clear direction to their personal goals
Friday, April 5, 13

51. MAXIMIZE CALLS TO ACTION
•! Navigation is consistent and obvious
•! Navigation guides users in methods most meaningful to them
•! Clear user paths - don’t overwhelm users with choices
•! Test your design for every identified persona
Friday, April 5, 13

52. FOLLOW KNOWN BEST PRACTICES
•! What site is this?
•! What page is this?
•! What are the major sections of the site?
•! What are my options at this level?
•! Where am I in relation to other information on the site?
•! How can I find what I’m looking for?
•! How can I make comparisons?
•! How can I convert?
Friday, April 5, 13

53. FOLLOW KNOWN BEST PRACTICES
•! A consistent navigation scheme
•! A call to action on every page
•! Calls to action are placed in logical user flow
•! Visual hierarchy that is known and tested to optimize performance
•! User controls are obvious and guide users
•! User controls that match user goals
•! User controls that speed and ease a user’s process
Friday, April 5, 13

54. INTERACTIVE DESIGN PROCESS
concrete
visual design
surface interface design
skeleton user experience
navigation design
structure information architecture
content requirements
scope technological requirements
user needs
strategy marketing objectives
abstract
Friday, April 5, 13

55. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Building delivery methods for content that
facilitate user goals.
Friday, April 5, 13

56. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
the early web
Friday, April 5, 13

57. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Friday, April 5, 13

58. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Your competitor’s site!
Friday, April 5, 13

59. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
The modern method
Friday, April 5, 13

60. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
4.35 3.17 3.06 1.37 0.19 0.11 0.03 0.05 0.20 1.22 2.86 3.09
5.35 4.03 3.77 2.51 1.84 1.59 0.85 1.22 1.94 3.25 5.65 6.00
1.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.47
3.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.42
2.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.83
Friday, April 5, 13

61. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Friday, April 5, 13

62. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Friday, April 5, 13

63. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Friday, April 5, 13

64. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Friday, April 5, 13

65. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Friday, April 5, 13

66. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
Web pages feel more responsive by
exchanging data with the server behind
the scenes so that the entire page does
not have to be reloaded to give
information.
Friday, April 5, 13

67. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
some examples - empowering the user
Friday, April 5, 13

68. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
some examples - empowering the user
Friday, April 5, 13

69. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
some examples - empowering the user
Friday, April 5, 13

70. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
robust, user-centric navigation
Friday, April 5, 13

71. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
robust, user-centric navigation
Friday, April 5, 13

72. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
robust category navigation
Friday, April 5, 13

73. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
robust category navigation
Friday, April 5, 13

74. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
robust product information
Friday, April 5, 13

75. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
robust service information
Friday, April 5, 13

76. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
robust service information
Friday, April 5, 13

77. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
robust service information
Friday, April 5, 13

78. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
user criteria navigation
Friday, April 5, 13

79. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
user criteria navigation
Friday, April 5, 13

80. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
user criteria navigation
Friday, April 5, 13

81. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
user criteria navigation
Friday, April 5, 13

82. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
user assist wizards
Friday, April 5, 13

83. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
user assist wizards
Friday, April 5, 13

84. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
user assist wizards
Friday, April 5, 13

85. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
content customization
Friday, April 5, 13

86. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
robust product comparison
Friday, April 5, 13

87. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
segmented, actionable search results
Friday, April 5, 13

88. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
segmented, actionable search results
Friday, April 5, 13

89. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
segmented, actionable search results
Friday, April 5, 13

90. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
segmented, actionable search results
Friday, April 5, 13

91. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
self validating forms
Friday, April 5, 13

92. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
inline functionality
Friday, April 5, 13

93. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
inline functionality
Friday, April 5, 13

94. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
single page checkout with progress indicator
Friday, April 5, 13

95. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
matching user goals
Friday, April 5, 13

96. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
predictive search
Friday, April 5, 13

97. A WORD ABOUT MOBILE
Friday, April 5, 13

98. A WORD ABOUT MOBILE
Friday, April 5, 13

99. MOBILE USER EXPERIENCE
Friday, April 5, 13

100. MOBILE USER EXPERIENCE
Friday, April 5, 13

101. MOBILE USER EXPERIENCE
Friday, April 5, 13

102. MOBILE USER EXPERIENCE
Friday, April 5, 13

103. USER EXPERIENCE TESTING
conversion optimization
Continuing analysis aimed at improvement
Friday, April 5, 13

104. USER EXPERIENCE TESTING
conversion optimization
Continuing analysis aimed at improvement
Examine user behavior and conversion results
to identify ares of improvement
Friday, April 5, 13

105. USER EXPERIENCE TESTING
conversion optimization
Continuing analysis aimed at improvement
Examine user behavior and conversion results
to identify ares of improvement
User experience testing
Friday, April 5, 13

106. USER EXPERIENCE TESTING
conversion optimization
Continuing analysis aimed at improvement
Examine user behavior and conversion results
to identify ares of improvement
User experience testing
Implementation of changes based on testing
Friday, April 5, 13

107. USER EXPERIENCE TESTING
conversion optimization
Continuing analysis aimed at improvement
Examine user behavior and conversion results
to identify ares of improvement
User experience testing
Implementation of changes based on testing
Begin the process again...
Friday, April 5, 13

108. USER EXPERIENCE TESTING
•! Types of testing
•! A-B Testing
•! Multivariate Testing
•! Small Sample Testing
•! Full Persona / Use Case Testing (Morae Testing)
Friday, April 5, 13

109. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
top reasons for site abandonment
Found it difficult to locate products or information 36
Did not trust the site 32
Forms required too much information 22
Friday, April 5, 13

110. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
conversion completion rates
59
50
48
40
Average conversion Optimized Persona based Single page
performance of well- navigation design / usability or process for
designed site conversion
Friday, April 5, 13

111. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
effects on the bottom line
Option 1 Option 2
Design
Hierarchical Navigation Filtered Navigation
Budget 1,000,000 1,000,000
Traffic 1,000,000 1,000,000
CPC $1.00 $1.00
Conversion Rate 3% 5%
Sales 30,000 50,000
Average Revenue $100 $100
Per Sale
Total Web Sales $3,000,000 $5,000,000
Friday, April 5, 13

112. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
effects on brand perception
Friday, April 5, 13

113. CREATING A USER EXPERIENCE THAT DRIVES CONVERSION
which had greater conversion?
Friday, April 5, 13

114. thank you
Friday, April 5, 13