I want you to join me in the fight --> the fight to get dead weight off landing pages everywhere!
It sounds like a big mission - but it can be done by following one simple principle:
Every element on your landing page should be the best use of content possible to push your visitor towards your landing page goal.
How do you figure out what the 'best use of content possible' is?
Step 1: Figure out what the one goal of your landing page is.
Step 2: Go through each page section and ask yourself... Is this the best possible use of content and page space to get a visitor to [insert landing page goal here]?
More...
Theory Into Practice
As part of a Christmas giveaway to our members, we redesigned 5 of our member's landing pages. The focus was to optimize them for conversions. FITAthletic Houston was one of the lucky winners of a redesign.
The goal for this landing page was to get visitors to sign up to a 3 day free pass.
Below is the original page. As you look through it, ask yourself if each section is the best possible use of content and page space to get a visitor to sign up to a 3 day free pass [landing page goal].
FITAthletic Houston's original landing page.
Did you spot any areas of improvement?
Here's what we came up with, and what drove the changes in the remake...
Too Many Different Calls To Action
You'll notice at the very top of the page there are a lot of options. After a brief moment feeling like a kid in a candy shop, the visitor is left with decision paralysis. Should I watch the video? Go for the $0 initiation offer? How about that free pass?
The only choice the visitor should have to make is whether to to get the pass or not.
That being said, we are not against videos on landing pages, as long as they push the visitor towards the landing page goal. The video on this original page was not related to the free pass, and said nothing about the gym or its point of difference.
Not Enough Differentiation
Why would I want a free pass at FITAthletic as opposed to that other gym I'm looking at down the road?
While throughout the page they highlight the great features of the gym, most of those features are available at just about every other gym out there. There's not a lot to say why FITAthletic Houston is different or unique.
With a free pass being a fairly common lead generation offer with gyms, it's important that the page highlights why a free pass with FITAthletic Houston in particular is such a great opportunity.
Misuse of Page Real Estate
Space on a landing page is precious. You only have so much of a visitor's attention span to hook and reel them in. Every single part of that landing page should be a home run in terms of convincing a visitor to [insert landing page goal here].
If it isn't - leave it out. Use that space to put something more potent in, or just shorten/intensify the page by leaving in only the most impactful elements.
You'll see in the original FITAthletics page the sunset time-lapse takes up almost one fifth of the entire page. While granted, it is a nice sunset, it really isn't the best use of landing page space. It's one really small benefit taking up a HUGE chunk of importance on the page.
The Remake - Simple & Potent
Let's take a look at the landing page remake, focusing on a single Call to Action, copy focused around what makes FITAthletic different, and intentional use of page real estate.
FITAthletic Houston's landing page remake.
Note: Ideally we wouldn't have the 'VISIT FULL SITE' link at the bottom, since you don't want to give the visitor any other option but to sign up for the free pass. We left it in so our contest winner could decide whether they wanted to keep it in.
Are You Going to Join Me?
So how about it, are you going to join me in the fight to get dead weight off landing pages everywhere?
All you have to do is go through your own landing pages and ask yourself: Is this the best possible use of content and page space to get a visitor to [insert landing page goal here]?
Let us know if you find these kinds of page remakes useful, or if you have any questions about how you can make your own landing pages as potent as possible.
Great job done!
Thanks Johan!
Thanks Stephanie. These makeovers are always helpful irrespective of the industry being featured. Is there any chance you could look into putting something together that would help ( me) use Thrive to customise the pages of a Learndash LMS site? There’s info ‘out there’ on using Divi with Learndash but I don’t want to switch. Thanks again 🙂
Great content idea Luana, I’ll float this with the team and see what we can do 🙂
I’ve said it before and I’ll say it again….you are the answer to a non techie’s prayer. Thank you 🙂
I am also interested in how to use learndash with thrive arquitect
I am currently building my LMS with LearnDash, Social Learner and Thrive Architect. I didn’t want to use Visual Composer that comes with Social Learner because I’ll be building my other sites with Thrive and only want to learn one page builder. However, it’s been a bit of a learning curve and a clear tutorial like the one above on how to use TA with LD / SL would be a good topic as this combination is very popular and could help a lot of people.
OK great thanks for the feedback Chris
Hi Chris. Any chance we could have a chat / Zoom/ ? We’re both on the same path so maybe we could be of some help to each other?
Sure! Love to. I’m in the UK on GMT where are you? How to you want to connect?
Hi Chris… That’s great and I’m in the UK too, near Cambridge. You can find me on Skype …. luanamattey …. and I’m fighting with Learndash as we speak 🙁
Hi Chris, how are you getting on with Learndash and Thrive Architect? I cannot seem to use landing page templates on my Unit posts.
You provided very clear explanations about what needed improvement and especially “why” it needed improvement. The new version was clearly much better and targeted. After watching many of the Thrive Themes critiques, I’m getting the hang of doing such reviews on my own sites and landing pages. Thanks Stephanie!
Great Randal. That being said, it’s always easier doing it on other people’s landing pages!
Great tutorial, Stephanie. I always enjoy these.
A few things I’d add to the above-the-fold section:
– Their logo to the top bar (it’s now only present in the picture of the 3-day pass). It’s a trust element. People are used to seeing a logo in the top left corner, the FIT has a kind that looks pro and legit. I don’t see a good reason to ditch it.
– Make the “3-day pass” look like a plastic card that actually looks like a pass.
– Make that card of the colour gold (to play off your headline, “the golden ticket).
I absolutely love how your found a way to logically connect the two offers. Not only does it remove the confusion, it also makes the free 3-day offer more attractive. All the visual stuff aside, IMO this was the biggest problem and your solution for it is very elegant.
Hi Alex, Good points. Having a gold looking plastic card would be a good one to test!
Although I do not offer fitness offers, my autoresponder is also labeled VIP club (as it resonates so good within my niche). Your “card idea” is a perfect idea to test. THANK YOU!
@Stephanie: Amazing walkthrough (as always!) 🙂
Thanks Philipp, let us know how the test goes!
Having one goal for your landing page makes things so much simpler! This is a really smart tip of those who are just starting a website and I think it will help them cut costs on start up. Getting rid of that dead weight will make it easier for users as well. Thank you for sharing!
Hi Dennis, I agree, any way you can increase your conversions on a page (especially one you’re sending paid traffic to) helps get the most bang for your buck.
Hi,
Very very good demonstration.
Did you use the same base thrivetheme or did you have recreate an over page ?
Thanks
Hi Pascal,
We built this Landing Page from scratch using Thrive Architect 🙂
Great before and after video. Clear. Precise. Just long enough to get your points across. No wasted motion.
Thanks John!
Thanks for this! I noticed a link for “view full website” at the bottom. Is this something you’ve found helps conversions generally? Or do you think it’s usually enough to just have the logo in the top left send the user back to the homepage?
Hi Benji, I mention this in the article just below the remake. Ideally we wouldn’t have the ‘VISIT FULL SITE’ link at the bottom, since you don’t want to give the visitor any other option but to sign up for the free pass. We left it in so our contest winner could decide whether they wanted to keep it in.
A very good clear description. Very helpful – Thanks!
Thanks for watching Chris
Great tutorial as always, Stephanie! Make-over tutorials are always very useful. Im strictly “online” but any types of landing page make-overs are so helpful for a newbie LP-diy’er like me!
Thanks! 🙂
Ok great thanks for the feedback Karen. We’ll try and get a few more make-overs out 🙂
I get the idea and love the thought … our site, also links our students to all of our schedules, pricing, etc etc. Would you recommend a different landing page for the free pass and promote that page? If our page is to bring in new students how do I get our members and out of town guests to our schedules etc? Been thinking about this for a long time and I always get lost at this point. Thanks
Hi David, I think the way you have it now is fine for your homepage. The remake we did above was for a specific landing page leading traffic to the free pass, so it’s only goal was to get people to sign up to that pass. For your homepage you’d have quite a few goals/information you’ll like to get across to your visitor. Maybe you can advertise the free pass in a lightbox or as you do- at the top & bottom of the page.
Brilliant makeover. You’re so right about how conflicting the original multiple calls to action were. I like the logic and content of the new makeover. Everything now points to the 3-day pass.
The only thing I would change would be to make the top intro section more aesthetically pleasing – it feels a little dated in design, and needs more pop, possibly with a background texture, like in some of the sections further down. And including their logo in the top banner. But even if that wasn’t changed, I’m sure the makeover would smash the conversion rate of the original!
Hi Josh,
We’ve seen these kinds of designs often do better than the sleek modern designs, but it really does depend on the audience. It is for sure worth testing (good thing we now have Thrive Optimize :p) – end of shameless plug 😀
Seeing another’s perspective is very eye-opening. Things I thought were fine before the makeover I now see as an inefficient use of space. Thanks for helping me “see” things differently.
But I do have one thing that I’m still not sold on, namely, the large video of the sunrise. I agree that it took up too much space by default. But the video itself makes sense to me. After all, they’re trying to highlight the beautiful skyline of Houston and what perspective the customer would get by working out at their gym, as opposed to another gym down the street that only has a back ally or the side of some brick building to look at. It’s a “curb appeal” kinda thing.
Why was that video taken out completely instead of just resized or even turned into a link that could open the video upon clicking it?
Hi Joel,
First off, thanks for sending in your page! We loved working with it and it was a great base to start from. Not that much to improve to be honest, just the little stuff.
Yeah I agree, I was thinking of mentioning that. Maybe in the locations section have the video instead of the still picture. It definitely is a differentiation factor so it is worth keeping on the page in some respect, just not as big 🙂
Awesome! thank!
Thanks Diego
This stuff is good. At first glance, the original page looks good with the design layout. I couldn’t find much fault. Thanks for showing us.
True Cheefoo, looks nice and optimized for conversion are often grouped into the same category, but it’s not always the case 🙂
Thanks Stephanie! That was great… very helpful.
Good to hear George
Nice changes, and the page looks great! One question, considering the high % of mobile traffic, was there a strategy behind not including a click to call phone number at the top of the page?
Hi John,
The conversion goal for this landing page is to sign up to a free pass, and even on mobile it’s possible to fill in all their details to get a free pass, so a click to call button seems like a bit of a deviation. But definitely worth testing.
Great stuff, learned alot
Great Adnan
Really wanderfull and top will you help me to do mine
Sorry Mohammed, we don’t do consulting 🙂
Great work Stephanie good clear description. Very good helpful
Glad it helped Priyanka
I’m interested in why is not video on landing page?
Hi Tamas, while videos are a powerful tool to use on landing pages, we didn’t feel the content off the videos actually pushed the visitor towards the conversion goal.
very helpful Stephanie, making it clear and simple works really well, great video
Thanks Ramesh
An interesting and useful article, Stephanie.
Bit of a tangent, but I’m very interested in how, technically, you did the diagonal lines behind (and in front of) the new ‘certified trainer’ photos.
Can’t view:source on a screenshot! Also be interested to hear if it was done in Thrive Architect. I use some Thrive tools but tend to code my CSS layouts by hand.
Ahh the old view source trick, one of my favorites 😉
I’ll try and explain this as non-confusing as possible Geoff… So I dragged in a three column layout, added content boxed in each, changed the content box background colors to purple, set a minimum height for the content boxes so they were roughly square. Then went down to the ‘decorations’ drop down within the content box options and set a slanted decoration for the bottom of each of the content boxes. Then used negative margins to overlay the pictures half way on and off the purple slants and aligned the pictures so they’d cover the bit where the slant resets.
I hope that makes sense. If not, have a play around. Challenge yourself to build it, it’s the best way to learn (then ask here if you’re still stuck :D).
First off, I just wanted to say Thank you for taking the time to put this together and also for all the other commenters that have added additional insight and perspective. I am really thankful for it all. It is always great to see examples and comparisons.
I enjoy the video tutorials !!
Thanks again!
Ayda
Thanks Ayda!
Loved your analysis and the remake, which got me thinking about something I’d like to achieve for a landing page.
Have you seen those video or animated backgrounds some websites have?
How can I build something like that using Thrive Architect?
As always, your guidance will be most appreciated.
Thank you so much in advance Stephaine.
Hi Luis,
Here’s a tutorial on how to add a video to a background section in order to get the effect you’re referring to. Skip 1.34mins into the tutorial.
nicely done…
what was the impact on the conversion rate since the redesign?
would be nice to polish up the line height issues on that page 😉
Hi Ted, we’re waiting to hear back about the conversions, the redesign was only done a few weeks ago. Also I think they’ve only implemented a few of the changes, not all. But yes, I agree, it would be very interesting to see the impact of the changes in hard data rather than opinion 🙂
Stephanie, really enjoyed this makeover video for its simplicity and conciseness. Particularly handy as we’ve a couple of landing pages in the pipeline. This might be a little off tangent, but I’m planning to embed videos in our upcoming landing page and I’m curious to know what application you use to edit this video. I particularly liked the feature that allows the presenter view to minimize/maximize and go to the bottom left/top right, etc.
Hi Thio,
Our in house video editor actually made a tutorial on how to create the presenter in a bubble effect because we had so many people asking about it!
He uses Premiere Pro and After Effects to edit all our videos.