Page Templates that Work
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Page Templates that Work

  • 3,954 views
Uploaded on

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

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

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,954
On Slideshare
3,921
From Embeds
33
Number of Embeds
4

Actions

Shares
Downloads
225
Comments
0
Likes
9

Embeds 33

http://learni.st 18
https://twitter.com 10
http://www.scoop.it 4
http://waffleme.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Page Templates that Work: New research reveals 3 high-performing webpage templates that consistently improve conversion #webclinic
  • 2. #webclinic JOIN THE CONVERSATION ON TWITTER #webclinic
  • 3. #webclinic TODAY’S TEAM @jonpowell31 Jon Powell Senior Manager Research and Strategy MECLABS Paul Cheney Editorial Analyst MECLABS @prcheney
  • 4. #webclinic An Experiment
  • 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. #webclinic EXPERIMENT: VERSION A
  • 7. #webclinic EXPERIMENT: VERSION A
  • 8. #webclinic EXPERIMENT: VERSION B
  • 9. #webclinic EXPERIMENT: VERSION B
  • 10. #webclinic EXPERIMENT: SIDE BY SIDE Version A Version B
  • 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. #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. #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. #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. #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. #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. #webclinic Template #1 Main Offer Page
  • 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. #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. #webclinic EXPERIMENT: BEFORE, AFTER 44%Increase in lead rate To ThisFrom This Protocol ID: TP1530
  • 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. #webclinic EXPERIMENT: BEFORE, AFTER To This From This 87.4%Increase in conversions Protocol ID: TP1568
  • 23. #webclinic EXPERIMENT: BEFORE, AFTER To This From This 324%Increase in click-through Protocol ID: TP1635
  • 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. #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. #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. #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. #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. #webclinic Template #2 Transaction Page
  • 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. #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. #webclinic EXPERIMENT: BEFORE, AFTER Footer Header Header To ThisFrom This Footer 7.3%Increase in completions Protocol ID: TP1498
  • 33. #webclinic EXPERIMENT: BEFORE, AFTER To This Protocol ID: TP1268 From This 12%Increase in completions
  • 34. #webclinic EXPERIMENT: BEFORE, AFTER From This To This 97%Increase in completions Protocol ID: TP1214
  • 35. #webclinic EXPERIMENT: BEFORE, AFTER From this… To this… 109%Increase in Conversions Protocol ID: TP1636
  • 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. #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. #webclinic Template #3 Directory Page
  • 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. #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. #webclinic EXPERIMENT: BEFORE, AFTER 19%Increase in click-through Header Header Navigation Navigation Navigation Flash Banner From This To This Protocol ID: TP1499
  • 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. #webclinic EXPERIMENT: BEFORE, AFTER HEADER Footer HEADER Footer Navigation Navigation From This To This 63%Increase in conversions Protocol ID: TP1460
  • 44. #webclinic EXPERIMENT: BEFORE, AFTER From This To This 331%Increase in conversions Protocol ID: TP1560
  • 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. #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. #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. #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. #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. #webclinic Live Optimization
  • 51. #webclinic LIVE OPTIMIZATION 3M Primary objective(s): Increase CTR Primary audience: Consumers interested in product research URL: http://bit.ly/14VZSED
  • 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. #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