A landing page is a webpage that prompts the visitors to take certain action. Whether the business wants you to download its ebooks, sign up for its upcoming webinar, sign up for a trial, etc. The goal is to let the business sell or capture leads.
A landing page is different from a homepage in that a homepage usually shows business overview with a bunch of links that link to other pages, whereas a landing page has fewer links with usually one primary CTA (Call-to-Action) button that wants visitors to complete a specific goal.
(Depends on the business, a homepage can also be a landing page)
I bet you’ve seen a landing page before; it’s everywhere.
Like the one below I found on Facebook:
The reason why I want to analyze and design a landing page is because I’ve been singing up for a bunch of webinars, “3-part-video-series”, and ebooks these past few years, and I really want to know what makes a successful landing page (and what not).
So, this is going to be a bit of a marketing mix with UX kind of post.
Landing Page Structure
I picked some websites from each source (total 6 examples) and wireframed the layout.
VideoFruit’s landing page is very clean with prominent CTA buttons. The “get your first 100 email subscribers” benefit seems a little bit dark with the background, and the logo is a bit blurry as well. But overall the page hits the point.
Muzzle is a Mac app that lets you silence embarrassing notifications when you’re screen sharing.
I strongly suggest you check out the website even if you’re not downloading the app.
IT IS HILARIOUS.
Since the page wants users to download the app, the link for the other product (CodeKit) is not as prominent as the “Download” CTA. The notifications on the right is a great example of show not tell. It adds much more personal and relatable flavor to the entire brand.
The header, “DON’T MAKE ME ZOOM”, speaks right to the users’ pain point. The images also help illustrate (no pun intended) what this free guide is about.
4. Amy Porterfield
I’ve been following Amy Porterfied’s work for a while. If you are into online business and online entrepreneur space, she’s definitely one of the people you need to check out.
Anyways, the landing page is clean and simple with no other outbound link except the CTA. One thing I would test is to switch the second text box (“Want to Create a Profitable Online Course?”) with the first text box (“In This Master Class You will learn”) because the second text box seems like a more general overview of what the master class is about.
Extremely simple landing page. I’m not sure what the “85% of my hottest business hacks” is about, but the text under the CTA and the testimonial help clarify the page’s purpose.
Again, a very simple landing page with a video that further describes the free training. The CTA button is the only prominent, clickable item on this page. However, I would add the same CTA section again down the bottom after the last testimonial, so visitors don’t have to scroll back up to the top to find it.
(I’ve actually taken The Copy Cure paid class, and I’d say it’s definitely the best copywriting online course I’ve ever taken. Fresh approach with great writing tips!)
Commonalities Between Successful Landing Pages
Now you’ve seen some good landing pages, let’s see what those examples have in common. (Some landing pages above are also the homepages)
- White space– A lot of white space. You can see that most of them have a lot of breathing room for users to read easily. Whitespace increases readability and visual hierarchy.
- Few links– Since the goal is to capture leads, you don’t want visitors to be distracted with links and options that may not lead to conversion. Some examples above are also the business’ homepages so they contain additional navigation options. But an effective landing page usually consists with one clear CTA and very few links.
- One Prominent CTA– And make it easy to see.
- Brief, concise, catchy but not salesy copy– As you can see from the above examples, the copies around the CTAs are right to the point. If you have extra content after the CTA that requires several scrolls, make sure you duplicate another CTA button down the bottom.
- Social proof/Testimonials- A great way to establish authority and trust.
- Image– If you want to include images on the landing page, make sure they are relative to the product that you’re offering.
- What/Why/How– What are you offering that solves my pain point or satisfies my desire? What are the benefits? Why YOU? (personal stories, how you’ve overcome the challenge, testimonial, etc). How are you going to solve my pain point?
Rule of thumb- avoid using language that doesn’t resonate with your audience.
Now Let’s Craft One
Let’s say I’ve created a study guide on how to successfully teach yourself Japanese (I taught myself Japanese for years BTW), and I’d like to put it on a landing page for people to download so I could build up my email list at the same time.
First things first, you need to incorporate some design thinking.
Talk to Users, People, or Potential Leads (Empathize)
In my case, I need to talk to people who study Japanese, which I’ve been doing for a while unintentionally because I love attending Japanese conversation meetups and doing language exchange.
Based on years of talking to Japanese language learners, a lot of people I found were struggling with:
- Colloquial/conversational Japanese
- Kanji (Chinese characters)
My study guide could help learners who wanted to improve their speaking and listening skills because those were the areas that I overcame. But not Kanji since I’m a native Chinese speaker, learning Kanji wasn’t a struggle for me (and I know no magic trick to learn Kanji).
After figuring out some pain points, I made a persona that represented the audience I wanted to help.
A persona is a created figure that helps you focus on solving specific pain point. By talking to people, you get to know what language they use, what desires they have, and how your product can help them.
Your product is for a specific audience, not for everyone.
If You Try To Be Everything To Everyone,
You’ll Be Nothing To No One.
The Landing page (Ideate & Prototype)
With all the commonalities I observed, I tried to implement all of them into a landing page for my free, downloadable Japanese self-study guide.
I personally like the style that has clean first page (without scrolling) with minimal text and image. And additional content afterwards when I scroll down.
The high-fidelity wireframe looks like this:
*Note: I do not have experience in copywriting or marketing (although I’d love to), so I’m not sure if the copy is good enough. Please let me know what you think in the comment 🙏
The primary goals for my landing page are to 1)let visitors download the study guide, and 2) collect visitors’ emails.
Why collecting emails?
To build up my audience and potential leads.
After a visitor, let’s say James, downloaded the study guide, he’d receive the following message:
The interaction with the visitors doesn’t stop after they signed up/downloaded/purchased your product. You need to have some other CTAs, in this case “Back to Homepage,” to let the visitors explore more on your website.
If you have additional products, blog posts, or anything that you want your users to check out, you can put them on this page as well.
“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.- Nielsen-Norman Group
The next steps for you to do are to Test and Launch.
Since this is just a creative project for me, I won’t walk down the rest of the journey with you, but I wish you the best of luck with high conversion rate!
Reflection on This Project
I’ve been following numerous online entrepreneurs who constantly talk about ways to build online brand and reach more people. That’s how I got interested in UX design, digital marketing, and copywriting.
I’ve always wanted to do something related to UX and marketing, and I thought it would be a great experience to learn through analyzing and creating. I love the challenges I set for myself because they keep my creativity juice rejuvenated.
Anyway, this project gave me a brand new vision on what successful landing pages (the ones that convert) look like.
Although it is just a landing page, the strategy behind the creation is much more complicated than I’ve imagined. From page layout to copywriting to visual hierarchy, it really is a combination of UX and marketing.
It would be awesome if I could A/B test the CTA and the copy of the landing page. But hey, maybe one day I’ll put up a Japanese study guide, and I’ll share my results with you!