• 6 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 3/7/22

Create Your Landing Page

Think About Your Storytelling

The landing page is the page on which a user lands after clicking a link (a commercial link, email link, banner ad, social media post, etc.).

It's the central element of your growth hacking strategy: Before launching your hack actions, you must have a relevant landing page! You have 5 seconds to convince your visitors because they will hardly give you more time to help them understand what they can get from your product/service.

Optimizing the landing page is a will create the right conditions to grow your business. It'll create the condition for transforming a more or less qualified simple prospect into a customer. For each identified persona, you must create a landing page to communicate a targeted message that corresponds to the value proposition.    

Don't try to focus on multiple targets simultaneously; otherwise, you'll get none. If your targets are fundamentally opposed to each other, you'll need two different messages. You'll then create two landing pages.

In this section, you'll discover the various essential steps to consider to effectively and creatively design your landing page. We'll continue building upon the landing page of the 2Bobs podcast. It’s a podcast for creative entrepreneurs who want to learn how to manage a better business. It includes two interviewers with decades of experience working in and for creative agencies providing useful tips in creating a successful business. 

In the case of 2Bobs, the current landing page:

  • Presents the podcast and various episodes.

  • Offers a subscribe option to listen on various platforms.

  • Drives traffic to the businesses of both the interviewers.

They want to develop ways to drive more podcast listens, and so they want to achieve the following:

  • Add an email opt-in so that listeners will be notified of new episodes.

  • Make it easier to find the podcast on various listening channels (Apple Podcasts, Spotify, Stitcher, etc.).

Develop the User Journey

In the website context, the customer journey means the typical journey that a user follows on the site, from the visit to the basket's validation.

Literally draw the route desired by your users on a white sheet of paper. ✏️ For this step, you'll have to visualize what you'd like the visitor to go through: you anticipate the content that the visitor will read first until when the visitor finally leaves your site.

For help, answer the question: How do you want your users to move to shape the user experience logically and intuitively?

This step forces you to prioritize information depending on what's most important to the visitor. Also, note the possible sources of traffic (even if they're not exhaustive). It allows you to have an overview of the progress made and keep a coherent message.

If you have several identified targets and several value propositions, list your landing pages to be created for each of them:

  • Your goals per page.

  • The content.

  • The elements to monitor, namely, what to watch closely to track your performance on the page. 

Here's an example of a table that you can make.

PAGE 

PERSONA

OBJECTIVES

CONTENT

TO MONITOR

Home page

Persona 1

Acquisition Persona 1

Value proposition Persona 1

Traffic referrals (social networks, articles on other websites, asking people who mentioned them)

Home page

All

Drive more subscribes on various listening channels 

(Apple Podcast, Spotify, Stitcher, etc.)

Visual links to various podcast outlets to subscribe to the podcast 

Monitor traffic that goes to various channels 

Home page

Persona 1

Be notified of upcoming episodes

Email signup form for being notified of new episodes

Number of signups

Home page

Persona 1

Get more social media referrals

Include share button to social networks

Number of shares

 

 

 

 

 

 

The Header or Hero Section

The header is sometimes referred to as the hero section and is at the top part of your landing page (or any other web page). This is all the information that the user sees on the page even before scrolling through the rest of the content.

The header is the gateway to your universe. It contains:

  • Your logo and typography.

  • Your catchphrase.

  • One or more images/photos illustrating your product/service and explaining the functionality of your product.

  • The call to action, in the form of a button to click, that invites users to engage with you. 

Illustration of a top part of a web site, which includes a few lines of text and a video.
The yellow box illustrates the header of a website with the different content that shows up first.

This first header section must be spaced and clear. This section must breathe through its aesthetic appeal and foster trust.

The Catchphrase or "One Sentence"

To attract your target, you need to work on your catchphrase. You will explain very concretely in one sentence what your product or service does. Your catchphrase must be inspiring and clear.

You're not yet at a stage of notoriety that allows you to solely rely on a slogan. Therefore, it's critical that readers can quickly identify your concept and its benefits.

The headline suggests that people can start quickly
The headline suggests that people can start a business immediately.

Your phrase communicates the value proposition to potential customers. It also introduces the personality and tone that you want to use for your product (fun, serious, professional, etc.). Mixing two fundamentally different tones may be appropriate.

You can also choose to show your visitors what they lose or miss out on by not buying what you offer. This is sometimes referred to as the Fear of Missing Out (FOMO), and can take different tones: 

  • With humor and emotion:

Bobby, a fashion clothing store in New York City, uses short, impactful messages to convince customers to buy immediately: "Buy now or CRY LATER" Indeed, in retail stores, all of the items are unique and can disappear within the hour.

  • With urgency:

"Beat the clock...save a lot."

offer different discount levels on different days. Notice how greater discount starts sooner
Chemical Guys offer different discount levels on different days. Notice how the greater discount starts sooner.
Static Images or Videos

Images provide an excellent opportunity to support your message. Some are worth a thousand words. Other images cause universal reactions; these are the ones you'll look for to support your message.

If you want to use a landing page video to clarify your product or make a demonstration, note that it should not exceed 30 to 60 seconds.

Product Features

Highlight the features and technical details of your product or the specifics of your service. Above all, the emphasis should be on the benefits obtained; but in certain domains, technical details can be reassuring elements. For some visitors, this is often the last step they need before buying/subscribing.

Call to Action (CTA)

Your landing page must include a goal: get an email, create a purchase, get a vote, recommend a friend, etc. It is your call to action and allows you to convert your prospects.

