Page Templates that Work:
New research reveals 3 high-performing webpage templates
that consistently improve conversion
#w...
#webclinic
JOIN THE CONVERSATION ON TWITTER
#webclinic
#webclinic
TODAY’S TEAM
@jonpowell31
Jon Powell
Senior Manager
Research and Strategy
MECLABS
Paul Cheney
Editorial Analyst...
#webclinic
An Experiment
#webclinic
EXPERIMENT: BACKGROUND
Background: An online printing company that specializes in delivering printed
marketing ...
#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% Incr...
#webclinic
EXPERIMENT: RESULTS
9.4%IN CONVERSIONS
87.4%IN CONVERSIONS
5,368%IN CONVERSIONS
19%IN CLICKTHROUGH
34.6%IN CLIC...
#webclinic
Key Principles
1. Philosophically, the marketer should be able to distinguish between two
essential parts of a...
#webclinic
14
Ad Group A
Brand Terms
Ad Group B
New Movers Lists
Ad Group C
Bankruptcy Lists
Ad Group D
New Homeowners Lis...
#webclinic
Key Principles
3. For page templates specifically, there are no absolute rules when it comes to
“best practice...
#webclinic
Today, we are going to walk through the field-tested
templates for 3 of the most common webpages on a website
T...
#webclinic
Template #1
Main Offer Page
#webclinic
Main Offer Page: A page containing specific product, service, offer
information designed to help a customer com...
#webclinic
AS IT RELATES TO THE MIND…
Offer Page Trans. Page #1 Thank-you PageChannel Directory Page Trans. Page #2
High
L...
#webclinic
EXPERIMENT: BEFORE, AFTER
44%Increase in lead rate
To ThisFrom This
Protocol ID: TP1530
#webclinic
EXPERIMENT: BEFORE, AFTER
HEADER
Navigation
Logo
Footer
HEADER
Navigation
Logo
Footer
From This To This
83.7%In...
#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 t...
#webclinic
MAIN OFFER PAGE TEMPLATE
• Easy-to-scan body copy to
propel the force of the value
proposition for the primary
...
#webclinic
26
MAIN OFFER PAGE VARIATIONS
Variation #1: Long Copy
• What makes it different:
• Substitutes a focus on
image...
#webclinic
27
MAIN OFFER PAGE VARIATIONS
Variation #3: Integrated CTA (top)
• What makes it different:
• Instead of checki...
#webclinic
28
MAIN OFFER PAGE VARIATIONS
Variation #3: Integrated CTA (top)
• When it applies:
• When a single offer page
...
#webclinic
Template #2
Transaction Page
#webclinic
Transaction Page: A page, or series of pages dedicated to collecting
information from a customer required to co...
#webclinic
AS IT RELATES TO THE MIND…
Offer Page Trans. Page #1 Thank-you PageChannel Directory Page Trans. Page #2
High
L...
#webclinic
EXPERIMENT: BEFORE, AFTER
Footer
Header Header
To ThisFrom This
Footer
7.3%Increase in completions
Protocol ID:...
#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
• ...
#webclinic
TRANSACTION PAGE TEMPLATE
• Testimonials and credibility
indicators are placed along the
side of the page to an...
#webclinic
Template #3
Directory Page
#webclinic
Directory Page: A page serving multiple objectives not necessarily connected
to each other. The goal of these p...
#webclinic
AS IT RELATES TO THE MIND…
Offer Page Trans. Page #1 Thank-you PageChannel Directory Page Trans. Page #2
High
L...
#webclinic
EXPERIMENT: BEFORE, AFTER
19%Increase in click-through
Header Header
Navigation Navigation Navigation
Flash Ban...
#webclinic
EXPERIMENT: BEFORE, AFTER
Footer
Logo Header
Navigation
From This
Protocol ID: TP1746
Logo
Footer
Header
Naviga...
#webclinic
EXPERIMENT: BEFORE, AFTER
HEADER
Footer
HEADER
Footer
Navigation Navigation
From This To This
63%Increase in co...
#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 ...
#webclinic
DIRECTORY PAGE TEMPLATE
• Point-first header explaining
what can be done relative the
most immediate next step
...
#webclinic
47
DIRECTORY PAGE VARIATIONS
Variation #1: Two-Prospects
• What makes it different:
• Substitutes three section...
#webclinic
48
DIRECTORY PAGE VARIATIONS
Variation #2: Short Copy
• What makes it different:
• Significantly reduces
introd...
#webclinic
AT THE END OF THE DAY..
Radical Redesigns: The objective is
to challenge the control enough to
generate a signi...
#webclinic
Live Optimization
#webclinic
LIVE OPTIMIZATION
3M
Primary objective(s):
Increase CTR
Primary audience:
Consumers interested in
product resea...
#webclinic
LIVE OPTIMIZATION
Audimute
Primary objective(s):
Increase sales of
soundproofing parts
Primary audience:
Compan...
#webclinic
MarketingExperiments.com/subscribe
MarketingExperiments Optimization Newsletter
Free subscription to more than ...
Page Templates that Work
Upcoming SlideShare
Loading in...5
×

