Back to blog

Planning Phase 1/2 - An Amateur’s Process for Building a Landing Page

You’ll find a few narrative stories within this post — let me known your thoughts on those sections in the comment below!

If you’re looking for a real in-depth look at building a landing page, then this is for you!

Post Series:

  1. The Brief (client conversation(s), project details, goals, and timeline)
  2. The Planning Part 1 (theory of what works with landing pages)
  3. The Planning Part 2 (why the theories work)
  4. The Design (color, visual elements, typography, rich media, UX)
  5. The Development (accessibility, framework(s), MongoDB, functionality, performance, markup)
  6. The Launch (testing, live server, QA, analytics)
  7. The Maintenance (A/B testing)

Why Landing Pages

The bell rings and students settle into their seats in the spacious lecture hall.

A well-dressed man walks into the room speaking loud enough that the entire lecture hall can hear him clearly, “a close friend comes to me and says, ‘Greyson, I’ve got a fundraising event that I’m throwing at my unit to raise money for our ball this year. We’re having a 5k race or some sort of team event friends and family of my marines will be able to participate in. Would you be interested in setting up a Facebook page or website to let people sign-up in advance?’ Being a close friend, I agreed, but tell me, why is a landing page a good solution to my friend’s request?”

Silence filled the hall. The well-dressed man, now obviously the professor, continued to stand silently waiting on the students to participate. However, the students weren’t use to being demanded participation. Finally, a student in the back spoke up, “your friend’s need is singular, which works very well with a landing page, because limiting the amount of options your page visitors have, or your attention ratio, generally leads to higher conversion rates.”

“Very good, Daniel, but why does it increase conversion? Why does limiting your users options help you increase the numbers of users who do what you want? Someone else.” The professor continued to demand attention and participation.

This time only a short period of silence stood until, “when you limit the options your user has, it allows them to focus on the information and funnel you’ve laid out for them. The more options a user has, the more likely they’ll be confused, pulled astray, and distracted from why they are on that page. Ideally, your user should only be able to do one thing on the entire page, which is the one thing you want them to do. We refer to this as a 1:1 attention ratio, as Daniel mentioned.” The one who spoke up, a girl of obvious intelligence and experience, set back as if she had just ate a very large, very satisfying meal. To the girl, the meal she just ate was the professor.

“That would be correct, Ms. Allison. You’re as humble as ever, I can see. Now, as much as I hate acknowledging Allison and her oh-so-humble attitude, she put it perfectly. However! There is much more to this journey if you want to design a high-conversion landing page.

A canyon river in a green rainforest
River amongst a vast rainforest

The path to a high-conversion landing page never ends.

So, where do we always start in any creative field? Just like a relationship’s first base, what’s the first base of UX and design?”

Understanding Your Audience

“Our audience,” blurts a student mixed in the crowd of a now focused, eyes-open class.

“Correct, Mr. Blue Shirt! Besides demographics, you must know two things. One, where are your visitors coming from? And two, what are they looking for when they get to your landing page? What do they want to do?

Both are pretty easy. Landing pages are most often used in conjunction with a marketing campaign. Let’s say our imaginary, super-awesome, non-spammy campaign is solely putting ads in the Instagram feeds of their followers. The marketing team of our imaginary, super-awesome, non-spammy campaign now knows exactly where users are coming from and what users know, and possibly want, when visiting the landing page linked in the ad. And since I know Allison is dying to know, I’ll tell you how. first, the team is controlling the source of traffic to their landing page by only marketing in one place. Second, the ad’s copy and CTA grabbed enough user interest that they clicked on it, which tells the team users are looking for more of what they already saw.” The professor pauses, looks around, and notices that the students seem to be grasping the information so far and decides this doesn’t please him, because his experiences said lectures were suppose to be confusing, “answer this, why is knowing where they are coming from so important?”

Silence. A few students even looked around at Allison to see if she had an answer, but she remained quiet. To the surprise of some of the students in the back, a woman in her forties stood up and confidently stated, “If you know where your traffic is coming from and going to, you can create a singular, defined message across both platforms, which will build user trust, reassure the user is going to find what he’s looking for, and lead to much higher conversion rates.”

“With age comes wisdom, does it not, class? Mrs. Winslow hit the nail on the head. It’s incredibly important that your landing page visitors are finding the same message that brought them, and if you don’t have control over all the traffic sources to your landing page, you must ensure that your headline clearly tells the visitor what your page is all about… I’m quite impressed with you all. You’re keeping up, so let’s kick it up a bit, shall we?” The professor leaves the room and comes back in with two stacks of paper. He hands one stack to the left side of the room and the other to the right.

