Your SlideShare is downloading. ×
How to create a winning Product Page
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to create a winning Product Page

273
views

Published on

Tips on how to create a winning product page

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
273
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

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