Landing pages are extremely important whether you want to promote a new app you are developing, or growing the brand reach of your business.
It’s one of the most effective tools of the modern online marketer and it works, but in order for it to work you need to put a lot of effort and time designing it and constantly re-optimizing it for optimal results.
We could say that a landing page is like living a organism, even though it’s a “static” page typically, ironically it’s the one part of your website that shouldn’t be “static”.
It’s the one part that gets (or at least should get) the most interaction with your audience and convince them that what you are promoting is valuable for them and they need it.
As you know, I love lurking around Reddit and finding valuable case studies, since nothing beats real life examples.
This time I found probably the best case study when it comes to landing page conversion optimization.
Ethan, the co-founder and designer of the upcoming startup Plotguru was kind enough to take the time and write his own experience managing to increase his landing page conversion rate from 9% to 52% (!)
Just, so you know numbers: a 9% conversion rate is decent in the online marketing world, a 52% conversion rate is extremely good and rarely achieved.
So, let’s take a look at Ethan’s journey and what he did to create such an effective landing page. I will quote pieces from the original thread which can be found here and analyze and comment on the steps he took to perfect his landing page.
I’m the designer at a startup I co-founded, so the task to build a landing page falls on my lap. Shit. Here’s what I came up with: http://imgur.com/iQsgNmg. Not so great. This guy was getting us about 9% conversions, which isn’t horrible – until you realize that most of these were friends and family. This wasn’t even convincing them to sign up! Here is where I went wrong:
• App mockup shows nothing that demonstrates how it works.
• Way too much paragraph text
• Heading doesn’t prompt any action
• No real incentive to sign up
• The dark theme is uninviting
The first version of the landing page was this one:
Ethan identified these to be the problems that kept the conversion rate low:
- App mockup shows nothing that demonstrates how it works.
- Way too much paragraph text
- Heading doesn’t prompt any action
- No real incentive to sign up
- The dark theme is uninviting
Ethan was right assessing the first version of his landing page.
First of all the app mockup showed nothing about the app, it contained only the logo and there was no data, no information as to what the app does.
It’s advised the app mockup to demonstrate at least a screenshot of the app in action. A picture is worth a thousand words and in this case it’s worth zero words.
Every inch of the landing page is valuable, you have to make it count, even the negative space is important, which sections are left empty, which sections contain information and how much information.
Negative space allows the user to focus much easier on the focal point.
Furthermore the heading had zero call to action (CTA) functionality. It provided some scarce info as to what the app does and unfortunately it failed at that too, it’s too vague, too generic, the user doesn’t understand what the app does, would you?
Titles are extremely important when it comes to online content. On average, 8 out of 10 people will read a headline copy, but only 2 out of 10 will read the rest. This is the secret to the power of your title, and why it so highly determines the effectiveness of the entire piece. (Source)
Then we have the body text, which is too much. Landing pages should be simple, to the point, easy to read, comfortable to navigate and the user should be able to “extract” all the necessary information within two seconds.
All this text makes it impossible. Wall of texts are not user friendly and absolutely useless on a landing page.
Last but not least we have the actual email optin field which is located at the bottom of the page lost within the rest of the information.
The optin form should be the main function of the landing page, it’s the king of the page, everything leads to it.
In this version of the page, it’s wrongly positioned at the bottom, the description above it, is uninteresting and it doesn’t serve its purpose properly.
So, Ethan acknowledged all his mistakes and came up with a second version which rewarded him a much nicer 27% conversion rate:
Even though it’s much better and the conversion rate increased from 9% to 27%, it’s still not good enough.
Ethan identified these problems:
Alright, we have a problem. It’s time to start promoting the app, but out current landing page just won’t cut it. Back to the drawing board! Here’s what I came up with the second time around: http://imgur.com/VmHMZbm. Not super pretty, but better than the first one. It’s bigger and friendlier (with a hell of an incentive!), and netted us a conversion rate of about 27%. Here’s where I still went wrong:
• Still too much text! Jesus.
• Somewhat complicated hierarchy of elements
• It looks like Christmas
• Ugly / does not match the simplicity of the app itself.
A lot of things have been changed for the better but there is still room for improvement.
The app mockup now shows what the app does and finally the motto “a picture is worth a thousand words” is applicable!
There is still too much text. You should be able to communicate your message with as few words as possible. You can always follow the Twitter rule: 140 characters max.
While there is less text, still it’s not minimal enough to communicate the message to the user within two seconds. It needs a little trimming.
People lose focus easily so you have to lock their eyes on the target.
“Somewhat complicated hierarchy of the elements”. What does this mean exactly?
Well it’s what we described before. The optin form is the main element of a landing page and as such, it should be the focal point of the landing page itself. Here the optin is still at the bottom and it’s “less” obvious than it should be.
There is also a white line that separates the christmasy color theme which is really distracting.
Read about psychology of color here. You should rarely use such distracting colors and most cases no more than two.
White is your friend, it’s elegant, smart and classy. It makes your website look clean and neat and lets you attract the user’s focus on the preferred element.
As a rule of thumb, use the colors of the app theme and no more than two, otherwise you burden the eyes of your audience and they lose focus.
So, there is one last revision of the landing page:
Let’s quote his views on this version:
Every day, I became increasingly dissatisfied with the landing page. We had recently brought a proper web developer on to the team, and he was itching to get a project going. So I decided to redesign the landing page yet again: http://imgur.com/J4EtjZi. Jackpot! I know it will never be perfect, but this one is pulling in a conversion rate of 52%. Here’s what it’s doing right:
• Dead simple
• Bright & inviting
• CLEAR hierarchy of elements
• Only 1 interactive element above the fold (the sign up box)
• Clear benefit to signing up
• Headline intrigues & challenges the reader
• Reverting back to a simpler phone mockup keeps the page clear of unnecessary text.
This is a an example of a “perfect” landing page. Let’s the the checklist:
- Single color use (same with app theme)
- Title: to the point, precise, establishes your action (watch netflix) – explains the app functionality with one short phrase (answer real-time trivia). The question at the end is the CTA we needed!
- The only text above the optin form is excellent, makes the user want to subscribe, every in app purchase for free? forever? Sign me up yesterday!
- The optin form at last in the center of the page, it’s the main focal point. All the rest data lead there
- The app mockup is not distracting anymore.
- Communicates the app’s message within the first two seconds
We could argue that the app mockup doesn’t showcase the in-app environment anymore but I don’t think it would be a good idea in this version of the landing page.
It would capture the user’s eye and there would be more “interesting” data below the optin form – we don’t want the user to pass over the optin form, we want the user to stop there!
The optin form is the last and only destination of any landing page.
So, even though a rule of thumb is to show an in-app screenshot in the app mockup, in this case it’s not advised, it would do more harm than good.
After the third revision, Ethan managed to create an exceptionally well converting landing page and came to this conclusion:
So what have I learned? Really there is one main takeaway: Don’t try to do too many things with your landing page! Most people are redirected to the page from my various shoutouts and promotions on social media & reddit. So when they visit the site, they already know how the app works, at least in some capacity. I don’t need to teach them again – I need them to sign up. A good hierarchy of elements, simple imagery, and a clear call-to-action with a SOLID incentive is the way to go.
I think that this case study would come in handy to anyone who wants to create a landing page or wants to improve the conversion rate.
Let’s wish Ethan and his startup Plotguru all the best!
I will feature a review of the app as soon as it becomes available to the public, stay tuned!