This is not a marketing presentation on how to get more conversions. In this presentation we’ll walk through best practices for integrating A/B testing tools and plugins like Visual Web Optimizer and Optimizely for WordPress. We will also look at how to properly setup template pages, embed tracking codes and how to manage your content and media for testing across multiple devices.

1. #WCMTL
How to A/B Test with WordPress
Conversions Aren’t Just for Landing Pages

2. Before we can start testing,
we must understand the fundamentals.
#WCMTL 2015

3. Let’s begin with the
7 Principles of Conversion Centered Design
#WCMTL 2015

4. Let’s begin with the
7 Principles of Conversion Centered Design
#WCMTL 2015
as outlined by Oli Gardner (Unbounce) and Dan McGraw (KissMetrics)

5. 1
#WCMTL 2015
Attention Ratio
This is the ratio of interactive elements
(links) on a page vs. conversion goals
(which is always one).
Basically, focus the user attention on
one thing and one thing only!

6. 2
#WCMTL 2015
Conversion Coupling
This is the pre-click experience vs. the
post-click landing experience.
Basically, make sure your ad design and
message match - consistency is key!

7. 3
#WCMTL 2015
Contextual Design
Put the users experience into context
with his/her environment.
Basically, make sure the experience,
look and feel, makes contextual sense
to the user.

8. 4
#WCMTL 2015
Congruent Design
Ensure all elements on your page align
to produce a cohesive message.
Basically, all elements should work
together, not against each other.

9. 5
#WCMTL 2015
Clarity
Create a simple, easily digestible and
delightful experience.
Basically, make it dead simple for your
users to understand.

10. 6
#WCMTL 2015
Credibility
Use trust signals and be transparent.
People need to trust your brand is ther
going to give you anything.
Basically, add testimonials, social proof,
etc.

11. 7
#WCMTL 2015
Conversion Continuance
Find ways to gather an additional
conversion. These ways can include
kickback emails, thank you pages,
registration confirmations, etc.
Basically, always be converting :)

12. Phew ...
But, we’re still not ready to test yet.
#WCMTL 2015

13. #WCMTL 2015

14. Are you ready for what’s next?
#WCMTL 2015

15. Are you ready for what’s next?
That’s a CTA :)
#WCMTL 2015

16. Let’s begin with CTA design
#WCMTL 2015

17. A good CTA design should
#WCMTL 2015

18. A good CTA design should
#WCMTL 2015
... be short and sweet

19. A good CTA design should
#WCMTL 2015
... be short and sweet
... describe what will happen when clicked

20. Examples
#WCMTL 2015
CTA

21. Examples
#WCMTL 2015
CTA CTA
Supporting Statement

22. Examples
#WCMTL 2015
CTA CTA
Supporting Statement
CTA
Supporting Statement

23. Examples
#WCMTL 2015
CTA CTA
Supporting Statement
CTA
Supporting Statement
In action (a workshop)
Save my spot
There are a limited number of seats

24. #WCMTL 2015

25. Now let’s talk CTA placement
#WCMTL 2015
THE FOLD

26. A CTA can be
#WCMTL 2015

27. A CTA can be
#WCMTL 2015
... above the fold a.k.a. the five point punch

28. A CTA can be
#WCMTL 2015
... above the fold a.k.a. the five point punch
... below the fold a.k.a. page narrative

29. The Five Point Punch
#WCMTL 2015

30. The Five Point Punch
#WCMTL 2015
A descriptive headline1

31. The Five Point Punch
#WCMTL 2015
A descriptive headline1
A supporting sub-headline2

32. The Five Point Punch
#WCMTL 2015
A descriptive headline1
A supporting sub-headline2
A brief statement that describes
the benefits of the product or service
• Supportive bullet point
• Another point
• Another point
3

33. The Five Point Punch
#WCMTL 2015
A descriptive headline1
A supporting sub-headline2
A brief statement that describes
the benefits of the product or service
• Supportive bullet point
• Another point
• Another point
3
Supporting Statement4

34. The Five Point Punch
#WCMTL 2015
THE FOLD
A descriptive headline1
A supporting sub-headline2
A brief statement that describes
the benefits of the product or service
• Supportive bullet point
• Another point
• Another point
3 CTA
5
Supporting Statement4

35. The Five Point Punch in action ...
#WCMTL 2015
1
2
3
5
4

36. But, this doesn’t always work.
#WCMTL 2015
Sometimes your audience needs more.

37. But, this doesn’t always work.
#WCMTL 2015
Sometimes your audience needs more.
With a narrative that goes below the fold we can tell a
compelling story to help achieve our goal.