Your objective will result in a call to action that will lead to prospect conversion.

For example, your goal may be to collect your prospects' email addresses - those you'll contact to try to convert. 

Your goal should be measurable using defined metrics (KPIs). It will allow you to assess your landing page's effectiveness, your marketing action, or your hacks.

If you are trying to collect emails from prospects, your KPI will be the number (and quality) of emails collected.

Above the Fold

This is where you'll start telling your story. By deciding to navigate on your page, the user wants to learn more. The user has spent more than 5 seconds. You have their attention. It's time to prove what you said in the first section (the header).

Here's a proposed path:

Explain the "What"

Demonstrate how your product delivers the value that you promise:

  • A list of features.

  • A product overview.

    • A video demonstration, for example.

    • A description of your service.

Show what you are doing or talk about it, if your product is not ready yet. Innovation requires the ability to be instructive: it's necessary to get the message across in a clear and enlightening way.

Explain the "Who"

Show your face, say who you are, how you got there:

  • Be transparent about who you are.

  • Humanize your approach.

  • Make the user want to meet you.

  • Say how you want to be seen, named, followed.

Explain the "Why and How"

Write your manifesto: present what you believe in, your business vision, in an ethical and ideological charter. It’s the only part of your business that won't change. 

This manifesto is as useful to you internally as it is to the people who come across your product/service. It explains who you are and why you do what you do.

The same illustration of a webpage, but with a yellow box over three boxes of texte one for each of the following: who, what, when?
The yellow box highlights the last few things you'll have room for above the fold: the what, where, and why.

Create the Zoning of Your Landing Page

With your user journey diagrammed and your content clarified, you will conduct the zoning of your landing page(s).

Zoning consists of schematically representing the different areas and types of content on your page. It allows you to place items provisionally to save time once you're in front of your template.

You'll see that the final rendering is a little different. But this zoning makes it possible to put the first ideas on paper and try to make the journey match the final landing page.

Write Your Content

The mood board is a collection of images arranged intuitively that is used to express your project's style and serve as an inspiration. It's vital to start positioning your project visually.

Design Your Landing Page

Create Your Mood Board

The mood board is a collection of images arranged intuitively that is used to express the style of your project and serve as an inspiration. It's important to start positioning your project visually.

Why is an arrangement made intuitively?

A mood board forces you to make choices: to choose whether or not to add an image to your inspiration board and find beautiful cross-references to tell your story and visually impactfully. 😀

Even if you aren't a designer, it's important to do it yourself because you'll have a vision of the project, especially your first mood board. If you later want to hire a third party, this content will help you brief a designer, as needed.

To create a relevant mood board, look for keywords that revolve around what you want to say: list different adjectives, colors, references, universes, etc.

Pinterest or Designspiration are two tools that will allow you to create mood boards. 

Many drawings of pensive people and dreamy landscapes.
Here's the mood board selected for the 2Bobs project.

The project is based on the quest for meaning. The choice here was to voluntarily go in the opposite direction of this quest by emphasizing nonsense, as the name suggests. The inspirations represented here are: 

  • A dream world.

  • Surrealism.

  • Curious, even strange or disturbing images, which demands additional attention.

  • Tugging between two worlds: dream vs. reality.

  • Lose your mind/confusion.

  • Lack of visibility, clarity.

  • Things we don't want to see/denial.

  • Symbol of mutation.

Choose Your Colors

Once you've prepared this first stage of the mood board, select the 5 to 8 images that seem to be the most representative, then select your color palette.

Assembly of photographs reflecting a range of colours
Color inspiration for the project.

Choose Your Template

To build a site, you first had to know how to code; today, nothing could be easier!  With these different tools, you'll find pre-coded modules that allow you to create very beautiful sites without any technical knowledge. If you want your site to look like your zoning to the millimeter, it'll have to be developed.

Here's a list of template tools, classified from easiest to most difficult:

The preliminary zoning and user journey work should allow filtering among the templates available to you.

For 2Bobs, the template was chosen for its simplicity and sober design. This sobriety makes it possible to emphasize the visuals, which are often more meaningful than 1,000 words.

Make it Easier To Share Your Page

When choosing your template, consider the possibility of easily sharing your content on social networks.

Think Responsive

Your template must also be responsive, namely, adaptable to the screen's size on which the page is viewed. Ever-increasingly, we all have the habit of doing our searches on our phones; your site must adapt to mobile viewing.

Integrate Your Landing Page

Your content is ready; you have to integrate it into your site and publish it.

Here are a few tips:

  • Write the sections that you have placed in the zoning before integrating it onto the site. Otherwise, you'll be trying to fit squares into circles. Placing your texts into template boxes can sometimes seem a bit restrictive.

  • Once your content is integrated, you'll often find that it's too long. When your content is ready: divide it by two! We all tend to be too literary in our explanations. Go for short, effective sentences as much as possible.

Measure the Effectiveness of Your Landing Page

It's important to monitor whether your landing page works well online: do you convert leads? To measure its effectiveness, you can use the Google Analytics tool.

Let's Recap!

You are now able to create your landing page. Here are the different steps to remember.

For the background:

  1. Think about your storytelling.

  2. Develop a customer journey.

  3. Write the content.

For the substance, design your landing page:

  1. Create your mood board.

  2. Choose your colors.

  3. Choose your template.

I suggest that you put your knowledge into practice with the following quiz. And we'll meet in the second part to learn how to create your first hacks using the conversion funnel. 🔥

Example of certificate of achievement
Example of certificate of achievement