page templates that work
DESCRIPTION
To learn more about our Web clinics, please visit us at: www.marketingexperiments.comTRANSCRIPT
Page Templates that Work: New research reveals 3 high-performing webpage templates that consistently improve conversion
#webclinic
#webclinic
JOIN THE CONVERSATION ON TWITTER
#webclinic
#webclinic
TODAY’S TEAM
@jonpowell31
Jon Powell Senior Manager Research and Strategy MECLABS
Paul Cheney Editorial Analyst MECLABS
@prcheney
#webclinic
An Experiment
#webclinic
EXPERIMENT: BACKGROUND
Background: An online printing company that specializes in delivering printed marketing materials with minimal turnaround. Goal: To increase the number of purchases online. Research Question: Which product page will result in the largest purchase rate? Test Design: A/B Variable Cluster test
Experiment ID: TP1568 Record Location: MECLABS Research Library Research Partner: [Protected]
Research Notes:
#webclinic
EXPERIMENT: VERSION A
#webclinic
EXPERIMENT: VERSION A
#webclinic
EXPERIMENT: VERSION B
#webclinic
EXPERIMENT: VERSION B
#webclinic
EXPERIMENT: SIDE BY SIDE Version A
Version B
#webclinic
EXPERIMENT: RESULTS
Design Conversion Rate
Version A 4.03%
Version B 7.55%
Relative Difference 87.4%
87.4% Increase in Conversions The treatment page increased the rate of conversion by 87.4%
What you need to understand: By re-sequencing product and process information, the new product page template achieved an 87.4% increase in conversions.
#webclinic
EXPERIMENT: RESULTS
9.4% IN CONVERSIONS 87.4%
IN CONVERSIONS
5,368% IN CONVERSIONS
19% IN CLICKTHROUGH
34.6% IN CLICKTHROUGH
Because the changes did not alter CMS content, they were further tested across additional SKUs
#webclinic
Key Principles
1. Philosophically, the marketer should be able to distinguish between two essential parts of any marketing creative:
1. The Form: The elements of marketing collateral that transcend the specific instance of the marketing message. (e.g., page templates, copy-length, forms fields, etc.).
2. The Substance: The elements of marketing collateral that are instance-specific. Generally, they are tied closely to the specific expression of the offer’s value proposition.
2. When done properly, testing the “form” elements of a web page creates a significant opportunity for compounding results.
WEBSITE TEMPLATES
#webclinic
14
Ad Group A Brand Terms
Ad Group B New Movers Lists
Ad Group C Bankruptcy Lists
Ad Group D New Homeowners Lists
Ad Group E New Business Lists
257% 28% 603% 302% 451%
COMPOUNDING RESULTS
201%
#webclinic
Key Principles
3. For page templates specifically, there are no absolute rules when it comes to “best practices”; however a meta-analysis of our experimentation reveals common patterns across industry for successful page templates.
WEBSITE TEMPLATES
#webclinic
Today, we are going to walk through the field-tested templates for 3 of the most common webpages on a website
TODAY’S FOCUS
Channel Main Offer Page
Checkout Page
Directory Page
Standard Conversion Path
#webclinic
Template #1 Main Offer Page
#webclinic
Main Offer Page: A page containing specific product, service, offer information designed to help a customer come to a primary decision
MAIN OFFER PAGE
Channel Main Offer Page
Checkout Page
Directory Page
Standard Conversion Path
#webclinic
AS IT RELATES TO THE MIND…
Offer Page Trans. Page #1 Thank-you Page Channel Directory Page Trans. Page #2
High
Low Cogn
itive
Mom
entu
m
Goal: To obtain a conversion
commitment
Goal: To engage visitor and lead them to the most relevant value
Goal: To maintain the cognitive momentum generated by the offer page
We are here
#webclinic
EXPERIMENT: BEFORE, AFTER
44% Increase in lead rate
To This From This Protocol ID: TP1530
#webclinic
EXPERIMENT: BEFORE, AFTER
HEADER Navigation
Logo
Footer
HEADER Navigation
Logo
Footer
From This To This
83.7% Increase in conversions
Protocol ID: TP1457
#webclinic
EXPERIMENT: BEFORE, AFTER To This From This
87.4% Increase in conversions
Protocol ID: TP1568
#webclinic
EXPERIMENT: BEFORE, AFTER To This
From This
324% Increase in click-through
Protocol ID: TP1635
#webclinic
MAIN OFFER PAGE TEMPLATE
• Clearly visible headline and sub-headline that communicate the value of continuing to the next step
• An instantly recognizable
image that supports the value on the page.
• A primary information column to create linear flow through the page and minimize confusion
#webclinic
MAIN OFFER PAGE TEMPLATE
• Easy-to-scan body copy to propel the force of the value proposition for the primary offer
• One emphasized call-to-action that appears clickable and communicates exactly what the customer will get by clicking.
• Supporting content (i.e.
copy, images, testimonials, reviews) to re-assure hesitant visitors or educate detail-oriented visitors
#webclinic
26
MAIN OFFER PAGE VARIATIONS
Variation #1: Long Copy
• What makes it different: • Substitutes a focus on
imagery to additional copy/ other forms of primary content
• When it applies: • When the substitute content
is more likely to increase a page’s value force potential
#webclinic
27
MAIN OFFER PAGE VARIATIONS
Variation #3: Integrated CTA (top)
• What makes it different: • Instead of checking the
customer out entirely on a new page, it integrates the first step in the primary eye-path
• It provides a balance of primary value force content instead of a full presentation (long-copy or copy and image)
#webclinic
28
MAIN OFFER PAGE VARIATIONS
Variation #3: Integrated CTA (top)
• When it applies: • When a single offer page
must serve multiple visitor segments with varying familiarity with the primary offer
• When a page’s value force is strong enough to allow a significant reduction in process friction
#webclinic
Template #2 Transaction Page
#webclinic
Transaction Page: A page, or series of pages dedicated to collecting information from a customer required to complete a value exchange (i.e. purchase, consultation)
TRANSACTION PAGE
Channel Main Offer Page
Transaction Page
Directory Page
Standard Conversion Path
#webclinic
AS IT RELATES TO THE MIND…
Offer Page Trans. Page #1 Thank-you Page Channel Directory Page Trans. Page #2
High
Low Cogn
itive
Mom
entu
m
Goal: To obtain a conversion
commitment
Goal: To engage visitor and lead them to the most relevant value
Goal: To maintain the cognitive momentum generated by the offer page
We are here
#webclinic
EXPERIMENT: BEFORE, AFTER
Footer
Header Header To This From This
Footer
7.3% Increase in completions
Protocol ID: TP1498
#webclinic
EXPERIMENT: BEFORE, AFTER
To This
Protocol ID: TP1268
From This
12% Increase in completions
#webclinic
EXPERIMENT: BEFORE, AFTER
From This To This
97% Increase in completions
Protocol ID: TP1214
#webclinic
EXPERIMENT: BEFORE, AFTER
From this… To this…
109% Increase in Conversions
Protocol ID: TP1636
#webclinic
TRANSACTION PAGE TEMPLATE
• Clearly visible headline and copy to reiterate the value of filling out the form
• Minimum required form fields to complete the transaction and ensure expected value
• Form field groups and headers to further reduce friction
• Additional copy, pop-over links to justify each form field relative to the immediate value exchange
What’s this?
#webclinic
TRANSACTION PAGE TEMPLATE
• Testimonials and credibility indicators are placed along the side of the page to answer questions concerning process or value
• Single, clear call-to-action that
states what the customer will get when they click
• Additional credibility indicators placed in close proximity to the call-to-action
What’s this?
#webclinic
Template #3 Directory Page
#webclinic
Directory Page: A page serving multiple objectives not necessarily connected to each other. The goal of these pages is to direct them to the most relevant offer (homepages, category pages, etc.).
OVERVIEW PAGE
Channel Main Offer Page
Checkout Page
Directory Page
Standard Conversion Path
#webclinic
AS IT RELATES TO THE MIND…
Offer Page Trans. Page #1 Thank-you Page Channel Directory Page Trans. Page #2
High
Low Cogn
itive
Mom
entu
m
Goal: To obtain a conversion
commitment
Goal: To engage visitor and lead them to the most relevant value
Goal: To maintain the cognitive momentum generated by the offer page
We are here
#webclinic
EXPERIMENT: BEFORE, AFTER
19% Increase in click-through
Header Header Navigation Navigation Navigation
Flash Banner
From This To This
Protocol ID: TP1499
#webclinic
EXPERIMENT: BEFORE, AFTER
Footer
Logo Header Navigation
From This Protocol ID: TP1746
Logo
Footer
Header Navigation
To This
25% Increase in click-through
#webclinic
EXPERIMENT: BEFORE, AFTER
HEADER
Footer
HEADER
Footer
Navigation Navigation
From This To This
63% Increase in conversions
Protocol ID: TP1460
#webclinic
EXPERIMENT: BEFORE, AFTER From This To This
331% Increase in conversions
Protocol ID: TP1560
#webclinic
DIRECTORY PAGE TEMPLATE
• Clearly visible headline and sub-headline that communicates the value proposition of continuing deeper into the site
• An instantly recognizable
image that supports the primary expressed value
• Easy-to-scan body copy to propel the force of the primary expressed value
#webclinic
DIRECTORY PAGE TEMPLATE
• Point-first header explaining what can be done relative the most immediate next step
• Content sections tailored to
attract the attention, interest, action of a sole prospect group
(though content appears equally weighted on the page, it is not so in the mind of multiple prospect groups)
• Supporting content to speak to secondary visitor types
#webclinic
47
DIRECTORY PAGE VARIATIONS
Variation #1: Two-Prospects
• What makes it different: • Substitutes three sections of
prospect focused content with only two
• When it applies: • When there are two primary
prospect groups arriving to the page instead of three
#webclinic
48
DIRECTORY PAGE VARIATIONS
Variation #2: Short Copy
• What makes it different: • Significantly reduces
introductory content to a minimum
• When it applies: • When visitors already arrive
with knowledge of the primary value proposition
• When, in testing, a company discovers that a minimal introductory value force content is optimal for conversion
#webclinic
AT THE END OF THE DAY..
Radical Redesigns: The objective is to challenge the control enough to generate a significant difference
Focused variable clusters: The objective is to test the highest performing variables and increase channel specificity
Single variable testing: The objective is to determine relative impact by isolating variables
Testing Cycle
Key Principles Template testing
#webclinic
Live Optimization
#webclinic
LIVE OPTIMIZATION 3M
Primary objective(s): Increase CTR Primary audience: Consumers interested in product research URL: http://bit.ly/14VZSED
#webclinic
LIVE OPTIMIZATION
Audimute
Primary objective(s): Increase sales of soundproofing parts Primary audience: Companies and individuals looking for soundproofing materials URL: http://bit.ly/148bUJZ
#webclinic
MarketingExperiments.com/subscribe
MarketingExperiments Optimization Newsletter Free subscription to more than $20 million in marketing research
Join 89,000 of the top marketers from around the world as we work together to discover what really works.
#webclinic