How We Structure Our Landing Page

Building a landing page is very similar to pitching a product to a client, except you don’t get the opportunity to ask them what they’re looking for or if they have any questions, so you’ll need to make sure that:

• Their questions answered
• Their doubts cleared
• They’re convinced to do what you want them to do (try product, sign up newsletter)
• And of course, they need to stay on your page and scroll through until they’re convinced (we’ll talk about this last)

The Hero Section 💁‍♀️

This is the section that your visitors will see first. It needs to get their attention right away. After seeing this hero section, they need to:

• Understand what the product is
• Can see how they would be using the product. Whether or not they want to, it doesn’t matter yet. But they need to understand the product in such a way that they can “imagine” how to use it.
• Be intrigued to learn more

Tagline: A sentence that should explain what the product is to the user.

Our product is fairly simple: it’s a website builder. So it’s pretty straightforward on explaining what the product is. They know what a website builder is, and they know how they can make use of a website builder. But why is this the go-to website builder for my tribe? What’s different?

This leads them to scroll down, on to the second part of the hero section, these small tags:

It shows a variety of properties that we know pique the interest of our users. We want to attract more Notion users to use Typedream, and we know they relate to these properties:

• No-code
• Notion like interface & integrations with Notion
• Animations is a plus point all of them seems to be VERY excited about (based on our current users)

The product demo 👩‍💻

This short video gives them sneak peeks on what they can do with the website builder. I don’t expect people to stay and watch the video, but it does give glimpses of things they might be excited about without taking much space:

• The / slash command to add blocks
• One-click animation
• Dark mode
• Cool looking websites that our users made

People who used us 🤗

An upfront social proof is important, so your users would have some trust in your product as they see the rest of your pitch. Having this trust opens up their mind more to the possibility of them using your product. They’re less skeptical because they know others have used your product.

You may or may not be familiar with these brands, but they are thought leaders and web3 companies who are popular on Twitter, which might be looked up to by our 3 target users: web3 people, digital creators, and startup founders.

Why use Typedream? 🤔

“So why should they use Typedream? What’s the difference with other website builders?”

These are the questions they have lingering from the Hero Section. We know what our users are excited about and need in their websites, so we pick the best features of our product and show them here:

• From the product demo: It has an interface that they already loved – the / slash command to add blocks.
• Adding animations is really easy
• You can lock your pages
• And see analytics in a simple manner

Is it for me? 🙆‍♀️

That’s a question that goes through every users mind. “Cool tool, but is it perfect for me?”

We answer this question by showing how well-known people in the community of our target users are using Typedream and it serves their purpose really well.

Visitors seeing this site would look up to one of these people and most likely would identify as part of their “tribe”. That said, if the thought-leaders in their community feels that Typedream is perfect for them, more likely than not it would be perfect for them too, cos they’re the same kind of people.

Ok cool, so can I actually build my site with this? 💪

This is answered by showing what others have built in Typedream, which shows them that:

• You can build these sites too, because these people can
• You can be successful like these people too

This helps them visualize their vision closer to reality, seeing how others like him has successfully launched their products on Typedream.

Great, let’s go, how do I begin? 🚀

With the visitor being able to visualize using Typedream for their own products, all that’s left is ensuring they know how to start right now!

We do that by showing links to a bunch of guides and tutorials, so they can skim through some to get some idea of how things work. Once they have the overall picture in their head of what they need to do to actually launch their sites, the last thing left to do is Start!

And we conveniently put another call to action at the bottom to direct them to start building their website now.

This method works well with us, hopefully by reading this, it will help you too 🙌