Landing Page Design & Optimization

13,328 views

Published on

Best practices for landing page design and conversion rate optimization.

Published in: Economy & Finance, Design
4 Comments
90 Likes
Statistics
Notes
No Downloads
Views
Total views
13,328
On SlideShare
0
From Embeds
0
Number of Embeds
450
Actions
Shares
0
Downloads
1
Comments
4
Likes
90
Embeds 0
No embeds

No notes for slide

Landing Page Design & Optimization

  1. 1. Best Practices For Landing Pages Alex Designs LLC Alexdesigns.com
  2. 2. Last Slide First <ul><li>Define a set of Landing Page best practices for your company - what works for your competitors may not work for you </li></ul><ul><li>Design for all personas - make it as easy as possible to collect a lead. Plus integrate a follow-on campaign via email or phone </li></ul><ul><li>Give the user value - reasons to complete a landing page or provide something in return </li></ul><ul><li>Test, test and test - the only way to improve ROI </li></ul>
  3. 3. My Background: <ul><li>Studio Art Degree – FSU Fine Artist, Illustration & Graphic Design </li></ul><ul><li>eDiets.com Creative Director – 7 Years Been A/B Testing since 2000 </li></ul><ul><li>Alex Designs LLC – 3 Years Web Design and Consulting since 2004 </li></ul>
  4. 4. Make A Quick Impression <ul><li>In just a brief one-twentieth of a second --less than half the time it takes to blink -- people make aesthetic judgments that influence the rest of their experience with an internet site.* * Behaviour and Information Technology journal </li></ul>
  5. 5. Creating a Scent Trail Banner Landing Page Product Detail Page <ul><li>Grab the visitor's attention (saying something of value) </li></ul><ul><li>Craft a landing page that is consistent with the message of the ad and relevant to the problem the visitor is seeking to resolve </li></ul><ul><li>Deliver on that message </li></ul>*From Future Now, Inc.
  6. 6. Landing Pages Begin Sales Funnel
  7. 7. Why A Sales Funnel? <ul><li>Isolate the user experience </li></ul><ul><li>Focus on creating customer connections - lead generation & follow-ons </li></ul><ul><li>Set Up For A/B Testing </li></ul><ul><li>Higher ROI than a homepage </li></ul><ul><li>Flexible to handle newsletter sign ups, up-sells and opt-in partnerships </li></ul>
  8. 8. Let’s See Some Examples
  9. 9. Example: Bad Sales Funnel
  10. 10. Example: Bad Landing Page <ul><li>Just A Little Long </li></ul><ul><li>They Do A/B Test </li></ul><ul><li>Does anyone read all this? </li></ul>
  11. 11. Example: Good Sales Funnel
  12. 12. Example: Good Landing Page <ul><li>Successful Trends: </li></ul><ul><li>Button stands out </li></ul><ul><li>Many ways to sign up </li></ul><ul><li>Simple message </li></ul><ul><li>Targeted demographic </li></ul><ul><li>Free Trial </li></ul><ul><li>Personalized Experiences </li></ul>
  13. 13. Landing Page Examples From Alex Designs LLC
  14. 14. Example #1: Landing Page With Form – Original Layout <ul><li>Problems With Layout: </li></ul><ul><li>Button does not stand out </li></ul><ul><li>Header is too big. This is considered wasted real estate - the page scrolls and button below fold. </li></ul><ul><li>Lack of focal point to force the user focus on form </li></ul><ul><li>Showing the price before user understands what the company is about. </li></ul><ul><li>Navigation links are exits </li></ul><ul><li>Header area </li></ul>
  15. 15. Example #1: Landing Page With Form – Wire Frame Layout <ul><li>Solutions For Layout: </li></ul><ul><li>Make the button stand out </li></ul><ul><li>Reduce Header size. The button is now above the fold. </li></ul><ul><li>Lack of focal point to force the user focus on form </li></ul><ul><li>Remove the prices and try to entice the user to create start the conversion process </li></ul><ul><li>Remove Navigation links </li></ul>
  16. 16. Example #1: Landing Page With Form – New Layout <ul><li>Solutions Summary: </li></ul><ul><li>Button is clearly defined and easy to read. Button is defined as the focal point </li></ul><ul><li>Header is reduced and navigational links are eliminated. </li></ul><ul><li>The page barely scrolls and all important elements are above the fold. </li></ul><ul><li>User is not forced to read but skim bullets of copy or choose to take a tour if they want more info. </li></ul><ul><li>Addition of the 100% Secure to make users feel more confident to sign up. </li></ul>
  17. 17. Results: Venture Deal <ul><li>Cost per action for either the 14 day trial signup or email newsletter signup, the CPA has gone down from $33 last month to $20 this month – a 40% drop . </li></ul><ul><li>The number of 14 day trials per day has gone from 1.5 last month to 2.8 so far this month – 87% increase . </li></ul><ul><li>The overall response rate once visitors hit my site has gone from 4% to 7%. </li></ul>
  18. 18. Example #2: Landing Page With Form – Original Layout <ul><li>Problems With Layout: </li></ul><ul><li>Button is below the fold </li></ul><ul><li>Photo is too big. </li></ul><ul><li>Green text is hard to read </li></ul><ul><li>Composition forces the user to look all across the page </li></ul><ul><li>Lack of focal point to force the user focus on form. Too many green elements. </li></ul><ul><li>Where’s the value? </li></ul>
  19. 19. Example #2: Landing Page With Form – Wire Frame Layout <ul><li>Solutions For Layout: </li></ul><ul><li>Move button above the fold </li></ul><ul><li>Give reason to why the user should get started. Provide some value and also a FREE Guide. </li></ul><ul><li>Make it easier to read and flow better. </li></ul><ul><li>Clearly define the focal point and call to actions. </li></ul>
  20. 20. Example #2: Landing Page With Form – New Layout <ul><li>Solutions Summary: </li></ul><ul><li>Make the phone number easier to find </li></ul><ul><li>Make the information easy to read and up to date. Give real reason why they should join. </li></ul><ul><li>Provide credibility </li></ul><ul><li>Clearly define the focal point and call to actions. </li></ul>
  21. 21. Improving Crown Peak Landing Pages
  22. 22. Example #3: Landing Page With Form – Original Layout <ul><li>Things I Like: </li></ul><ul><li>Button above fold </li></ul><ul><li>Buttons are Cleary Defined </li></ul><ul><li>Limited Navigation </li></ul><ul><li>Things I Don’t Like: </li></ul><ul><li>I feel forced to read the text </li></ul><ul><li>Text is hard to read </li></ul><ul><li>Is the text providing any value? </li></ul><ul><li>Lack of credibility </li></ul><ul><li>Hard to tell why I should put my information into the form </li></ul>
  23. 23. Example #3: Landing Page With Form – Wire Frame Layout <ul><li>Solutions For Layout: </li></ul><ul><li>Give them a reason to fill out the form </li></ul><ul><li>Add Privacy and Credibility </li></ul><ul><li>Make the flow of the page from left to right. The user is not forced to read copy. </li></ul><ul><li>Add a testimonial or message to reinforce headline </li></ul><ul><li>Use bullets (max 5) instead of paragraphs. </li></ul><ul><li>Move the contact us and privacy links to pop-ups so users do not leave your landing page </li></ul>
  24. 24. Example #3: Landing Page With Form – New Layout <ul><li>Solutions Summary: </li></ul><ul><li>Use the colors and photos to force the users eyes from left to right. </li></ul><ul><li>Add Privacy and Credibility </li></ul><ul><li>Add a testimonial or message to reinforce headline </li></ul><ul><li>Use bullets (max 5) instead of paragraphs. </li></ul>
  25. 25. What are your competitors doing?
  26. 26. Competitor Example #1:
  27. 27. Competitor Example #2:
  28. 28. What are your partners doing?
  29. 29. Partner Example #1:
  30. 30. Partner Example #2:
  31. 31. A/B Testing: <ul><li>Helps Determine Marketing Copy & Strategy for not only the landing pages </li></ul><ul><li>Optimize Your Conversion </li></ul><ul><li>Long Term Benefits </li></ul><ul><li>Improve Your Scent Trail </li></ul>
  32. 32. Multivariate Testing
  33. 33. Multivariate Testing: Google Web Optimizer http:// services.google.com/websiteoptimizer/overview/index.html
  34. 34. Eye Tracking:
  35. 35. Eye Tracking: Example from Tobii
  36. 36. Eye Tracking: Results of redesign after study completed
  37. 37. Brief Best Practice Summary <ul><li>Make a quick impression </li></ul><ul><li>Limited Navigation </li></ul><ul><li>Personalize the landing page - based on AD </li></ul><ul><li>Focal point is the button </li></ul><ul><li>-------------------------------------------------------- </li></ul><ul><li>Provide value & credibility in your content </li></ul><ul><li>Conversions are event driven - take action </li></ul><ul><li>Design for eye tracking and usability </li></ul><ul><li>Clear call to action - multiple times (Hard Sell) </li></ul><ul><li>Test to improve your baseline </li></ul>
  38. 38. Last Slide <ul><li>Define a set of Landing Page best practices for your company - what works for your competitors may not work for you </li></ul><ul><li>Design for all personas - make it as easy as possible to collect a lead. Plus integrate a follow-on campaign via email or phone </li></ul><ul><li>Give the user value - reasons to complete a landing page or provide something in return </li></ul><ul><li>Test, test and test - the only way to improve ROI </li></ul>
  39. 39. Thank You <ul><li>Alex Harris </li></ul><ul><li>www.AlexDesigns.com </li></ul><ul><li>[email_address] </li></ul><ul><li>954-240-4980 </li></ul>

×