Landing pages Gilles.pptx
•Download as PPTX, PDF•
3 likes•514 views
How to build landing pages by Gilles DC, EIA 2023 Porto.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Landing pages Gilles.pptx
Similar to Landing pages Gilles.pptx (20)
More from European Innovation Academy
Recently uploaded
Recently uploaded (20)
Landing pages Gilles.pptx
- 1. Convert visitors into customers Landing Pages
- 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. How to structure What to write How to visualize How to design Asking for feedback Resources and inspiration
- 4. Explain product features… Product … as customer benefits. Market
- 5. Conversion rate = signups / visitors
- 6. Conversion marketing product “get on wait list” “sign up” “early access” “sign up for beta” “get started”
- 7. Conversion rate = desire — (labor + confusion)
- 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 specific and consistent at every step and turn.
- 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. Value propositions “Here’s what our product can do.” Product quality matched to “Here’s what you can do with our product.” customer benefit
- 11. Imagine your product is fast quicker output greater output more efficiency benefit “Get work done faster.” “Get more work done.” “Save yourself time.” value prop
- 12. Imagine your product is secure protection control benefit “If you lose your card, freeze it from the app.” “Turn off contactless, online payments and withdrawals from the app.” value prop
- 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. 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. Example — Revolut Bad alternative Transaction fees Moving money costs money. Transaction delays Wastes productivity. Hinders opportunity. Limited control Difficult 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 notifications 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, notifications. Cumbersome to open an account Semi-automated KYC onboarding in 5 minutes.
- 16. more examples
- 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.
- 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
- 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. Hero — Header Make them want to scroll. But don’t require them to scroll. Descriptive, while concise. Hook them. Or lose them forever. Be specific. Don’t be vague. “Improve your workflow!” If a visitor reads only this, would they know what you’re selling?
- 26. How to write killer headers 1. Identify how users get value from your product 2. Add a hook to keep ‘m reading
- 27. How to write killer headers 1. Identify how users get value from your product ❋ Value props 2. Add a hook to keep ‘m reading
- 28. Airbnb Dropbox Deliveroo Revolut Webflow Robinhood Slack Stuck in hotels, no real culture experience. Unorganized papers, lost flashdrives. Long waits and traffic-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 file-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 files 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 effectively with everyone in one place. Product Bad alternative Better solution Value prop
- 29. 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
- 30. “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?
- 31. 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
- 32. 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
- 33. Airbnb Dropbox Deliveroo Webflow 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 files to the cloud automatically. Get your favourite meals in one click. Launch your website yourself. Trade stocks for free. Communicate effectively with everyone in one place. Product Original Objection Updated Experience new cities like a local. No minimum stays. Upload your files 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.
- 34. Now that prospects understand what you product does, use your subheader to specify how. Header Subheader Image Hero
- 35. 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?
- 37. Header 1. Value prop 3. How it creates value prop 2. Introduce product Subheader
- 38. How small brands sell more online
- 39. Your most restful sleep is just a sip away
- 40. Ace the SAT with just 10-minutes of studying a day
- 41. Airbnb Revolut Webflow 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. Webflow 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.
- 42. Hero Now that prospects understand what you product does, use your subheader to specify how. Header Subheader Image
- 43. 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.
- 52. — Leo Burnett “In advertising, the greatest thing to be achieved is believability. Nothing is more believable than the product itself.”
- 54. 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.
- 55. Social proof
- 56. Social proof
- 57. 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
- 58. Call-to-Action Get visitors to act on their excitement and FOMO. Make it feel easy. Button Form “Click here for magic”
- 59. 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
- 60. Cut out as many steps as possible Join beta Your email
- 62. 1. Your magic 2. How you create magic 3. Visualize the magic 4. Social validation 5. Click here for magic
- 63. 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
- 64. 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
- 65. 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
- 66. Navbar Hero Social proof Call-to-action (CTA) Features & Objections CTA Footer Below-the-fold
- 67. Above-the-fold Below-the-fold you earn the attention you earn the sale
- 68. 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.
- 69. Cook the perfect steak, every time Cooks and sears No clean up More than just meat
- 70. Podcasts that look and sound amazing Local recordings in 4K quality Uncompressed crystal clear audio
- 71. … 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.
- 73. 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 specific. No sales fluff. Bullet points. Feature copy
- 74. Header A simpler workflow 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 offer 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 fly. • Arrange playdates and (kid-free) social gatherings.
- 75. 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
- 84. Navbar + Footer ❋ Logo ❋ Links to key sections ❋ CTA
- 85. Conversion rate = desire — (labor + confusion)
- 86. Value propositions Make it crystal clear how your product improves visitors’ lives. Be specific 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
- 87. 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 reflects what you stand for (brand).
- 88. Landing page builders landerapp.com instapage.com leadpages.net unbounce.com wix.com framer.com webflow.com These tools typically include: ❋ Drag-drop building blocks for various elements ❋ Built-in mechanisms for collecting your leads ❋ Easy integration with other tools
- 89. 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 sufficiently unique and descriptive to convince people from your target audience to choose you over competitive solutions.
- 90. 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” reflex?
Editor's Notes
- Hello everyone you’re all early stage startups we tell you to do things that don’t scale what that means is now how do you scale from that group of a couple of customers to all of those customers in your market obviously you can’t talk to all of them individually mvp style instead you build a landing page that does the talking for you then you figure out where to reach them get their attention and in a way that makes them click to that landing page you can afford systematically, which is what we call acquisition the thing with acquisition is that it varies wildly depending on your product market and business model the good news is that landing pages are are proven process
- over the past five years i’ve been sharing landing page performance data with growth marketers across this keynote is about what works and what doesn’t
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience This should be pretty straightforward as an early stage startup since you should be focused on solving one specific customer’s problem very well. Hence, the value should be quite obvious. You explain it on their terms, in language they understand, through benefits that matter to them. As you grow you will cater to multiple types of customers, and maybe you will also have multiple products. Companies typically have three types of landing pages Product landing pages that explain a product to the audiences they’re built for Audience landing pages that explain one or more products to one specific audiences Homepages are typically catch-all: they are to be as general as possible to all the audiences the products cater to For you it’s pretty straightforward; you are pitching one product to one audience.
- you want to do that in a way that makes them want it, and then express that desire to you which is conversion; they’ll sign up, leave their email, get on the waiting list conversion rate is the rate of your visitors versus your signups if you are wide awake you’ll notice that this slide is wrong it says the
- The goal of your landing page is to fire the visitor up so much that they want the product value right then and there. As soon as they hit the call to action button the product experience should be as close as possible. so for Uber and Airbnb the product is already in the landing page. start searching and you’re there Conversion should be as close to the product experience as possible. approximate the value as much as possible the landing page is really a step towards your product, you’ll pitch the product in a way that makes them want it so they click to get it,
- how to maximize conversion rate
- This means, and this might be disappointing, that good landing pages are way more about messaging, about writing copy than it is about design. You can have the prettiest landing page in the world, if it doesn’t communicate clearly how it improves the visitor’s life and thus why they should sign up, it’s a bad landing page and it will not convert. You start from messaging and then you design it in a way that amplifies the message. The design should not dominate.
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience You explain it on their terms, in language they understand, through benefits that matter to them. The marriage of the two is product-market fit.
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience You explain it on their terms, in language they understand, through benefits that matter to them. The marriage of the two is product-market fit.
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience You explain it on their terms, in language they understand, through benefits that matter to them. The marriage of the two is product-market fit.
- labor and confusion is why we shouldn’t do anything experimental this template has been proven over and over again This means we shouldn't do something avant garde with our homepage structure unless we have a good reason to. Here’s the typical structure we'll be using:
- "Hero" is jargon for the big section at the top of your page—what visitors first see before they scroll down. It's also called your above-the-fold.
- "Hero" is jargon for the big section at the top of your page—what visitors first see before they scroll down. It's also called your above-the-fold.
- "Hero" is jargon for the big section at the top of your page—what visitors first see before they scroll down. It's also called your above-the-fold.
- "Hero" is jargon for the big section at the top of your page—what visitors first see before they scroll down. It's also called your above-the-fold.
- Lifestyle, on-the-go with phone
- Lifestyle, on-the-go with phone
- Lifestyle, on-the-go with phone
- Lifestyle, on-the-go with phone
- Similarly, jupiter.co's first sentence explains what their product is (green). Then it explains how its claim ("In just 5 minutes") is possible (blue). As a rule of thumb, your subheader should only be one or two sentences. Don't make this an essay. Keep reading breezy so visitors sustain their momentum. Let's look at more examples:
- We spent a lot of time on the hero but with good reason. You’ll notice a lot of concepts and practices recurring as we go lower down the page.
- You’ll notice on a lot of these sites as you scroll down from the hero you’ll immediately see some company logos and or testimonials. These
- Problem-solution fit, you’ll come across quotes that frame the problem and desired solution. All of these are “social” proof of what you are bringing into the market. Use your imagination. If you know what problem you want to solve, you’ll know what you want this to say
- Problem-solution fit, you’ll come across quotes that frame the problem and desired solution. All of these are “social” proof of what you are bringing into the market. Use your imagination. If you know what problem you want to solve, you’ll know what you want this to say
- Problem-solution fit, you’ll come across quotes that frame the problem and desired solution. All of these are “social” proof of what you are bringing into the market. Use your imagination. If you know what problem you want to solve, you’ll know what you want this to say
- You’ll notice on a lot of these sites as you scroll down from the hero you’ll immediately see some company logos and or testimonials. These
- Problem-solution fit, you’ll come across quotes that frame the problem and desired solution. All of these are “social” proof of what you are bringing into the market.
- Wait if you don’t have a product yet? You can go for waiting list, hear from us, stay up to date. Request access/.
- We spent a lot of time on the hero but with good reason. You’ll notice a lot of concepts and practices recurring as we go lower down the page.
- We spent a lot of time on the hero but with good reason. You’ll notice a lot of concepts and practices recurring as we go lower down the page.
- We spent a lot of time on the hero but with good reason. You’ll notice a lot of concepts and practices recurring as we go lower down the page.
- We spent a lot of time on the hero but with good reason. You’ll notice a lot of concepts and practices recurring as we go lower down the page.
- We spent a lot of time on the hero but with good reason. You’ll notice a lot of concepts and practices recurring as we go lower down the page.
- We spent a lot of time on the hero but with good reason. You’ll notice a lot of concepts and practices recurring as we go lower down the page.
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- Looks familiar?
- Blunt brevity
- Blunt brevity
- Blunt brevity
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- Employee benefits card
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- There’s nothing wrong by having a CTA right up there in the hero, but in truth, people will rarely convert already there.
- Good time to follow with another CTA. More conclusive one. You tried once after hero, now you try to close again. If they have been reading all this way through it means you managed to retain their attention.
- There’s a reason why I address this last. Footers, check out other pages. You’ll have a block ready in the landing page builder usually.
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience You explain it on their terms, in language they understand, through benefits that matter to them. The marriage of the two is product-market fit.
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience You explain it on their terms, in language they understand, through benefits that matter to them. The marriage of the two is product-market fit.
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience You explain it on their terms, in language they understand, through benefits that matter to them. The marriage of the two is product-market fit.
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience You explain it on their terms, in language they understand, through benefits that matter to them. The marriage of the two is product-market fit.
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience You explain it on their terms, in language they understand, through benefits that matter to them. The marriage of the two is product-market fit.
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience You explain it on their terms, in language they understand, through benefits that matter to them. The marriage of the two is product-market fit.
- One-pager where you present your product to an audience in a way that makes them want it. This means you have two variables: Product Audience You explain it on their terms, in language they understand, through benefits that matter to them. The marriage of the two is product-market fit.