HOW TO CREATE A WINNING PRODUCT PAGE<br />
Research Results…<br />Images<br />
IMAGES…RESEARCH RESULTS<br />Retailers should have at least 3-4 different high quality images (at least)<br /><ul><li>Show...
Add a zoom functionality so visitors can get a closer look
Consider location of the image. Common online practise is to place an image on the right hand side of the page, however co...
Test image pages - images showing car against white background vs images with a backdrop.</li></li></ul><li>Research Resul...
CTA’s…RESEARCH RESULTS<br />A Product page should have a single call to Action Button with a small number of distinct seco...
Test the size of the CTA Button. Bigger is better, a CTA button should be bigger than other buttons on the page.
Consider the use of white space to make the CTA easily visible. The more space around the CTA the more attention is drawn ...
Test different designs/colour of the CTA button, it should always be contrasting to other buttons on the page.</li></ul>	(...
Offer a little extra- sweeten the deal by offering incentives to ‘Enquire Now’.
Reduce the number of mandatory fields and collecting unnecessary information.</li></li></ul><li>Research Results…<br />Con...
CONTENTS/DESCRIPTION BOXRESEARCH RESULTS<br /><ul><li>The content/description box is usually located in the middle section...
Should include as much detail as possible about the product, this prevents users from leaving the website in order to find...
Use bullet points to emphasise offer and best attributes/features/benefits.
Should avoid using lengthy paragraphs of text above the fold.</li></li></ul><li>CONTENTS/DESCRIPTION BOXRESEARCH RESULTS<b...
Temperature Control
Grease Tray
Perfect for Easy Entertaining
300 square inches of cooking space
Attached Working Area
Easy to Clean
Features and benefits complement the CTA, use graphics that support not compete with the CTA.
Reduce the number of choice and distractions. Too much choice can mean customer maybe less likely to complete a CTA</li></...
REVIEWS & TESTIMONIALS…RESEARCH RESULTS<br /><ul><li>Studies have shown product reviews are responsible for up to 30% incr...
Upcoming SlideShare
Loading in...5
×

How to create a winning Product Page

318
-1

Published on

Tips on how to create a winning product page

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
318
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to create a winning Product Page

  1. 1. HOW TO CREATE A WINNING PRODUCT PAGE<br />
  2. 2. Research Results…<br />Images<br />
  3. 3. IMAGES…RESEARCH RESULTS<br />Retailers should have at least 3-4 different high quality images (at least)<br /><ul><li>Show different angles and the product being used.
  4. 4. Add a zoom functionality so visitors can get a closer look
  5. 5. Consider location of the image. Common online practise is to place an image on the right hand side of the page, however competitors such as Autoquake, Autotrader etc tend to use image on the left hand side of page as well as many popular high street retailers (See reference documents). Apple locate their image on the right hand side and Nike locate their image centrally taking up the top 3rd of the page with the price, detail and CTA above the Image.
  6. 6. Test image pages - images showing car against white background vs images with a backdrop.</li></li></ul><li>Research Results…<br />CTA’s<br />
  7. 7. CTA’s…RESEARCH RESULTS<br />A Product page should have a single call to Action Button with a small number of distinct secondary actions. Studies in supermarkets have shown that if a shopper is presented with too many varieties they are less likely to make a purchase, the same applies to CTA’s. Make the process simple for the shopper. <br /><ul><li>Always place the CTA above the fold.
  8. 8. Test the size of the CTA Button. Bigger is better, a CTA button should be bigger than other buttons on the page.
  9. 9. Consider the use of white space to make the CTA easily visible. The more space around the CTA the more attention is drawn to it.
  10. 10. Test different designs/colour of the CTA button, it should always be contrasting to other buttons on the page.</li></ul> (Fact of the Day: AC.coms CTA’s are currently Red/Green, less effective with people who are colour blind. Red/green colour blindness is the most common type, 10% of the UK population have this this, and only 0.4% of that 10% are female!) <br /><ul><li>Test different language/verbs. Any alternatives to Enquire now?
  11. 11. Offer a little extra- sweeten the deal by offering incentives to ‘Enquire Now’.
  12. 12. Reduce the number of mandatory fields and collecting unnecessary information.</li></li></ul><li>Research Results…<br />Content/Description Box<br />
  13. 13. CONTENTS/DESCRIPTION BOXRESEARCH RESULTS<br /><ul><li>The content/description box is usually located in the middle section and gives the opportunity to provide a more in depth detail of the product having already presented a brief overview and allowed the user to see the product more closely.
  14. 14. Should include as much detail as possible about the product, this prevents users from leaving the website in order to find out more information, increasing conversion opportunity.
  15. 15. Use bullet points to emphasise offer and best attributes/features/benefits.
  16. 16. Should avoid using lengthy paragraphs of text above the fold.</li></li></ul><li>CONTENTS/DESCRIPTION BOXRESEARCH RESULTS<br /><ul><li>Should list the benefits of the product before the features. People buy benefits not features.</li></ul> For example If selling a bbq customers want a bbq that offers:<br /><ul><li>Tasty, Healthy Food Every Time
  17. 17. Temperature Control
  18. 18. Grease Tray
  19. 19. Perfect for Easy Entertaining
  20. 20. 300 square inches of cooking space
  21. 21. Attached Working Area
  22. 22. Easy to Clean
  23. 23. Features and benefits complement the CTA, use graphics that support not compete with the CTA.
  24. 24. Reduce the number of choice and distractions. Too much choice can mean customer maybe less likely to complete a CTA</li></li></ul><li>Research Results<br />Reviews & Testimonials<br />
  25. 25. REVIEWS & TESTIMONIALS…RESEARCH RESULTS<br /><ul><li>Studies have shown product reviews are responsible for up to 30% increase in conversions.
  26. 26. Using Reviews can be a great way to increase conversions, but ensuring they are legitimate/genuine is the key. They should be honest, independent reviews.</li></ul>Reviews should feature below all other information on the product page so the visitor doesn’t have to ‘click’ on reviews in order to see this info on the page.<br />To build up reviews, offer incentives. For example; Arnold Clark service centres could offer a ‘win 3 years free servicing by filling in a review of your car’ promotion.<br />
  27. 27. Retailer Analysis<br />
  28. 28. Retailer AnalysisDell.com<br />Images:<br /><ul><li>Image displayed on left hand side of page
  29. 29. Image option opens up a gallery of 20+ different images with different angles and images of laptop in use.
  30. 30. Descriptions accompanying image
  31. 31. 360 degree view.
  32. 32. Video of product in a presentation format, displaying features
  33. 33. Option to look at Image in Full Screen Mode</li></li></ul><li>Retailer AnalysisDell.com<br />CTA’s:<br /><ul><li>Where?
  34. 34. Not clearly displayed</li></ul>Content/Description Box:<br /><ul><li>Describes the benefits before the features/spec.</li></ul>Reviews:<br /><ul><li>Featured below the content/descriptions
  35. 35. Rating system (5 stars maximum)
  36. 36. Honest independent reviews</li></ul>Other:<br /><ul><li>‘Comparison, you might also like’ feature
  37. 37. Social Media Integrated – Facebook ‘like’ option.
  38. 38. Cluttered, hard to navigate
  39. 39. Too many distractions/ too much happening on page</li></li></ul><li>Retailer AnalysisQVC.com<br />Images:<br /><ul><li>Over 4 different Images
  40. 40. Different Angle Images
  41. 41. Showing product in use
  42. 42. Zoom Functionality
  43. 43. Video Option</li></ul>CTA’s:<br /><ul><li>CTA’s contrasting colour but doesn’t grab your attention</li></ul>Content/Description Box:<br /><ul><li>Lists benefits before features.
  44. 44. ‘You might also like’ feature
  45. 45. Social Media Integration</li></ul>Reviews:<br /><ul><li>Reviews/Community Q&A section</li></ul>Other:<br /><ul><li>Slightly cluttered?</li></li></ul><li>Retailer AnalysisASOS.com<br />Images:<br /><ul><li>Good selection of images
  46. 46. Zoom Image ability
  47. 47. Video presenting product in use</li></ul>CTA’s:<br /><ul><li>Clearly Displayed,
  48. 48. Contrasting Colour
  49. 49. Good use of white space</li></ul>Content/Description Box:<br /><ul><li>Good info on delivery and return options.
  50. 50. Product Description not the best more specification than benefits and features</li></ul>Reviews:<br /><ul><li>No use of reviews</li></ul>Other:<br /><ul><li>Simple design
  51. 51. Easy to Navigate and complete CTA
  52. 52. ‘Other customers also bought’ feature
  53. 53. Social Media Integrated – Facebook ‘like/share’ options.</li></li></ul><li>Retailer AnalysisApple.com<br />Images:<br /><ul><li>Image displayed on right hand side of page
  54. 54. Good selection of images showing all angles of product
  55. 55. Descriptions accompanying Images
  56. 56. Video also presenting product in use</li></ul>CTA’s:<br /><ul><li>Clearly Displayed at top of page above product images,
  57. 57. Contrasting Colour (blue against Grey/white)
  58. 58. Good use of white space</li></ul>Content/Description Box:<br /><ul><li>Vast amount of information on the product
  59. 59. Tab Format used to make navigating all information easier
  60. 60. Tab in top section of webpage rather than middle section
  61. 61. Design details, features, and benefits all displayed before the technical specs</li></ul>Reviews:<br /><ul><li>No use of reviews on this page but apple do have customer reviews on most other products</li></ul>Other:<br /><ul><li>Simple and clean design
  62. 62. Stacked layout reduces distractions,
  63. 63. Easy to Navigate</li></li></ul><li>Retailer AnalysisNike.com<br />Images:<br /><ul><li>Image Located Centrally
  64. 64. Only 1 image but option to zoom to get a closer look at product
  65. 65. Option to look at Image in Full Screen Mode</li></ul>CTA’s:<br /><ul><li>Price, Short Description and CTA located above the central Image
  66. 66. CTA clearly displayed
  67. 67. Lots of white space</li></ul>Content/Description Box:<br /><ul><li>Describes the benefits before the features/spec.
  68. 68. Simple Tab system available for further information if required.</li></ul>Reviews:<br /><ul><li>Featured below the content/description box,
  69. 69. Honest independent reviews
  70. 70. Rating system (5 stars maximum)</li></ul>Other:<br /><ul><li>Simple, clear design,
  71. 71. easy on the eye.
  72. 72. No clutter
  73. 73. ‘You might also like’ feature</li></li></ul><li>Competitor Analysis<br />
  74. 74. Competitor AnalysisCarmony.com<br />Images:<br /><ul><li>Good Selection of images
  75. 75. No option to enlarge images or zoom.</li></ul>CTA’s:<br /><ul><li>Prominently displayed at top of page above product images,
  76. 76. Don’t stand out, hard to distinguish (same colour as rest of website.
  77. 77. No contrasting colours
  78. 78. Bad use of white space, blends in with other content on site.</li></ul>Content/Description Box:<br /><ul><li>Tab Format used to make navigating information easier
  79. 79. Detailed spec
  80. 80. Lists technical spec before features. No benefits, overview or summary.
  81. 81. Tab Format could easily be missed. Not clearly distinguished.</li></ul>Reviews<br /><ul><li>No Reviews</li></ul>Other<br /><ul><li>Finance Calculator
  82. 82. ‘How Green’ feature
  83. 83. Running Costs Feature
  84. 84. ‘Compare’ Feature, ability to compare vehicles added to favourites.</li></li></ul><li>Competitor AnalysisPerrys.com<br />Images<br /><ul><li>Car description and price in image light box.</li></ul>CTA’s<br /><ul><li>Several CTA’s, Phone number main CTA at top of page
  85. 85. Telephone number CTA repeated and displayed in contrasting colour.</li></ul>Content/Description Box<br /><ul><li>Detailed spec available.
  86. 86. ‘Clever and different ‘Standard features’ feature.
  87. 87. Lists other required info such as Co2 emissions info including Co2 comparison chart so the data actually makes sense
  88. 88. Tax disc information
  89. 89. Running Costs Chart
  90. 90. Fuel Costs Calculator
  91. 91. Tab Format used to make navigating information easier</li></ul>Reviews<br /><ul><li>No Reviews</li></ul>Other<br /><ul><li>‘Similar Deals’ Feature
  92. 92. Finance Calculator located at top of screen
  93. 93. Slightly cluttered and uneasy on the eye</li></li></ul><li>Competitor AnalysisAutoquake.com<br />Images:<br /><ul><li>In-depth library of 30+ interior, exterior, engine and vehicle document images (AC.com should benchmark Autoquakes’ Image section)
  94. 94. Vehicle condition report
  95. 95. Images in tab system to separate interior, exterior etc.</li></ul>CTA’s<br /><ul><li>Prominently displayed at top of page above product images,
  96. 96. Contrasting Colours for CTA’s
  97. 97. Good use of white space</li></ul>Content/Description Box<br /><ul><li>Vast amount of information available, enough for a car buyer to stay on the site
  98. 98. Finance Calculator
  99. 99. CAP Data
  100. 100. Tab Format used to make navigating vast amount of information easier
  101. 101. No custom description or benefits, lists specs instead</li></ul>Reviews<br /><ul><li>No Reviews</li></ul>Other<br /><ul><li>Ability to ‘Watch’ car and receive emails when price is changed
  102. 102. ‘Similar Car’ feature (but makes page more cluttered?)</li></li></ul><li>Competitor AnalysisAutotrader.com<br />CTA’s:<br /><ul><li>Prominently displayed at top of page above product images,
  103. 103. Contrasting Colour for CTA
  104. 104. Good use of white space</li></ul>Content/Description Box:<br /><ul><li>Images included in the Content/Description section.
  105. 105. Vast amount of information available, enough for a car buyer to stay on the site
  106. 106. Tab Format used to make navigating vast amount of information easier
  107. 107. CAP data included</li></ul>Reviews:<br /><ul><li>No Reviews</li></ul>Other:<br /><ul><li>‘Compare’ Feature, ability to compare vehicles added to favourites.
  108. 108. Stacked layout reduces distractions,
  109. 109. Advice section in bottom 3rd of page educating visitor giving tips on how to buy a car, test drives etc.</li></li></ul><li>ArnoldClark.com Analysis<br />Images:<br /><ul><li>Enlarge Image option
  110. 110. Vehicle description in light box
  111. 111. Image seems boxed in by other features (Summary and price)
  112. 112. Lack of consistency in number of images per vehicle
  113. 113. No images of interior
  114. 114. No Zoom Functionality</li></ul>CTA’s:<br /><ul><li>Good sized CTA button and location
  115. 115. Distinct but good sized Secondary CTA buttons
  116. 116. Contrasting Colour for CTA (Red/Green)
  117. 117. Telephone Number CTA?
  118. 118. Lack of white space in most important area (CTA)</li></ul>Content/Description Box:<br /><ul><li>Vehicle Summary/spec
  119. 119. Co2 and Road Tax detail but no charts or diagrams to explain or compare
  120. 120. Too much unnecessary white space/gaps and size issues
  121. 121. No benefits or custom overview/review of product
  122. 122. Only Lists technical specifications
  123. 123. Not enough vehicle details,
  124. 124. Too much wasted white space, has a static/unfinished feel
  125. 125. Tab Format but only one tab
  126. 126. Uneasy on the eye and layout issues</li></ul>Other:<br /><ul><li>No Reviews
  127. 127. No Interesting/different/exciting features</li></li></ul><li>Other Interesting Facts!<br /><ul><li>Landing Pages have, on average about 5 seconds before the visitors decide to stay or bounce!
  128. 128. Studies have shown that product reviews can be responsible for up to 30% increase in conversions</li></ul> - *Official Google Website Optimizer Blog<br /><ul><li>Before a user is willing to complete the CTA they need to recognise the need for the product. Product description section needs to educate the user on the benefits of why they should buy the product not the technical specifications.
  129. 129. Don’t worry too much about the ‘below the fold’ rule!</li></ul> Long web pages aren’t always a bad thing. Users are becoming webpage savvy and realise there is usually more to a page than what they can see. They also get a visual cue in the form of a scroll bar on the right hand side of their browser which indicates how long a page might be. Whilst most users won’t consciously see it, it subconsciously provides information to let them know there is more on the page than they first see.<br /><ul><li>Ideally though, a page should not exceed 2 printed pages of double-spaced, 12 point text!</li></li></ul><li>END<br />
  1. A particular slide catching your eye?

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

×