How to create effective landing pages for testing

February 21, 2018

This is an update from Week 6 of my web app challenge. I challenged myself to build a software product and generate $1000 in real revenue in 3 months.

Deciding what to build can be a challenge. During my web app challenge I’ve shipped 3 different landing pages and created a working prototype for my product idea.

2 weeks ago I decided to create a landing page to test the water for my new idea. My hypothesis was that people wanted to better understand their self-employment income.

Here’s the process I use for creating landing pages to test product assumptions.

1. Start with words

Starting with a text document instead of a code editor forces you to focus on your customer and how your product will improve their lives.

If you’ve already talked to some potential customers you already have an advantage. You can use your notes to match the content on your landing page to the way potential customers talk about their problems and goals they are trying to achieve.

The language you use needs to resonate with your intended customer and be specific to their needs. Remember, your goal is to help visitors understand how your product will help them overcome obstacles and improve their life.

2. Focus on the hierarchy

Lay out the content on your page using a template to help keep visitors engaged and ensure your message matches their expectations.

This template by Joanna Wiebe at CopyHackers is one I’ve used for the last couple of years and keep coming back to every time I create a new landing page.

Copyhackers Hierarchy Template Image credit: Copyhackers

Once you’ve written your content it’s a good idea to solicit some initial feedback from someone who knows nothing about your product. I find Google Docs to be a helpful tool for sharing copy and giving people the ability to make suggestions in context.

3. Use existing tools

So you’ve made a few tweaks to your copy based on feedback and now you’re finally ready to think about design. The goal of this page is to validate (or invalidate) your assumptions so it’s a good idea to use whatever tools you know to help you ship quickly. Here are the tools I use.

  • Gatsby - A static site generator built on React.js.

  • Nuxt - A static site generator for Vue.js.

  • Netlify - Quick and easy static hosting with deploys from Github out of the box. It’s free for public repo’s.

  • Mailchimp - My newsletter provider. Free up to 2000 users and perfect for getting started.

  • Ship by Product Hunt - Possibly the easiest ways to collect email addresses for a new product idea.

If you don’t want to write any code. I recommend taking a look at Carrd.co to build simple landing pages with email capture forms and even payments out of the box.

4. Keep the design simple and focused

It can be tempting to bring out all your design tricks to announce your new product. But… at this stage design is unlikely to be the deciding factor in whether someone joins your waiting list or not.

It is however, important to ensure your design looks clean and professional to build trust with your visitors. Here are some tips to save you time with your visual design.

  • Use Dribbble to find designs with a color palette you like and copy the exact HEX values they use for your own designs.

  • Use Font Pair to identify a font pairing you like that you can access for free using Google Fonts.

  • Consider using your product name vs a custom logo for your first iteration.

  • If you’re coding your own landing page. Use a CSS framework like Bulma or Bootstrap to do the heavy lifting and give you everything you need out of the box.

  • Let your content breathe. Don’t be afraid to add extra whitespace between page elements.

Examples

At this point you should have a landing page that looks professional and clearly explains how your customers lives will be improved by your product. Before you hit the big green button and set it live take a few moments to check all your links work and that you’ve added descriptive meta tags. Below you’ll find the 3 landing pages I created for my challenge.

Pre-launch splash page

Landing page design for PaymentLink

View the live page

Sign up for early access to a SaaS product

Landing page design for MyIncomePilot

View the live page

Pre-order an information product

Landing page design for The Tax Automation Guide

View the live page

Once your landing page has been successfully deployed, all that remains is to start telling people about it and start gathering feedback.

5. Get traffic

Once your landing page has been successfully deployed, all that remains is to tell people about it and start gathering feedback. But how do you do that?

If a tree falls in a forest and no one is around to hear it, does it make a sound?

Here are a few ideas to drive traffic to your new page.

  1. Leverage your existing network – Tell people you know to visit your landing page in-person, on social media or via email and ask them to share it with people in their network who might find it relevant.

  2. Post to niche forums – The more specific the better here. If you’re building a product for freelancers think about where they already hang out. It’s likely you know about these places from your customer research. My favorites are Reddit and Slack communities.

  3. Consider beta services – Sites like BetaList and BetaPage can provide a great source of early traffic to help you get feedback. It’s important to think about how qualified this traffic is though as BetaList features companies in many categories.

  4. Add a link from your personal profiles – Don’t forget to add a link to your new page in your bio on social media and in your email signature. People like to do business with people, some will click through to see what else you are up to.

6. Encourage conversations

The most important thing you can do for your new product is to talk to people. The best part about creating a landing page before building your product is that it provides an anchor point for conversations.

The goal of your interactions with visitors to your landing page should be to identify how they are looking to make progress in their lives and how they believe your product will help them do that.

If you are collecting email signups on your landing page I recommend creating an automated welcome email using Mailchimp or a similar tool to help encourage conversations. Here’s the welcome email I send to new signups to PaymentLink.

PaymentLink welcome email

Another way to learn more about your new visitors is to include a live chat tool like Drift or Intercom so that you can start conversations in real-time.

Once you’ve started the conversation try asking questions like:

  • What’s the most frustrating thing about how you currently do X?
  • When did you first realize you [needed something to solve your problem]?
  • How would solving [your problem] help you make progress and improve your life?
  • Tell me about how you went about looking for a product to solve your problem. How did you end up here?
  • What kind of solutions have you tried? Or not tried? What did you like/dislike about them
  • Did you have any anxiety about the purchase [of your current solution]? What made you nervous?

It’s important to remember that developing a solution to a problem is a process that continues to evolve based on the feedback you receive from customers. Many visitors will make direct feature requests but always try to understand the why behind their request.

Why will this feature improve your life? How will being able to do X help you make progress with Y.

Using landing pages is just one way to test and validate you product assumptions. If you’re not convinced about their power as a testing tool, I recommend taking a look at this video from Justin Jackson.

Week Summary

I worked on my Web App Challenge for a total of 23 hours over the past 2 weeks. Here’s how my time was broken down.

  • Copywriting (3 hours)

  • Landing Page Design (2 hours)

  • Customer Research (4 hours)

  • Creating a prototype and recording a video (2 hours)

  • Tech stack research/learning (12 hours)

I have 1 goal for the next week:

  • Identify a clear path forward and commit.

This post marks the half-way point in my Web App Challenge. The goal is to generate $1000 in revenue by April 10th. Here’s where the numbers stand so far.

Revenue $19 (1 pre-order)

Expenses $23.16 (2 domain names)

I’ll be reflecting on the experience and sharing my thoughts on the challenge thus far later this week.

Enjoyed this post? Join my occasional newsletter.