38. Long form
page narrative
#WCMTL 2015
In this example we
tell the brand story
in 5 panels.
*TIP: With page narrative
consider adding more
than one CTA throughout
the page pushing the user
to the main action.

39. Long form
page narrative
#WCMTL 2015
In this example we
tell the brand story
in 5 panels.
Hero1
*TIP: With page narrative
consider adding more
than one CTA throughout
the page pushing the user
to the main action.

40. Long form
page narrative
#WCMTL 2015
In this example we
tell the brand story
in 5 panels.
Hero1
Benefits2
*TIP: With page narrative
consider adding more
than one CTA throughout
the page pushing the user
to the main action.

41. Long form
page narrative
#WCMTL 2015
In this example we
tell the brand story
in 5 panels.
Hero1
Benefits2
Lower CTA3
*TIP: With page narrative
consider adding more
than one CTA throughout
the page pushing the user
to the main action.

42. Long form
page narrative
#WCMTL 2015
In this example we
tell the brand story
in 5 panels.
Hero1
Benefits2
Lower CTA3
Trust Building4
*TIP: With page narrative
consider adding more
than one CTA throughout
the page pushing the user
to the main action.

43. Long form
page narrative
#WCMTL 2015
In this example we
tell the brand story
in 5 panels.
Hero1
Benefits2
Lower CTA3
Trust Building4
Final CTA (form)5
*TIP: With page narrative
consider adding more
than one CTA throughout
the page pushing the user
to the main action.

44. Hold your horses ...
we’re still not quite ready to test yet.
#WCMTL 2015

45. It’s time to form
some testable
hypotheses
#WCMTL 2015

46. We can test
#WCMTL 2015

47. We can test
#WCMTL 2015
... headline copy

48. We can test
#WCMTL 2015
... headline copy
... CTA design and button copy

49. We can test
#WCMTL 2015
... headline copy
... CTA design and button copy
... form length and design

50. We can test
#WCMTL 2015
... headline copy
... CTA design and button copy
... form length and design
... page length

51. We can test
#WCMTL 2015
... headline copy
... CTA design and button copy
... form length and design
... page length
... etc

52. How do we decide what to test?
#WCMTL 2015

53. How do we decide what to test?
We base it on insight gathered
from user feedback: surveys, live
chat tools, heatmaps, etc.
#WCMTL 2015

54. Now we can formulate
our hypotheses.
#WCMTL 2015

55. Now we can formulate
our hypotheses.
#WCMTL 2015

56. To perform an A/B test we need
#WCMTL 2015

57. To perform an A/B test we need
#WCMTL 2015
... at least 100+ unique visitors (for
an MVT we need at least 10x this)

58. To perform an A/B test we need
#WCMTL 2015
... at least 100+ unique visitors (for
an MVT we need at least 10x this)
... to run the test for at least a week to
gather sufficient data

59. Example
#WCMTL 2015
The hypothesis
By adding supportive bullet point
below the headline, we’d see a lift in
the number of click-throughs.
The outcome
The B variant (the treatment page)
produced a conversion lift of 28 per cent
over the control page.

60. Example
#WCMTL 2015
The hypothesis
By adding supportive bullet point
below the headline, we’d see a lift in
the number of click-throughs.
The outcome
The B variant (the treatment page)
produced a conversion lift of 28 per cent
over the control page.

61. Example
#WCMTL 2015
Headline test
In this example we’re testing 2 headlines against each other. The hypothesis for
testing the secondary headline is that by creating an emotional and personal
statement potential customers will be more apt to join.

62. Example
#WCMTL 2015
Headline test
In this example we’re testing 2 headlines against each other. The hypothesis for
testing the secondary headline is that by creating an emotional and personal
statement potential customers will be more apt to join.

63. Example
#WCMTL 2015
Now we track the results ...
Test Variant Headline Copy
Conversion
Rate
Conversion
Lift
Control
An online personalized shopping
experience, delivered straight to your door.
4.82% ---
Variant 1
Your wardrobe hand picked by your
personal stylist, delivered to your door.
11.12% +130%
Potential Variant 2 Men’s clothing and accessories curated. --- ---

64. Example
#WCMTL 2015
Now we track the results ...
Test Variant Headline Copy
Conversion
Rate
Conversion
Lift
Control
An online personalized shopping
experience, delivered straight to your door.
4.82% ---
Variant 1
Your wardrobe hand picked by your
personal stylist, delivered to your door.
11.12% +130%
Potential Variant 2 Men’s clothing and accessories curated. --- ---

65. Example
#WCMTL 2015
We can run a CTA test ...
Test Variant CTA Copy Conversion Rate Conversion Lift
Control BUY AURAGIN NOW --- ---
Variant 1 BUY AURAGIN --- ---
Variant 2 GET AURAGIN --- ---

