WARNING: all this is for self-reference and not really intended for public reading but publishing it anyway.
I am making this note while working on
betterkeep.co
, but these ideas apply to landing page to be used in future projects as well. Can be used as a poor and quick reference when designing landing page.
Introduction
What is it
- A landing page can be any page with a specific purpose and is driven by Marketing.
- They can be pre-launch or post-launch.
What is its purpose
- It’s pure purpose is marketing so should have a call to action
Homepage?
- Landing page is tool that can be used in various ways.
- For example we’re planning to launch a landing page even before we start working on the product to make our customer interviews easier.
- Usually landing page serves the purpose of marketing for a new product/feature. It is different from the homepage. But in certain cases, the homepage is the landing page.
- See these stripe examples.
Usecases
- Validation: It is a cheap and quick way to get at least some market validation before you start working, a good portion of PH tools do this. But the landing page is not an MVP.
- Awareness/Hype: It can gather excitement and raise awareness around the product.
- Build rapport: You could be building a product internally and the landing page would be the storefront to build rapport with potential users. You can keep updating this page as you add new features.
- Customer Interviews: It can also be used to describe the product and gather potential customers for customer interviews before/while building the product.
- Sales page: It could be an effective sales page.
- Test target market: A scalable way to see if what you’re saying(message/phrasing) resonates with your target market, does it make them go down the funnel.
- Gain clarity: If in the early stages of the product, it can be useful to force you to clearly state your value propositions.
- Recall value: Next time the user comes to the page, they’ll see a more useful page
This list is non-exhaustive.
Wrong assumptions
- Onetime: It’s not something you do one time and let go. You need to keep iterating. People iterate on the landing page about 20 times, test different payment solutions, change price points and buying flows all the time to test if the landing page is doing well.
- Wrong expectation from user: Usually when someone visits a webpage, they intend to use it. Instead if they find a email collection box, they’ll be disappointed. If we do put an email collection box, we need to also give context as to why it exists there.
- Get you forward with the product: It can help you get insights but it’s not going to get you anywhere on its own. It’s one step of the puzzle, but an important one.
Checklist
non-exhaustive checklist, not everything needs to be checked, I’ve not assigned any priority here but based on the product you might have a priority.
- Relation: It has direct co-relation with the product
- Headline: Headline must grab attention. None of the other content matters if the headline doesn’t work.
- CTA: Make sure the CTA flows naturally from the content and it should exchange something of value for contact information.
- Audience: Make sure the LP is focusing on the audience rather than the product/company. The audience cares much more about themselves than you. So talk about the audience first, then introduce yourself by connecting to their interests.
- USP: Contrast your product with competitors and the current way of doing things. Focus on the USP
- CTA: Focus your landing page on one conversion goal. Only one CTA(instances can be multiple) in one landing page.
- Social proof: If you have social proof, move your social proof up the page, make sure it’s concise, compounds your copy, and from a buyer relevant to the visitor.
- Jargon: Avoid technical terms and acronyms, and write in plain language. Remember you’re talking to a human, even if they are a B2B buyer. Ask yourself if a 12 year old could understand your landing page.
- Agitate: Agitate your visitor by painting a vivid picture of the pain using emotional language, stories and visuals. PAS (pain - agitate - solve) is a common copywriting technique used to increase conversion.
- Analytics: Setup analytics and events tracking. Uncover a conversion baseline for future experimentation.
- Personas: No multiple personas, Landing pages targeting multiple personas and use cases almost universally convert at a lower rate. Go more niche, expand later
- Benefits: Visitors shouldn’t have to work out how and why the product will benefit them. Tell and show them with clear benefits language, and example use cases.
- Transparent: Nobody is signing up without understanding their own problem, your solution, and your pricing. Write a list of what a visitor needs to know before they will sign up. Make sure this critical info is before your first CTA.
- Show: Show, don’t tell. If a large block of text can be replaced with a visual, do it.
- Prespective: Put yourself in the shoes of a potential customer with little time to waste and answer the following two questions through the landing page:
- What’s in it for me? : Value proposition/claims
- Prove it : Proof
Copywriting
Copy is super important for landing page. Some basic questions to answer:
- What pain are you solving for?: Claim
- What’s your solution to this pain?: Reason to believe, value proposition
- How does the product help them LEVEL UP?
- What’s the proof that your solution works?: Call to action
When writing copy you can sort of go two ways:
- Minimal
- The idea
- Some surprising use-cases
- Plausible execution plans
- Kitchen-sink approach
- The idea
- Backup of how good the idea actually is
- Benefits I may not have thought of
- A ream of validation
- The team
- How much work they’ve spent developing the idea
- The execution plan
- Future direction, etc, etc.
Resources
- What I learnt roasting 200 landing pages in 12 months 🍗 👀
- Landing Page Checklist
- Is Your Landing Page Good Enough to get into Y Combinator?
- User Onboarding : User Onboarding is the process of radically increasing the likelihood that new users become successful when adopting your product.
- Call to Action Examples - 300+ CTA Phrases
- Episode 10: The Importance of Research
- Design The Perfect Hero Section (With Example) - YouTube
- Production-Ready Animation Library for React | Framer Motion
Inspiration
Catalogs
- Siteinspire - Web Design Inspiration
- Land-book - website design inspiration gallery
- 5151 Landing Page Design Inspiration - Lapa Ninja
- Godly — The Best Web Design Inspiration
- The Best Landing Page Examples For Design Inspiration - SaaS Landing Page
Interesting
- Slim Your Wallet : Like the stop motion thing
- FiftyThree : Single scroll with pages
- Telegram Messenger : Lovely messaging
- Dropbox.com : Single page
- craigslist : Homepage is the use
- Lens Protocol : Don’t know why it is here
- AREA 17 — A brand and digital product agency : Minimal
- Meditation and Sleep Made Simple - Headspace : Messaging in Design
- Gandi.net : Like the hero section
- Hygraph : Better organization
Product ideas
- Understand and address doubt through user testing, exit intent, or surveys.
- You should also consider making a really useful product that people want.
- The best way to generate word of mouth was to overdeliver.
- Think we need to create the Privacy Policy before the landing page