Guide to Funnel Design

#1 – Layout

Over everything, layout is one of the most important things to consider when designing your landing page.
You want to consider the physical layout ( how many columns / rows etc ) and the informational layout, which considers what messages in what order are being shown to the user.

At our agency, we follow a simple yet extremely effective system that we’e found increases conversions across the board: The EPC Method. (Educate, Proof, Community).funnel

EPC Method (Educate, Proof, Community The EPC Method is a rule of guidelines you should follow while designing your landing pages to ensure your message is clear and convincing.

It describes the ideal order and structure for your landing pages that will optimize the chance of a lead converting to a customer.

Educate

The first letter stands for Educate. This is where you educate the visitor on exactly what you do and what you sell / offer. Checkout the graphic on the next page to see how I leveraged different pieces of content on the page to educate the visitor on what was being offered:

Educate the visitor on what exactly it is you do You can use things like the benefits of the product / service, the processes behind it, and other sections similar to those to explain to your visitor exactly what you do.

The #1 goal of a landing page is always so the visitor knows EXACTLY what they ’re looking at within 3-5 seconds of landing on the page! That’s why it’s important to keep the E (educate) at the beginning of the page, to avoid any confusion.

Proof

funnel designThe second part of the EPC Method is Proof. Proof can be done by leveraging things like statistics and social proof logos (for example associations that your business is a part of, places you’ve been featured, etc) to establish credibility for your product / offer.

See to the right how I leveraged Proof to edify the page more and give the user more assurance that what they’re viewing is worth their time and trust worthy.

Community

Lastly, but definitely not least is Community.

When it comes down to it, everyone yearns to be a part of a group, and be a part of a community with people similar to them. Showing reviews, video testimonial, and social media posts from your customers can be seen as the key
to unlocking your customer’s buying threshold.

At this point, the visitor has been educated on exactly what your product / service is, and if they were interested they continued and came across proof on your website that you ’re trustworthy and your brand knows what it’s talking about.

The last confirmation these visitors need is to see that they ’re not the first to have tried your product/service. When you put testimonials and reviews on the page with FACES*** (make sure you include pictures of the person – increases conversions drastically), it gives the visitor a sense of community and ensures them “I’m not the first – other’s like me have tried this product and loved it. Why shouldn’t I?”

Planning – What makes your offer convert?

    • What is my product/service? (1-2 sentences)
    • What does my product/service do for the customer? (1-2 sentences)
    • What are the main 3-4 benefits of my product / service?
    • What sets my product/service apart from the competitors? (1-4 sentences)
    • What well-known brands / associations is my company affiliated with that I can leverage?
    • Do I have any statistics I can use to edify the claims my business makes?
    • Do I have any social media posts from past customer’s I can leverage to put on page?
    • Do I have reviews / testimonials I can put on the page?

Funnel Designfunnel sketch

I know what you’re probably thinking. “Do we really need to sketch out a funnel on paper? Can’t I just make it on the fly?”

Simple answer. YES! We do need to sketch it out!

Checkout the sketch → landing page below: (The sketch took me around 3 minutes to do and in turn sped up the process of creating the landing page exponentially)

Rest easy knowing I spend a maximum of 5 to 10 minutes sketching out funnels

Design Principles

When designing a funnel, understanding and implementing visual hierarchy is extremely important.

Visual Hierarchy is basically a set of rules that directs the user on where they should look first, as well as what messages should be digested and understood first.

Visual hierarchy takes form across many facets, from the thickness of your font to the contrast of an image.

You should keep the size of all your headlines, all your subheadlines, and all your paragraph texts across your design exactly the same to increase conformity, conventionality, and to keep it as easy as possible for the user to know what level of importance the information they ’re reading is.

Headlines

Your headlines should be the largest of all 3 text formats and shouldn’t be used too much on your site. You need to save this largest type text for your most important messages on the page, which you believe the user should see before ANYTHING else.

Generally, you want to keep this text format for the headline in your header, the first text the user reads. I suggest you use it in 2 ways:

1. Using the Headline Format for ONLY your header – This allows for you to get the full impact of what your header has to offer, as this will be the only text of it’s size on the entire page.

2. Using the Headline Format for your major sections – Using your headline format for your major sections (sections with smaller sections inside) and increasing the size of font even further for your header (to keep distinction between header and major section headlines)

Colors

funnel template

The next topic I want to talk to you about is choosing your colors correctly, and using them to drive your message home.

Checkout this personal trainer template I created for ClickFunnels ->

As you can tell, it has a very simple yet enticing and attention-grabbing color theme.

I accomplished this by sticking to two colors (red and black), and utilized the indigo color for my CTA’s so that they stand out on the page and are the first thing the user’s eyes are drawn towards.

It should be clear as day to tell which is the better one, but I’ll break it down.

The image with more space between the lines of text and button is much more effective at driving it’s message across because of the space it puts between.

It doesn’t muddle everything together like the other image, making the message trying to be driven across very unclear. They don’t know what to read first and have strain on the eyes trying to read when things are squished together!

Always remember to keep adequate spacing between your separate sections as well as your headlines and text, which will give the visitor a visual hierarchy on where to follow and what messages to read in what order.