The fastest way to prototype and test landing pages with Notion

Too much time is often wasted when creating and testing landing pages. We as designers spend too much time making a landing page pretty before we test does the message resonate with our target users. 

We open up Sketch, XD, or Figma and spend a lot of time thinking about our visual identity, but the content is often an afterthought. We fill the screen full of lorem ipsum and tell us ourselves that we'll get back to that later. But the problem is words is what will convey our message to users. Stories are what will convince them to sign up or purchase our offering and words need to be focussed on from the beginning.

The most powerful tool on the web is still words - Justin Jackson.

I want to show you a way to quickly prototype and test landing pages before we spend hours making them look beautiful. And we're going to be using Notion to create a words-first (content-first) landing page that can be completed in a just a few hours.

‍

Why Notion is the perfect tool for the job

I've been a big fan of Notion since I first heard about it over a year ago. At first, I thought this was a fantastic tool for managing project tasks and keeping track of notes and documents.

And Notion is fantastic for creating and testing landing pages. I've been using it to quickly create and test landing pages so much that it is my go-to tool when I start designing landing pages.

Here are a few of the reasons why I use it:

1. It is super easy to create and share pages.
2. You can quickly add a wide range of content such as headings, paragraphs, imagery, videos, tables and so on.
3. The page layout can be customised so that you can group content by columns and grids.
4. You can embed different external content such as Google Maps, YouTube, Loom, TypeForm, and even iFrames.
5. You can even add custom domains, analytics, live chat, and custom fonts to your Notion pages.
   

And it is pretty easy to do all of the above so that makes it an excellent tool for creating landing pages that I can test with users.

Anyway, here is how you can do it.

Step 1- Create a page and layout it's sections.

Create a new page in Notion. Make sure to give it a good name as this is what users will see. So you're best to use the same name as your page title as it will help users understand what it is you do. This might be the product name or service name but don't call it "Landing Page XYZ".

‍

Step 2- Layout out the sections of the landing page.

Once you've created the site, you're going to want to start to layout the content. Start by briefly describing each section beginning with the hero and the main value proposition, and finishing off at the footer. You might want to add a benefits section or a features section, and so on. At this stage, you want to get your thoughts out onto the page so try to be quick. I also answer the following question for each section:

"What exactly do users want to know at this point?"

And I'll use this later as a starting point for writing the copy.

Step 3- Expand on the message by writing the copy for each section.

We will want to expand on the brief information that we put into each of the sections earlier. It would help if you thought of all the objections a user will have to the product/service. And then you need to write copy to counter those objections. So if they don't know what your product does, you need to explain exactly what it does.

Step 4- Arranging the content.

After you've got all the copy ready, now it is time to arrange the content in a way that will be easy for the user to consume. You can create columns for pricing or maybe even an old fashioned table, and you can arrange FAQ into grids for quick scanning.

‍

Step 5- Add any imagery that helps to convey your message.

The layout and copy for the landing page have been defined so now it is an excellent time to think about adding any imagery that might help convey the message. We can add screenshots of the product or any imagery that we believe will help give the user more understanding of what it is.

Step 6- Integrate with external tools.

We've got the most of landing page created at this stage, but we might want to allow our users to purchase our product or subscribe to a newsletter on the landing page. Luckily, we can easily do this in Notion too. The reason I allow users to buy or sign up now is pretty simple... never miss an opportunity to allow users to convert into customers.

By linking our landing page to the likes of Gumroad, we provide users with the ability to buy the product. And to allow users to subscribe to a newsletter, we can embed a Mailchimp sign up form directly in the page. Pretty simple, but it does the job. 

At this point, we've got a landing page ready for testing. Now you could give it a custom domain using tools such as Super.so or Hostnotion, but for me, this is perfect for user testing.

Step 6- Testing the landing page.

Now that you've got your landing page ready to go, you can share it with your target audience immediately, or you might want to run a few tests on it to see if users can understand your message and value proposition. Something along the lines of a 5-second test will help to do this, but you could try other methods too.

That is it, you've built a content-first landing page using Notion and tested the idea with real users. And you should be able to do this in just a few hours.

Once I've tested the landing page, then I'm going to polish it up and create the "live" version. For that, I use Figma for the high-fidelity designs and Webflow for the building the final version.