Unbounce Landing Page DesignView Portfolio
Use a big headline
and hero shot
A large colorful headline should dominate. Don’t be subtle: use big, bold, clear text with a single dominating photo (that shows them what they’ll get) along with a caption — the second most-read copy element. The headline should convey both the product benefit and special offer.
Use a video
A video (especially from a news source) adds credibility and provide information in a easily digestible way. The interactivity keeps a customers attention. Don't have it autoplay.
People are naturally drawn to people. Using an image showing the eyes creates more impact.
Make sure the landing
page syncs with the ad
Make sure to state the same offer in the same terms with the ad that got them there, and use copy and graphics that are constant with the creatives.
Use recognized logos
Quotes from recognized news sources add credibility.
Address the reader with your copy
People read left to right. Use you and your. When applicable, paint a picture of how the product affect the consumer (i.e. a Home Shopping Network-style sales pitch).
Quotes from the current customers gives the new ones reassurance. Putting positive testimonials on your site can increase sales by 34%. Consider adding customer photos next to each text testimonial. Photos featuring people can double your conversion rate.
Use an easy-to-
Short form: use the fewest fields you can and make the form as compact as possible. Pre-populate data whenever possible. The more targeted the better. Make the submit button clearly visible.
Action button above
Place the key action button "above the fold", the area visible without scrolling.
Minimize risk and fear
Include seals such as Money-Back Guarantee, Risk-Free Trial Offers, Secure Server, Free Shipping and Easy Returns. The icons can dramatically increase conversion rates.
Use a single landing page
Multiple-page order processes drop conversion rates.
Make text easy to read and skim
Make copy clear and readable, and try to use bullets for quick scanning and increased retention. Any subheads should convey the essence of the message.
This case study shows an actual website we did for LingPerfect.
And now for the list of sites that didn’t make it into Part I of our series. Some of them put high conversion rates over beauty, and some are just a really nice and simple example of how landing pages should be done. Beauty? Sure, it’s important—but at the end of the day the conversion rates are really what it’s all about.
Hot: The screen real estate on this design are visibly well planned. A lot of content above the fold, fully visible on smaller screens and devices make for an effective layout.
Hot: This above the fold approach is pretty popular among clients who put large conversion rates over beauty.
Hot: 37signals tried a lot of iterations and this one still sticks. Long headline, person and a contact form make combine seamlessly to get the job done.
Hot: A great example of how a huge corporation like Microsoft can display their infinite list of products and explain what they do in a neat (and still informative) compact design.
Not: For an opposite example visit GE or IBM.
Hot: The landing page that signed one billion people. This one is a good example of how to build a landing page in its final step, when people are already aware of the product.
Hot: People like it. It’s plain, simple and memorable.
Hot: Very minimal, very cool and ultimately? Very compelling.
Hot: It created a movement based on the idea that products for developers shouldn’t actually be ugly. What a concept!
Hot: It defined a pattern for landing pages selling iPhone apps.
Hot: This is one of the well-known examples of its own species.
Not: Too many pages out there are built in a similar manner.
No surprises here, you’ve seen them all before. This is a selection of best known landing pages on the web. They all share two important things: great conversion rates and pronounced beauty.
Hot: A great example of a landmark landing page, combining all the right elements including a big headline, action button, and a memorable mascot.
Not: Unfortunately, it is now replaced with a different and noticeably less appealing design.
Hot: Leave your bank for Web 2.0 aesthetics. This site was among the first corporate websites that introduced one-page design with long scrolling.
Hot: An early example that showed how to successfully fit corporate design into a Web 2.0 look and feel. They did a lot of testing with different headline formats.
Hot: A very influential design that inspired the movement of Bootstrap websites.
Hot: Inspired the movement of “attention to detail” landing pages, with a lot of fine tuning of graphics.
Hot: Combine a Buddha mascot with a nice shade of green and you get this funky zen experience that everybody recognizes.
Hot: Fresh, minimal and straight to the point. Very nice use of the turquoise color scheme.
Hot: Highly influential, unique and memorable.
Not: Brought a bandwagon of copycats.
Hot: At its peak, it brought some freshness with its purple design and nice iconography.
Not: Fresh at the moment, but not as timeless as MailChimp.
Hot: This list would not be complete without Apple.
Not: Jony Ive Redesigns Things.
The sites mentioned above are some of the designs that have been most requested by our clients over the years. You can see the results in our portfolio.
Other: Trust badges, links, navigation, copy, images, content length, pricing, funnel
More: The Landing Page Cards Deck
(Inspired by Paras Chopra.)
Reports show that radical new design on essay websites for students increased sales by 50%.
Radical design on a checkout page will gain a 14% increase in sales without releasing any new products or spending money on ways to get more traffic to the website. Radical redesign on sales pages is proven to improve sales by 20%.
Anyone else seeing a pattern here?
Jason Fried’s mantra while testing was: “We need to test radically different things. We don’t know what works. Destroy all assumptions. We need to find what works and keep reiterating it—keep learning.”
37signals’ radical redesign achieved gains up to 102.5%.
Google has this philosophy that, “It does not matter whether you are an engineer or a vice president, at the end of the day a decision comes down to ‘What does the data say?“
Start simple. Test how changing the headlines on your page can make a significant difference. Does your profit grow? We bet it does. Remember; don’t touch anything else on the page, just the headline!
The Gary Halbart tutorial will teach you how to write killer headlines. 37signals article will show you how to test multiple headlines on the page. If you are interested in how headline updates conversion boosts evidence, watch these two videos by Google.
If you don’t have call to action button, make one. (Case: +62%)
Change the button text. (Case: +29%)
Change the button colors. (Case: +5%)
Change the button shapes, elements and sizes. (Case: +6.3%)
Add text around the buttons. (Case: +28%)
“Consolidated Label, A/B tested a new design with a prominent call to action button on their test page. Their original web design did not have any call to action buttons so they tried making an A/B test with one. They did expect an increase in conversions but they didn’t expect it to produce a 62% increase in conversions over the original design.”
After adding a video, a personal trainer got a 46% increase in conversion rate.
Buy Real Twitter Followers made a variation with a small video explaining their services on their homepage. This little change helped them increase their sales by 216%.
There are three kinds of testimonials you can test on:
- Text only. Putting positive testimonials on your site can increase sales by 34%. Consider adding customer photos next to each text testimonial. Photos featuring people can double your conversion rate.
- Audio. You can easily produce audio testimonials using Google Voice. When a client calls the audio testimonial Google Voice number and leaves a voice message, the transcript of that call and the audio file will go into your Gmail email box.
- Video. Since implementing testimonials, a video training company saw a 20% increase in conversion rates.
There is an often overlooked adjunct to the subject of ideas in commerce; stealing them. Or, to put it more pleasantly, emulating them.
The error of failing to emulate a winning idea pervades every industry, at all levels, and always has done. Often this is due to indolence or folly. Of indolence, no more need be said. The folly, on the other hand, usually takes the form of a peculiar and pernicious affliction, known colloquially as the ‘it wasn’t invented here’ syndrome. I would place this affliction very high on the list of reasons preventing individuals and companies from achieving major success.
“In 2011 a fund-raising site called GoFundMe was talking with WePay about the possibility of switching to its service from payment giant PayPal.
Using A/B, WePay could present GoFundMe CEO with an irresistible proposition: Give us 10 percent of your traffic and test the results against PayPal in real time. It was an almost entirely risk-free way for the startup to prove itself, and it paid off. After GoFundMe CEO saw the data on the first morning, he switched half his traffic by the afternoon—and all of it by the next day.”
Wired has a big article on A/B testing.
“Does your site have a PayPal button on it? If not, add one today!”
The answer: they’ve never tested it.
“In the past, you must have come across one of those long sales pages that never seem to end. Most designers hate long sales letters because they contain heaps of text but apparently lack on aesthetic fronts. Some people go to extremes and even call such sales pages evil forms of internet marketing. Truth be told: long sales letter pages are based on learnings from direct marketing and the catalog industry, so there is nothing inherently evil about them. In fact, many marketers still use long form of sales pages because they convert visitors like crazy.”
37signals’ long sales letter page increased signups by 37.5%
If landing page design were game of poker, here are the strongest cards you could have in hand:
9: Trust (badges)
4: Content length
Joker: Radical Redesign
(Inspired by Paras Chopra.)
“Despite having the second-highest circulation of any U.S. newspaper, the USA Today was the least trusted brand among both consumers and local service professionals, actually decreasing conversions by 25% and 13%, respectively.
Including multiple press logos together on our landing pages increased conversions by 17%. However, certain newspaper brands performed better than others when placed alone on our landing pages: The Washington Post and the New York Times were the most trusted brands among consumers, increasing conversions among consumers by 32% and 29%, respectively. The Wall Street Journal was the must trusted brand among local service professionals, increasing conversions among professionals by 8%.”
Disclaimer: Always Be Testing (ABT)
In a now legendary test, Google went about examining 41 shades of blue to see which one would perform better. They know the golden rule is: Do not assume anything without testing it first. What works for us may not work for you. Testing is something every web designer must do for themselves. You may find that what has worked for you in the past may not work in the future. There is never an eternal, ultimate truth because things are never constant—but are constantly evolving.
What’s described as the “best” practices may not always stand true. It’s still hard to believe, but numbers don’t lie.