Page Templates that Work

3,790

Published on

To learn more about our Web clinics, please visit us at: www.marketingexperiments.com

Published in: Business, Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,790
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
234
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Page Templates that Work

  1. 1. Page Templates that Work: New research reveals 3 high-performing webpage templates that consistently improve conversion #webclinic
  2. 2. #webclinic JOIN THE CONVERSATION ON TWITTER #webclinic
  3. 3. #webclinic TODAY’S TEAM @jonpowell31 Jon Powell Senior Manager Research and Strategy MECLABS Paul Cheney Editorial Analyst MECLABS @prcheney
  4. 4. #webclinic An Experiment
  5. 5. #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:
  6. 6. #webclinic EXPERIMENT: VERSION A
  7. 7. #webclinic EXPERIMENT: VERSION A
  8. 8. #webclinic EXPERIMENT: VERSION B
  9. 9. #webclinic EXPERIMENT: VERSION B
  10. 10. #webclinic EXPERIMENT: SIDE BY SIDE Version A Version B
  11. 11. #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.
  12. 12. #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
  13. 13. #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
  14. 14. #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%
  15. 15. #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
  16. 16. #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
  17. 17. #webclinic Template #1 Main Offer Page
  18. 18. #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
  19. 19. #webclinic AS IT RELATES TO THE MIND… Offer Page Trans. Page #1 Thank-you PageChannel Directory Page Trans. Page #2 High Low CognitiveMomentum 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
  20. 20. #webclinic EXPERIMENT: BEFORE, AFTER 44%Increase in lead rate To ThisFrom This Protocol ID: TP1530
  21. 21. #webclinic EXPERIMENT: BEFORE, AFTER HEADER Navigation Logo Footer HEADER Navigation Logo Footer From This To This 83.7%Increase in conversions Protocol ID: TP1457
  22. 22. #webclinic EXPERIMENT: BEFORE, AFTER To This From This 87.4%Increase in conversions Protocol ID: TP1568
  23. 23. #webclinic EXPERIMENT: BEFORE, AFTER To This From This 324%Increase in click-through Protocol ID: TP1635
  24. 24. #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
  25. 25. #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
  26. 26. #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
  27. 27. #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)
  28. 28. #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
  29. 29. #webclinic Template #2 Transaction Page
  30. 30. #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
  31. 31. #webclinic AS IT RELATES TO THE MIND… Offer Page Trans. Page #1 Thank-you PageChannel Directory Page Trans. Page #2 High Low CognitiveMomentum 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
  32. 32. #webclinic EXPERIMENT: BEFORE, AFTER Footer Header Header To ThisFrom This Footer 7.3%Increase in completions Protocol ID: TP1498
  33. 33. #webclinic EXPERIMENT: BEFORE, AFTER To This Protocol ID: TP1268 From This 12%Increase in completions
  34. 34. #webclinic EXPERIMENT: BEFORE, AFTER From This To This 97%Increase in completions Protocol ID: TP1214
  35. 35. #webclinic EXPERIMENT: BEFORE, AFTER From this… To this… 109%Increase in Conversions Protocol ID: TP1636
  36. 36. #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?
  37. 37. #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?
  38. 38. #webclinic Template #3 Directory Page
  39. 39. #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
  40. 40. #webclinic AS IT RELATES TO THE MIND… Offer Page Trans. Page #1 Thank-you PageChannel Directory Page Trans. Page #2 High Low CognitiveMomentum 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
  41. 41. #webclinic EXPERIMENT: BEFORE, AFTER 19%Increase in click-through Header Header Navigation Navigation Navigation Flash Banner From This To This Protocol ID: TP1499
  42. 42. #webclinic EXPERIMENT: BEFORE, AFTER Footer Logo Header Navigation From This Protocol ID: TP1746 Logo Footer Header Navigation To This 25%Increase in click-through
  43. 43. #webclinic EXPERIMENT: BEFORE, AFTER HEADER Footer HEADER Footer Navigation Navigation From This To This 63%Increase in conversions Protocol ID: TP1460
  44. 44. #webclinic EXPERIMENT: BEFORE, AFTER From This To This 331%Increase in conversions Protocol ID: TP1560
  45. 45. #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
  46. 46. #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
  47. 47. #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
  48. 48. #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
  49. 49. #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
  50. 50. #webclinic Live Optimization
  51. 51. #webclinic LIVE OPTIMIZATION 3M Primary objective(s): Increase CTR Primary audience: Consumers interested in product research URL: http://bit.ly/14VZSED
  52. 52. #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
  53. 53. #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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×