How to design an effective product landing page
Designing landing pages is not an easy task. Each product represents a unique set of challenges, from its target audience, through its core offering and pricing structure, so it’s difficult to create a page that will work effectively without having a solid process in place. But what if there was a fairly generic process we could follow to do this?
In this guide I’ll help you better understand what affects the success of a landing page and explain how you can apply this knowledge in practice to your own projects.
Most landing pages have a healthy mix of different types of content, depending on what they need to achieve; the strategies differ from product to product.
Simple products may only need a single page to both inform and act on the information, while larger products (especially business/enterprise solutions) need to delve a bit more into the offering to better articulate the benefits, essentially expressing a need for a multi-page customer acquisition flow.
In this example we’ll focus on a simple product that doesn’t require an extensive multi-page flow to present its offering to the audience.
Effective design starts with research
First of all, we need to do a little digging. Below you’ll find a basic (and thus inconclusive) list of questions you should ask yourself and the product owners before you get to do any other work. The answers will be invaluable in making sure your content is relevant and presents the product accurately to its audience.
- What type of product is it? SaaS, a mobile app, or a mix of both, maybe a resource (PDF, online course, etc)?
- What is the main problem your product is trying to solve for its audience?
- Is your product offering made for casual, professional, or business users? Is there a crossover between any of those?
- Who is the product for?
- What are their goals?
- How will your product help the audience get to their goals?
- What possible objections they might have?
Finding answers to these questions may take some time, but once you have them you’ve now significantly reduced the risk of failing to design an effective landing page, by doing just eanough research.
Define the purpose of your landing page
Once your research is done, you can start thinking about the main purpose of your page. It’s important to do so, because otherwise you don’t know what you are designing for. A couple of examples:
- To learn more about the product benefits
- To learn more about a specific product benefit/feature
- To learn about product pricing structure
- To compare different product/service tiers
- To make a product purchase directly
- To sign up for a mailing list
All of these are valid objectives and there is no universal way to get to any of them, despite all of the templated approaches you might have seen online. You’ll have to decide on a primary and secondary objective and execute on both.
Trying to accomplish everything at once with a single page might be tempting, but as with most things, it’s about maintaining a clear focus on the top-level goals, so put your personal preferences aside.
The purpose of our sample page is to educate the audience about the core product offering and build up to an action, in the form of clicking through to an App Store page, to purchase the app.
Types of page content to consider
Before we get to writing anything, we need to know what types of content we can create. When defining content for a given page I use an approach I learned from Tait Ischia and his book on copywriting, ”Copywrong To Copywriter”: think about the content in terms of its intended purpose, which can be either educational or actionable.
Its primary objective is to either inform or teach your audience about something that might be beneficial to them. In case of a landing page it might be done through clear pricing guidance, feature comparison, product use cases, product benefits, etc.
This content has a different goal: to lead the audience toward taking an action. It can be as simple as a newsletter sign-up form, product purchase button, or a registration form. Whichever action you choose your content needs to support it all the way through.
The type of content you choose defines specific sections on your page. For example, you can start by stating your product’s mission (inform), followed by a sample use case (educate), and a button link to download the app (act).
It all starts with writing (an outline)
Believe it or not, but copywriting is an essential part of product design. Copywriting guides the design, gives it context and purpose, providing a necessary foundation for all things to come. When you start your design with content, other parts of design start to make more sense and become immediately more meaningful.
Many books have been written on how to start writing, but so few touch on the most basic way of starting to frame your ideas, which is to begin with an outline of what you want to write about.
In case of a product landing page, I can give you a rough outline prototype you can start with and tailor it to your product:
- positioning statement/value proposition
- benefits to the user
- social proof
The points above may seem obvious, yet so often we forget that presenting digital products to potential customers should be simple and obvious in execution.
Everything should be as simple as possible, but not simpler.— A. Einstein
Let the content guide design
It’s tempting to start designing the layout and work on arrangement of elements on the page, but let’s stop and think for a second: if we start with layout and placement, how will we know how/if the content fits into our design? It’s impossible to know this without having the content done first. Let’s begin with the basics then.
These are quite easy to start with and not so easy to get right. Using your market fit and unique offering you can create a solid positioning statement for your product.
The fastest and most convenient way to translate interfaces.
The statement above goes straight to the point and proposes “speed” and “convenience” as primary benefits of the product, targeted towards those who “translate interface.” You can surely expand from there and tailor this type of statement to fit your product needs.
While positioning validates whether the right audience is viewing your product, value proposition will validate if what you’re offering your audience is worthy of their attention. One of my recent projects, a marketing website for Poedit, showcases this type of statement accurately:
Poedit provides translators and developers with a powerful and intuitive editor for
gettext. It helps save time on mundane translation tasks with a lightweight and easy-to-use interface and smart features like pre-translation and machine translation.
We dug into what Poedit is best at and how this can be translated directly into customer benefits. ”It helps save time on mundane translation tasks” is the hard-hitting part which audiences can relate to, as interface translation is in reality quite a mundane process.
Whatever you decide to present in your value proposition, make sure it relates to real users goals, problems, obstacles, that your product can help them overcome.
Benefits to the customer
“Features” dominate the product world and reflect how products are being generally designed and developed. Whatever your approach to design and development of features for your product is, you can always flip this on its head and translate features into customer benefits. Below you will find a couple of examples.
A fairly standard feature such as this:
Validate translation files
PoEdit checks your files for common syntax errors and automatically detects potential translation issues.
Could become more meaningful:
Poedit will validate your translation files and automatically detect potential translation issues so you don’t have to.
The above statement relates to oft-expressed worries of people working with interface translations, and potential caveats:
- Is my syntax correct?
- Did I include everything?
- Are my plural forms correct?
We assure the audience that our product helps them by taking care of validation and error detection, which saves them time and reduces a chance of encountering potential problems later in the process. That’s in short what product benefits really are.
If your product isn’t yet available on the market, it might be good to enable preview/beta testing or give away preview licenses to potential testers, tech bloggers, journalists, who will be able not only to provide feedback, but might also write some great stuff for you to use in your product launch marketing. Look for tweets, emails, articles with endorsements, recommendations, etc. This is your social proof that the product is really beneficial to the audience it is aimed at.
Once you gather some of this proof you need to make sure this is displayed on the landing page in a prominent place, usually on it’s own. People often copy others’ choices, especially experts in their fields of interest.
Call to Action
Arguably, it’s one of the most important parts of a product landing page; you can have the best prices and the most compelling product brief but you won’t get many sales if CTAs will be considered an afterthought.
A call to action is not just the microcopy on a button with a supportive heading. It’s the whole section that is supposed to encourage action. Good CTAs use an action verb (“download”, “learn”, “try”, “sign up”, etc) in it’s opening phrase, and lead with a value proposition, to briefly describe return on investment (what you get when you click that magic button), and close with the action itself, “Free download”, “Subscribe”, “Buy now”, etc.
This formula is a great starting point and can be tweaked, shortened (or expanded), depending on what it does and for whom your product is made, so make sure you’re not trying to sell to yourself.
Measuring effectiveness of your landing page
Measuring the success of your landing page is not that hard in practice, but the theory is a little more complex. That’s because picking the right metrics to focus on, selecting the right methodology and tools, as well as the duration of your testing all plays a big part in what you’ll get in the end.
Before you start measuring anything, remind yourself what was the goal of your landing page? Was it to gain more newsletter sign-ups? Sell a product? Download an app?
Metrics of success
If you can only pick one metric to judge your landing page, I suggest you pick either:
- bounce rate (a measure of how many people click the “back” button to go to the previous page, usually search results);
- drop-off rate (how many people drop off your website after it loads, usually this includes bounce rate already);
If you rely solely on a conversion rate you won’t be able to tell exactly where in the process a problem occurs, while bounce rate is measured for each page individually, allowing you to tell with better accuracy which step in your conversion funnel needs attention.
To make things more interesting, you should be able to use your analytics software to set up conversion tracking (or e-commerce tracking). If your landing page is part of an entire acquisition flow, make sure your conversion tracking reflects that. Unbounce has a great guide that can help you do it using Google Analytics.
Take your time
Once you set tracking, it’s important to forget about your landing page for at least a week, provided you are sending some traffic to it, because gathering insights takes time to have a representative amount of data (and avoid statistical errors). Check for common errors when setting up Google Analytics in this handy article by Neil Patel.
This guide is not intended to be a compendium nor does it exhaust the subject of product landing page design, since the topic is extremely broad and can be approached from several angles. There is no definitive solution, but hopefully I’ve been able to pave the way and introduce you to some fundamental concepts that will help you create more effective landing pages for your products and services.
If you have any questions about the above process, or maybe you are looking for advice or help with designing your product landing page, get in touch.