66. Example
#WCMTL 2015
We can run a CTA test ...
Test Variant CTA Copy Conversion Rate Conversion Lift
Control BUY AURAGIN NOW --- ---
Variant 1 BUY AURAGIN --- ---
Variant 2 GET AURAGIN --- ---

67. Example
#WCMTL 2015
Test your forms ...
Form in hero
Click to scroll to
form in panel
Form in modal
5.84% 3.74% 4.29%

68. Example
#WCMTL 2015
Test your forms ...
Form in hero
Click to scroll to
form in panel
Form in modal
5.84% 3.74% 4.29%

69. We can also test
#WCMTL 2015

70. We can also test
#WCMTL 2015
... incentives and exclusives

71. We can also test
#WCMTL 2015
... incentives and exclusives
... upsells, downsells, cross sells

72. We can also test
#WCMTL 2015
... incentives and exclusives
... upsells, downsells, cross sells
... free trial vs. freemium

73. We can also test
#WCMTL 2015
... incentives and exclusives
... upsells, downsells, cross sells
... free trial vs. freemium... behind the scenes look

74. We can also test
#WCMTL 2015
... incentives and exclusives
... upsells, downsells, cross sells
... free trial vs. freemium... behind the scenes look
... competitor comparison

75. We can also test
#WCMTL 2015
... incentives and exclusives
... upsells, downsells, cross sells
... free trial vs. freemium... behind the scenes look
... competitor comparison
... testimonials, social proof, trusted by

76. We can also test
#WCMTL 2015
... incentives and exclusives
... upsells, downsells, cross sells
... free trial vs. freemium... behind the scenes look
... competitor comparison
... testimonials, social proof, trusted by
... coupons

77. We can also test
#WCMTL 2015
... incentives and exclusives
... upsells, downsells, cross sells
... free trial vs. freemium... behind the scenes look
... competitor comparison
... testimonials, social proof, trusted by
... coupons
... ratings

78. We can also test
#WCMTL 2015
... incentives and exclusives
... upsells, downsells, cross sells
... free trial vs. freemium... behind the scenes look
... competitor comparison
... testimonials, social proof, trusted by
... coupons
... ratings
... first vs. second person copy

79. We can also test
#WCMTL 2015
... incentives and exclusives
... upsells, downsells, cross sells
... free trial vs. freemium... behind the scenes look
... competitor comparison
... testimonials, social proof, trusted by
... coupons
... ratings
... first vs. second person copy ... urgency

80. #WCMTL 2015
OK ...
But, what does this have to
do with WordPress?

81. #WCMTL 2015
CCD, CRO and LPO
principles can be applied to any
entry page online:
... landing pages
... email
... product pages
... app pages
... pricing pages
... contact pages
... etc.

82. #WCMTL 2015
Here are a few WordPress plugins
to help you get the job done
• Optimizely
• Visual Web Optimizer
• Convert Experiments by Yoast
• Nellio A/B Testing
• Ultimate Landing Page
• wBounce

83. #WCMTL 2015
Optimizely - A/B Test Headlines

84. #WCMTL 2015
Optimizely - A/B Test Headlines

85. #WCMTL 2015
Optimizely - Page Variants

86. #WCMTL 2015
Optimizely - Page Variants

87. #WCMTL 2015
Convert Experiments by Yoast

88. #WCMTL 2015
Convert Experiments by Yoast

89. #WCMTL 2015
Nelio A/B Testing - Many tools ...

90. #WCMTL 2015
Nelio A/B Testing - Many tools ...

91. Nelio Heatmaps
#WCMTL 2015
Example from a KissMetrics study (https://blog.kissmetrics.com/eye-tracking-studies/)

92. Nelio Heatmaps
#WCMTL 2015
Example from a KissMetrics study (https://blog.kissmetrics.com/eye-tracking-studies/)

93. Ultimate Landing Page
#WCMTL 2015

94. Ultimate Landing Page
#WCMTL 2015

95. wBounce
#WCMTL 2015

96. wBounce
#WCMTL 2015

97. #WCMTL 2015
Of course there are other
landing page options ...
• Unbounce
• Leadpages
• Lander
• Instapage
• Hubspot
• Marketo
• PageWiz

98. #WCMTL 2015
and some great 3rd party tools ...
• Crazyegg
• Kissmetrics
• Rooster
• Wistia
• Receiptful

99. Now, be patient and
keep optimizing.
#WCMTL 2015

100. Thank You!
#WCMTL 2015
DayChamp.cc
@day_champ
@digibomb
BrendanSeraShriar.com