Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

27_07_Landing Pages_Gilles de Clerck_EIA Porto 2022.pdf

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 91 Publicité

Plus De Contenu Connexe

Similaire à 27_07_Landing Pages_Gilles de Clerck_EIA Porto 2022.pdf (20)

Plus par European Innovation Academy (20)

Publicité

Plus récents (20)

27_07_Landing Pages_Gilles de Clerck_EIA Porto 2022.pdf

  1. 1. Convert visitors into customers Landing Pages
  2. 2. Acquisition getting potential customers to visit your landing page so they learn about your product Conversion enticing potential customers with value propositions so they want your product
  3. 3. How to structure What to write How to visualize How to design Asking for feedback Resources and inspiration
  4. 4. Explain product features… Product … as customer bene fi ts. Market
  5. 5. Conversion rate = visitors / signups
  6. 6. Conversion marketing product “get on wait list” “sign up” “early access” “sign up for beta” “get started”
  7. 7. Conversion rate = desire — (labor + confusion)
  8. 8. + Desire Entice with value. Create intrigue. Go out of your way to make it as easy as possible for visitors to imagine how their lives will be better with your product in it. — Labor Minimize the work visitors have to do to get your value props. The more words and images to process, the harder and more tiresome. Aim for every word, visual and element to add meaning. — Confusion Make it crystal clear how your product improves visitors’ lives. Be speci fi c and consistent at every step and turn.
  9. 9. Messaging > Design 1. Hone your message. Identify your product’s most desirable value propositions. 2. Combine copy and media to convey those value props as clearly and concisely as possible. 3. Design your page in a way that enhances the clarity and impact of #2.
  10. 10. Value propositions “Here’s what our product can do.” Product quality matched to “Here’s what you can do with our product.” customer bene fi t
  11. 11. Imagine your product is fast quicker output greater output more e ffi ciency bene fi t “Get work done faster.” “Get more work done.” “Save yourself time.” value prop
  12. 12. Imagine your product is secure protection control bene fi t “If you lose your card, freeze it from the app.” “Turn o ff contactless, online payments and withdrawals from the app.” value prop
  13. 13. Generating value props 1. What bad alternatives do people resort to without your product? 2. How is your product better than that alternative? 3. Write as an action statement — value prop.
  14. 14. Example — Duolingo BAD ALTERNATIVES Expensive language learning courses and subscriptions. In-person learning courses with long-time commitments. Boring language learning courses. HOW YOU’RE BETTER VALUE PROP 100% free language learning. Flexible language learning at your own pace. Have real-world conversations in new languages. Learn a new language for free. Learn a new language whenever, wherever. Learn a language through real- world communication.
  15. 15. Example — Revolut Bad alternative Transaction fees Moving money costs money. Transaction delays Wastes productivity. Hinders opportunity. Limited control Di ffi cult to budget. You lose money. Cumbersome to open an account Takes a lot of time. Not available for everyone. Better solution Value prop Spend, withdraw and send money anywhere in the world. No additional fees. Send and get money in real-time, to and from anywhere in the world. Take control of your money with spending noti fi cations and smart budgeting tools. Open an account in seconds without street address or credit checks. Transaction fees No fees. Transaction delays Money arrives right away. Limited control Set limits, intuitive analytics, noti fi cations. Cumbersome to open an account Semi-automated KYC onboarding in 5 minutes.
  16. 16. more examples
  17. 17. Proven template 1. NAVBAR — Top of the page: company logo and site links. 2. HERO — Big section with header, subheader and most enticing imagery. 3. SOCIAL PROOF — Logos and/or testimonials of best-known clients. 4. CALL-TO-ACTION — Signup button with concise incentive to go for it. 5. FEATURES — Key value propositions. Why people would choose you. 6. CALL-TO-ACTION   ↺ — Repetition cooks an idea into people’s heads. 7. FOOTER — Miscellaneous links.
  18. 18. Navbar Hero Social proof Call-to-action (CTA) Features CTA Footer Proven template
  19. 19. Hero If the visitor reads   nothing else on your page, they should still get your product and why they should use it. Header Subheader Image
  20. 20. Above-the-fold Below-the-fold
  21. 21. If the visitor reads   nothing else on your page, they should still get your product and why they should use it. Header Subheader Image Hero
  22. 22. Hero — Header Make them want to scroll. But don’t require them to scroll. Descriptive, while concise. Hook them. Or lose them forever. Be speci fi c. Don’t be vague. “Improve your work fl ow!” If a visitor reads only this,   would they know what you’re selling?  
  23. 23. How to write killer headers 1. Identify how users get value from your product 2. Add a hook to keep ‘m reading
  24. 24. How to write killer headers 1. Identify how users get value from your product 
 ❋ Value props 2. Add a hook to keep ‘m reading
  25. 25. Airbnb Dropbox Deliveroo Revolut Web fl ow Robinhood Slack Stuck in hotels, no real culture experience. 
 Unorganized papers, lost fl ashdrives. Long waits and tra ffi c-heavy trips for food. Finding ATMs, forgetting to pay people back. Contracting website out to devs and agencies. High-fees on low-volume trades. Messy email threads and impractical group chats. Stay in locals’ homes. Online cloud storage with automatic fi le-syncing. Quick deliveries from local restaurants. Instant mobile money transfers for friends. Code-free website tool for anyone. No-fee stock trading platform. Single app for real-time, time- wide communication Experience new cities like a local. Upload your fi les to the cloud automatically. Get your favourite meals in one click. Get paid back instantly by your friends. Launch your website yourself. Trade stocks for free. Communicate e ff ectively with everyone in one place. Product Bad alternative Better solution Value prop
  26. 26. How to write killer headers 1. Identify how users get value from your product 2. Add a hook to keep ‘m reading 
 ❋ Boldly address likely skepticism
  27. 27. “Build your own website.” “But, I don’t know how to code.” “This’ll take too long. I’m not a designer.” “This will be limited like other such tools.” What stops customers from buying?
  28. 28. Don’t know how to code. It’ll take too long. 
 

 Low-functionality. Build your own website. Without code. Build your own website in 20 minutes. No code. 
 Build a custom website in 20 minutes. No code. Objection Updated header
  29. 29. Rank higher on Google Ace the SAT 
 

 Erectile dysfunction pills “I suck at SEO.” “I bet it’s hard work.” 
 “I don’t want to ask my doctor.” You don’t have to be an SEO pro to rank higher on Google. Ace the SAT with just 10 minutes of studying per day. Erectile dysfunction pills. Delivered to your door. Value prop Objection Value + Hook
  30. 30. Airbnb Dropbox Deliveroo Web fl ow Robinhood Slack Only available for long-term. Security and privacy risks. High delivery costs. I can’t code. There’s a minimum size. It’ll be expensive. Experience new cities like a local. Upload your fi les to the cloud automatically. Get your favourite meals in one click. Launch your website yourself. Trade stocks for free. Communicate e ff ectively with everyone in one place. Product Original Objection Updated Experience new cities like a local. No minimum stays. Upload your fi les to the cloud automatically. Chosen by Fortune 500s for superior security. Get your favourite meals in one click. No extra fees. Stock trading without fees. No minimums. Communicate with everyone in one place. Free for teams.
  31. 31. Now that prospects understand what you product does, use your subheader to specify how. Header Subheader Image Hero
  32. 32. Hero — Subheader ❋ How does our product work exactly? ❋ Which feature makes our claim more believable? When you promise amazing value, visitors think: “Ok great, but how?
  33. 33. Header 1. Value prop 3. How it creates value prop 2. Introduce product Subheader
  34. 34. How small brands sell more online Privy’s conversion, email marketing and text messaging tools help you get more customers from your tra ffi c.
  35. 35. Your most restful sleep is just a sip away Calming teas that help you relax, unwind and drift into a deep, restorative sleep.
  36. 36. Ace the SAT with just 10- minutes of studying a day 10-min microlessons designed to boost con fi dence and make SAT strategies easy to remember.
  37. 37. Airbnb Revolut Web fl ow Robinhood Slack An online rental marketplace with thousands of options in your area. Revolut is a money transfer platform that instantly connects you and your friend’s banks. Web fl ow is a website building platform that uses plug-and-play tech to help you launch quickly. Robinhood is an e-trading platform that allows for instant investments without trading fees. Slack is an all-in-one communication platform that organizes your conversations into channels, threads and direct messages. Product Header Subheader Experience new cities like a local. No minimum stays. Get paid back by your friends instantly. No fees. Build your own website in 15 minutes. No code. Stock trading without fees. No minimums. Keep your business communication organized in one place. For free.
  38. 38. Hero Now that prospects understand what you product does, use your subheader to specify how. Header Subheader Image
  39. 39. Hero — Imagery Visualize value props conveyed in header + subheader Complement and reinforce the copy. Not distract from it. Show your product, in action if possible.
  40. 40. Physical — Picture
  41. 41. Physical — Picture
  42. 42. Software — Screenshot
  43. 43. Software — Screenshot
  44. 44. Software — Screenshot
  45. 45. Software — Screenshot
  46. 46. Software — Screenshot
  47. 47. Software — Screenshot
  48. 48. — Leo Burnett “In advertising, the greatest thing to be achieved is believability. Nothing is more believable   than the product itself.”
  49. 49. Navbar Hero Social proof Call-to-action (CTA) Features CTA Footer Proven template
  50. 50. Social proof When visitors scroll down from the value props in the hero, they should be seeing other people/companies that are not you vouching for those value props. Logos Testimonials Make them feel as if everyone is already using your product. Except for them. Create irresistible FOMO.
  51. 51. Social proof
  52. 52. Social proof
  53. 53. Social proof What if nobody’s using your product because you’re super-early stage? ❋ Play the hand you are dealt ❋ Fake it ‘till you make it Be resourceful
  54. 54. Call-to-Action Get visitors to act on their excitement and FOMO. Make it feel easy. Button Form “Click here for magic”
  55. 55. Start recording Record podcasts in studio quality Learn why users leave your site Show my heatmap Order from your favorite local restaurants Find food Get paid back by friends instantly Setup your account Find a rental Experience your getaway like a real local CTA Value prop
  56. 56. Cut out as many steps as possible Join beta Your email
  57. 57. Navbar Hero Social proof Call-to-action (CTA) Features CTA Footer Above-the-fold
  58. 58. 1. Your magic 2. How you create magic 3. Visualize the magic 4. Social validation 5. Click here for magic
  59. 59. 1 2 3 4 5 1. Your magic 2. How you create magic 3. Visualize the magic 4. They say it’s magic 5. Click here for magic
  60. 60. 1 2 3 4 5 1. Your magic 2. How you create magic 3. Visualize the magic 4. They say it’s magic 5. Click here for magic
  61. 61. 1 2 3 4 5 1. Your magic 2. How you create magic 3. Visualize the magic 4. They say it’s magic 5. Click here for magic
  62. 62. Navbar Hero Social proof Call-to-action (CTA) Features & Objections CTA Footer Below-the-fold
  63. 63. Above-the-fold Below-the-fold you earn the attention you earn the sale
  64. 64. Features & Objections Feature #1 Feature #2 Feature #3 Put all your value props on the table and proactively address objections visitors might have concerning them. Make the overarching hero value prop concrete, feature by feature.
  65. 65. Cook the perfect steak, every time Cooks and sears No clean up More than just meat
  66. 66. Podcasts that look and sound amazing Local recordings in 4K quality Uncompressed crystal clear audio
  67. 67. … but it’ll be complicated So simple Grandma can use it Guests can join with one click. No downloads, no accounts. We made this for non-techies. … but I can’t edit Everyone can edit with our Magic Editor Save hours of editing with a few clicks. Upload your logo, change the background, choose your speaker layout, cut clips, and export.
  68. 68. Feature Header Paragraph Imagery
  69. 69. Concisely describe the value of the feature and address possible objections. Point out how the status-quo sucks and describe how you make it better. Keep it short, simple and speci fi c. No sales fl u ff . Bullet points. Feature copy
  70. 70. Header A simpler work fl ow for docs & tasks Paragraph Tired of linking Google Docs and Trello? Notion seamlessly blends the two. Full-powered project trackers with docs inside. Save your team from context switching. Header Invest for free Paragraph We’ve cut the fat that makes other brokerages costly, like manual account management and hundreds of storefront locations, so we can o ff er zero commission trading. Header Truly Private Messaging Paragraph Status uses the peer-to-peer protocol Whisper and end-to- end encryption to protect your communication from third party interference. Only you can view your messages. Header With LOOP, parents are more connected with each other. Bullet points • Create a chat room to organize school carpools. • Find a trusted babysitter on the fl y. • Arrange playdates and (kid-free) social gatherings.
  71. 71. Product screenshot (or mockup). Image that demonstrates feature in action. Make sure it adds value to your story. Avoid meaningless eye candy. Thumbs up for animated GIFs. Feature imagery
  72. 72. Navbar Hero Social proof Call-to-action (CTA) Features CTA Footer Proven template
  73. 73. Navbar + Footer ❋ Logo ❋ Links to key sections ❋ CTA
  74. 74. Conversion rate = desire — (labor + confusion)
  75. 75. Value propositions Make it crystal clear how your product improves visitors’ lives. Be speci fi c and consistent at every step and turn. increase desire Information density Use copy and visuals to maximize information density: the art of saying a lot with a little. A high ratio of ideas to elements. decrease labor & confusion
  76. 76. Design A visually appealing design helps conversion. By showing you’re not an amateur. 
 Don’t overdo it, but make sure: ❋ It's enjoyable to visually skim. ❋ It looks thoughtfully put together. ❋ Each section is clearly structured. ❋ It re fl ects what you stand for (brand).
  77. 77. Landing page builders landerapp.com instapage.com leadpages.net unbounce.com wix.com web fl ow.com These tools typically include: ❋ Drag-drop building blocks for various elements 
 ❋ Built-in mechanisms for collecting your leads 
 ❋ Easy integration with other tools
  78. 78. Getting feedback on your page People outside of your target audience Learn how enticing and comprehensible your copy is people who aren't familiar with your market or product. A mistake many make is to over- assume the baseline knowledge of an audience. People from your target audience Learn if your messaging is su ffi ciently unique and descriptive to convince people from your target audience to choose you over competitive solutions.
  79. 79. Getting feedback on your page ❋ Would you take your credit card and sign up right now? If not, what would it take? ❋ Rate how the page sustained your interest on a scale of 1-10. ❋ What do you suggest be rewritten or redesigned to help it better sustain your interest? ❋ What unanswered questions are you left with? ❋ Something awesome you wanted even more details on? ❋ If you had to delete half the page's imagery and copy, which would it be? ❋ What triggered your “bulls*t” re fl ex?
  80. 80. https://persistiq.com https://frontapp.com https://airtable.com https:// fi gma.com https://tryshift.com https://notion.so https://web fl ow.com https://grammarly.com https://cover.com https://frame.io https://withjoy.com https://slite.com https:// fl at.io https://voice fl ow.com https://grammarly.com https://softr.io https://billdr.co https://zapier.com https://mightyapp.com https://voiceform.com https://gumroad.com Inspiration https://pagecollective.com

×