“Please begin passing them back, but not across the room.”

Students, unknowingly, begin to possess one of two versions of a quiz.

“You all have 5 minutes to complete the quiz in front of you. Begin.”

The professor immediately grins. He looks to the left side of the hall and sees students clearly tearing through the quiz at a rapid pace. However, the entire right side of the hall is definitely lost in the sauce. They’re looking at each other, trying to sneak in questions, and some are even raising their hands.

“No questions are allowed. 2 minutes left.” A wicked smile crosses the professors lips.

The left side is finished, while the right is a mix of confusion and rushing.

“And time is up! Quizzes down. Who can tell why the right side struggled so much on a quiz with the exact same answers as the quizzes on the left?”

Completely confusion. The right side students begin looking around as if the professor is crazy, but after a period of silence, Allison speaks up, “if the answers are the same, then you must have changed the text on the right side’s quizzes to be more difficult to read.”

The professor looks down, again hating to acknowledge her, “You are correct once again, which hurts to say by the way.” The professor walks over to his computer and turns on the projector. The students, while waiting a bigillion minutes for the projector to turn on, see two different documents on the screen. Obviously, these documents are the quiz versions. The students on the left literally began to chuckle and a few laughs even erupted. The students on the right felt a little cheated.

“Don’t worry. These quizzes aren’t for score. You see, the text, or copy, on a page can drastically change not only the outcome, but the experience of the outcome. Unless I’m mistaken, none of you are professional copywriters, but as designers, you should still have a say in the copy writing process. There are only two things you need to focus on: long vs short copy. Mrs. Winslow, I believe you have experience in this area, could you shed some light on the two in comparison?” As sarcastic and odd the professor may be, the students began to see that he really knew, and maybe even cared, about his students.

“I’d be delighted to! Long copy has the potential to answer questions a user may have before purchasing or converting, which streamlines and reduces the cost of the entire process by avoiding direct support, but it also works better when users perceive a larger or higher personal risk, such as money, time, or effort, because it reassures the visitor of the advantages over the potential risk(s). Generally speaking, the more required of the visitors, whether money, time, effort, and the more new or complex a product or service is, the longer the copy should be. However, short copy is great when their is low perceived risk, conversion goals are impulse-driven, your company or product is already well known, and when visitors already know what they’re looking for…” Mrs. Winslow trailed off, deep in thought, but before the professor could speak up, “my last boss used an acronym for the basic parts of copy you should focus on regardless of whether your copy is long or short. I think it was ‘H.S.M.N.’ or ‘Headline. Sub-header. Must-know information. Nice-to-know information.’ The idea was to ensure that your copy and design elements divided and separated these parts to make them both visually-appealing and scannable.”

“I have nothing else to add except ask ‘what’s something you should have throughout your landing-page, especially if you have longer copy or multiple page sections?’ … Call-to-actions. Place the same CTAs throughout your page at the end of each separate section, because once you’ve persuaded your visitor, you want to give them immediate access to what they want.”

The professor pauses, begins pacing back and forth, shaking his head, and acting a little agitated.

“Competition! I knew I was forgetting something! before you go, the last thing you should do before planning the design of our landing page is take a look at the competition. Simply put, ask yourself what they’re doing. Are they using long or short copy? Are they using images, illustrations, icons, or creating a sales funnel? Just remember, regardless of what they’re doing, you don’t know how well it’s working, so you have to decide how far you want to stray from the industry norm, which is something I can’t really teach you.”

The professor walks to the center of the room and up to the first row of seats. He stands, looks out among his students, and then throws up his hands as if saying, “poof, be gone.”

The students remained seating until they realized the lecture was over.

What’s Next

Next week, I’ll be going over the planning you should do before jumping into designing. If I’ve learned anything in the past month, it’s that jumping into designing without a detailed plan is a terrible, timely decision.

I hope you enjoyed this… different type of presenting information. It’s my hope that a narrative format will help you retain what I have to share in a more enjoyable and efficient way. Please don’t be afraid to like and share this post!

You can find me at @chrisjohnsoct on Twitter!

It’s a goal of mine to be the best UX strategist and frontend developer in the world. Will I be the best? I don’t know, but I’m sure as hell going to share my journey with the world, and this post has been apart of that.

Chris Johnson, CEO of Hack It Hour, UX strategist, and frontend surgeon

Weekly Blog Newsletter!