Planning Phase 2/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!
- The Brief (client conversation(s), project details, goals, and timeline)
- The Planning Part 1 (theory of what works with landing pages)
- The Planning Part 2 (why the theories work)
- The Design (color, visual elements, typography, rich media, UX)
- The Development (accessibility, framework(s), MongoDB, functionality, performance, markup)
- The Launch (testing, live server, QA, analytics)
- The Maintenance (A/B testing)
Introduction of CCD (Conversion Centered Design)
Professor Greyson walks into the lecture hall.
“Now that you’re all experts on the theory of why landing pages are great for conversion and serve as a much better place to send users from acquisition than your site’s home page, we’re going to dive into the actual why.”
In a sarcastic, but playful manner, the professor walks up the stairs and begins speaking directly to a student slouched in her seat. “Ms. Allison, in your multiple decades of experience, what three things are most important when designing for a landing page?” The class snickers at the professor’s mockery as he begins to walk back down the stairs.
Pretending to be plastic with a Southern drawl, “well, I don’t know about my decades of experience, but in the first line of your notes for today, it said something like, ‘hold their attention, put things in context, and achieve clarity,’ but maybe I’m just speaking from my decades of experience,” retorted Allison.
The professor’s descent down the stairs comes slowly to a stop. He looks down into his hands and begins to actually tear up, “Allison… The omniscient Allison read my notes! She really read my… ” The professor’s lips breaks into a big grin, “Allison, I didn’t know you could read.” This gets a pretty good chuckle from the class, but the professor stops them short. “However, as usual Ms. Allison, you are correct, but for the sake of the class, don’t let it go to your head. We’re already struggling to breathe at its current size.”
Four Keys of First Impressions
“Now, part of holding their attention is a great first impression. Who can tell me the four keys of first impressions?”
“Sir, the four keys to a first impressions are a clear headline, a well-thought out design, appropriate visuals, and a strong call-to-action,” stated Daniel.
“and why are they so important to get right before anything else?”
“The first impression hits the page visitor before the page’s content.”
“Excellent. Thank you, Daniel,” the professor extends a hand towards Daniel as a recognition of the correct answer, “throughout class today, we’ll be covering what makes these four keys successful, so please follow along closely.”
1:1 Attention Ratio
“As we know, a landing page should only try to accomplish a singular conversion, but every element, whether an image, button, text, or illustration, should contribute to holding the visitor’s attention until they’re ready to convert. The first step to doing this is ensuring our page has a 1:1 attention ratio, which is what Daniel explained last week. We want to make sure the user can only do one single thing on the entire page, or create a 1 to 1 ratio of the number of things the user can do to the number of things the user should do.
This is why a landing pages serve as amazing marketing tools. At a marketing event, fundraiser, whatever, the marketing team should be focusing on getting one thing from the users, and having a landing page that lines up with that one thing both reduces distractions and drastically increases conversions, because the landing page continues the same message in greater detail from the marketing acquisition.
This brings up a great question. Who can tell me what element we should remove on our landing pages that should always exist on our main sites? I have one specific answer in mind,” ask the professor.
“Social media links,” blurted the boy in blue, yet again.
“That’s not totally incorrect, Mr. Harrison, but can you think of when we’d want social media links on our landing page?” challenges the professor.
The students can see Mr. Harrison struggling, and one student comes to his rescue.
“Sir, I apologize for interrupting, but wouldn’t social media links possibly increase conversion if we included them in the “you’ve successfully converted” notification to the newly converted visitor?” Although the question was not directed at him, the professor knew this student was always one hundred percent focused on his lectures and he deeply respected this.
“Mr. Nolder, rescuing your classmate, are you?” the professor asked with a grin, “however, you are most likely correct! Putting social media links in when the visitor has successfully converted provides him a way to share the experience in the moment, which is great! I’m still looking for something else, though…” The professor looks off into the back of the classroom giving Mrs. Winslow a hint.
“In my experience, removing the navigation caused a significant increase in conversion. If I remember correctly, I believe it increased conversions by no less than one hundred percent in three different pages*. However opposite to that, while I was working for CrazyBanana, we once saw an increase in conversion by using the navigation as a way to navigate the landing page when we had multiple places to complete the conversion throughout the page,” jumped in Mrs. Winslow.
“Which is kinda weird, right? The navigation is an integral part of a webpage, but in the case of landing pages, it has serious potential to hurt our attention ratio. So, what else can we do to hold their attention? Let’s rapid fire these. Ready, go!” clapped the professor energetically.
Removing Stock Images
“You could remove stock images!” yelled a student from across the hall.
“and why in the hell would we want to do that?” demanded the professor, but with a pleasing smile.
“Removing stock images would increase user trust, the page’s authenticity and uniqueness, and improve the value of the brand,” the student quickly responded.
Personalize CTAs (Call-to-actions)
“Make your call-to-actions speak to your visitors!” blurted Mr. Harrison.
“Mr. Harrison, how unexpected! And how we can do this?”
“I read that if you use more personal and unique text on your call to actions, instead of like, ‘submit’, you can increase your conversion rate by a few percent… And, and by using colors that standout from the rest of your design helps bring attention to your call-to-action as long as it’s not crowded,” Mr. Harrison nervously spouted.
“Mr. Harrison, if you’re going to be correct in my lectures, you’ll speak more confidently. Do you understand? Good. Also, minimize the effort the visitor must apply to complete your call-to-action, such as the number of inputs in a form. Alright, good Mr. Harrison, next!” with an approving nod from the professor.
“Incorporating videos can help you not only increase conversion, but increase time spent on the page and better convey your message to some visitors who may not want to read a lot of text, especially when your product or service is complex or new.”
“Fantastic! Someone give me one more.”
Include Social Acceptance
“Including social feedback, such as tweets or Facebook reviews, can help reassure visitors and remove the stress of feeling like the first person to jump onboard with a product or service.”
“Outstanding. Just outstanding. Well, I guess that’s it for class… just kidding! Now that we’ve got the visitor’s attention real good…” the professor smiles at his sudden change in accent, “we need to put information into context for him.”
The professor walks over to the bottom lecture hall doors, steps out, and comes back in a minute later with a beautiful woman following at his side. The woman has long, smooth brown hair, modern glasses on, and an outfit that says, “I’m professional, but I’ve been doing this long enough that I can wear what I want.”
With a slight push with a hand on her upper back, the professor pushes the woman front and center and announces, “newbies, this is not-newbie. Some people call her ‘Hannah,’” as he grins as he leaves center stage.
Hannah turns to the professor, gives him a sarcastic, but playful smile.
"What are you all looking at?” screamed Hannah!
The class literally shifted from googling at Hannah to retreating into the very souls of their seats.
“I’m sorry! I’ve always wanted to do that!” Hannah let off a childish, joyful laugh. “Your grouchy, sarcastic, and sometimes rude professor has asked me to come and speak with you about the last two parts of conversion-centered design. Part two, being…” Hannah stopped, because she saw looks of confusion on the students’ faces. “You did tell them what conversion-centered design was, right?” Hannah snapped at the professor while squinting one eye as if expecting this.
“Oh, class, I forgot to mention that the how to the theory of why things work with landing pages, is often referred to as conversion-centered design.” The professor smiles, looks at Hannah, and retorts, “yeah, I told em.”
Putting Information Into Context
Hannah throws her head in the air, looks back at the students, looks back at the professor, and continues, “part two of conversion-centered design, or CCD, is putting information into context. There are two main questions you absolutely must answer. Number one, how much does the visitor know when they arrive at your site? And number two, what do they need to know to convert?”
Hannah begins walking up the middle lecture hall stairs, “number one requires you to answer the following question, ‘where did the user come from?’ Answering this question will answer the big question, which again, is ‘how much does the visitor know.’ So, for example, let’s say the professor is selling books, which he has a huge collection of by-the-way, and he decides to put fliers up all over campus as the only source of advertisement. Every visitor who visits his landing page to buy his books will know the exact same information, because he knows what information was on the flier, or the acquisition method. This allows your professor to keep the main message singular, expand on the information the visitors already thought was interesting enough, and maintain his branding and identity throughout the user experience. I hope you can see how simple the concept is, but obviously, it gets more difficult when your acquisition methods get more complex and numerous.
Now, for question number two, ‘what do they need to know to convert,’ you have to make assumptions on what the visitor needs to make a conversion. This is tough, because there isn’t a always a single correct answer, but if you continue to experiment, you’ll find better performing answers for your intended visitors.
Are there any questions?” Hannah asked welcomely.
Allison stands up nervously, “Uh, the professor has been down our throats about keeping the message singular from acquisition to our landing pages, but how do we do that exactly? How does the visitor get the feeling that he’s at the final destination of the process?”
Hannah couldn’t tell who was more surprised, the professor, Allison, or the rest of the students, but she didn’t quite understand why it was so shocking for this girl to speak up.
“Well, that would be part three of CCD. Achieving clarity.”
Hannah walks to the doors she came in from, grabs a bag from around the corner, and takes out two pieces of paper. She walks up the stairs and down Allison’s aisle until she’s standing a few feet from her. “Here are two pieces of paper with the same information. What are they about?” She raises both pieces of paper to Allison’s eye level.
“Writing powerful headlines.”
“And how did you know that?”
“This one has a really big, readable headline and overall, it’s formatted with headings, subheadings, and lists.”
“So, it’s more scannable with a powerful headline right where your eyes start reading? You’re saying you can see the important pieces of the content at a glance?”
“Yes, I can.”
As Hannah begins walking back down, “seventy-nine percent of web users scan the page instead of reading it word for word. What does this mean? It means that you absolutely must have great information hierarchy, headlines, and clear copy. Who can tell me what makes good information hierarchy?” asks Hannah as she turns around.
“Good hierarchy would show proper flow of information and connections between each sequential section, while the most important elements having visual dominance over less important elements.”
“And what makes a good headline?” Hannah smiled at the student with the answer and gave her a strong thumbs up.
“The headline should in as few as words possible completely clarify what the page is about. If needed, a subheading should make the headline even clearer, such as with a new or complex product or service.”
“Absolutely correct, and do we have anyone with experience as a copywriter who can answer the question of ‘how do we balance clear copy with clever copy?’” Hannah scans the room looking for an experienced individual.
Mrs. Winslow stands, “Ma’am, I’ve always followed the rule that if you have to choose one, chose clarity, but if you can balance light humor with a clear message, it will be guaranteed to outperform solely clear copy*. What you have to make clear to your visitors is where they are, what they can do, and why they should stick around. A good way to start is to write clear copy and then slowly try to make it slightly clever. If you can accomplish the last steps, you’ll greatly increase your ranking in SEO even though it’s not a directly trackable metric.”
“Very good.” Hannah looks at Mrs. Winslow very curiously and intently, “what’s your name, ma’am?”
“Anna Winslow, Ma’am.” responded Anna with a nervous smile.
“Are you currently employed, Anna Winslow, because I have been looking for someone to assist me at my current job at Hoogle and I’d love to talk to you about it.” The class could hear how serious Hannah was by the tone of her voice and the seriousness of her expression.
With the entire class blindly staring at Anna, “I have a part-time job, but I’d love to speak with you!”
“Hey, hey, hey! Before you steal any of my students, finish the lesson you ole’ nag!” blurted the professor as he began to stammer into Hannah’s spotlight.
Furiously, but with a friendly smile, “who are you calling an ‘ole” nag?’ The nerve on your professor… But to finish up this lesson, the test you can do to check for clarity is an old one. Squint at it. If you can squint and understand what the page is about, you’re on the right path.
So, I’ll leave you with the best advice for any type of uncertain work — just keep experimenting. That’s all I have.”
- Removing the Navigation - Yuppiechef saw a 100% increase in conversion (3 to 6%), Career Point College saw a 336% increase, and SparkPage saw a 91% increase.
- CopyHacker — The Great Copy Debate
This weekend, I’ll be taking you through the design of the landing page my friend came to me for. If there is anything I’m really terrible at, it’s designing things. I’ve always been great with theory, strategy, and development, but hand me the responsibility of a designer’s job and BAM! I break stuff. So, prepare yourself for the end of the world.
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