CATEGORY
DID YOU KNOW WE HAVE A PODCAST?

Become a Better Marketer. Anytime, Anywhere.

Listen and learn on the go with Unbounce’s Call to Action marketing podcast. Tune in and get inspired in the car, while you cook, or at the gym.

Brutally Honest Advice for Better Landing Page Design

In the world of conversion rate optimization, battles are won not based on beauty, but on efficacy. Does your landing page design convey meaning and purpose? Or is it an inscrutable compilation of buzzwords and symbols?

Ten marketers had their landing page designs scrutinized on this month’s episode of Page Fights, featuring guest judge David Kadavy of Design for Hackers, Peep Laja of Conversion XL, and some kind of rhinestone cowboy.

rhinestone-cowboooooyyyy
Oh, it’s Oli Gardner.

In the process, they uncovered some common design mistakes that reduce clarity and ultimately, conversions. You can check out the recording here or read on for the distilled wisdom.

Illustrations should be illustrative

The first page to be critiqued was from water systems company Kinetico, for their line of water softeners:

kinetico

Credit where credit is due: the headline states clearly what the product being offered is, and there’s even a big photo of it! However, as David Kadavy pointed out, the hero shot might not be very relevant to visitors:

Do the people who are shopping for water softeners give a s#$! what they look like? I’m doubtful.

Hero shots are a critical component of a high-performing landing page. While this one definitely shows the product, it doesn’t display any benefit to the product nor the context in which one might use it.

If you didn’t already know what a water softener looked like, this picture isn’t going to be helpful.

Oli shares a quick tip on maximizing the effect of your hero shot.

Many of the pages critiqued used images and icons to ill effect, but the caricatures presented on Digital Direct’s landing page were the breaking point for Peep.

digital-direct
Screenshot of Digital Direct’s landing page (which has since been updated – good job!)

Peep felt that the icons did nothing to communicate the unique value proposition of the digital marketing agency. In fact, he felt that they removed credibility:

You hit me with this stupid, idiotic, cartoon bulls#$!. I’m not going to give my serious money to your funny business.

Aesthetic flourishes like icons and artwork can be a source of delight to your visitors, and could ultimately make your page more persuasive.

But if your graphics don’t serve to clarify what your copy is saying, they’re just distracting from it. Focus on the message. (And then test the heck out of it.)

Want to use video? Either commit or quit

Videos are a powerful way to make your page more engaging and suck up more of that sweet, sweet conversion nectar. But you can’t just stick a video on your page to turn up the conversion dial; if your video is just tacked on as an afterthought, it’s not going to get the attention it deserves.

This week’s participants didn’t get the memo — even Microsoft, who unceremoniously dropped a play button onto their washed out, vegetable-laden hero image for their OneNote product.

microsoft-onenote
Screenshot of Microsoft OneNote’s landing page, which has since been updated.

Oli wasn’t impressed with the way the video was hidden in the page header. He felt that Microsoft should test the video to see if it increases or decreases conversions. If it does increase conversions, it deserves to be more prominently presented. If it doesn’t increase conversions, it shouldn’t be there at all, since it only serves as a distraction from the CTA.

Oli also had problems with Borgess’ video on orthopedic surgery:

borgess

He found the well-produced video to be a good overview of the interesting technology involved in Borgess’ orthopedic surgery — but felt it lacked context and did nothing to compel the visitor to watch it.

The page itself doesn’t explain that this is a surgical procedure until much later, and never goes into detail about it.

If you want to use video on your page, do it justice; give it the space and the context it deserves. And whatever you do, make sure your page still stands on its own without the video. Some people simply won’t watch it.

Copy is your first wireframe

Your page should be structured around what needs to be communicated: your unique value proposition. The words you choose to communicate it can make or break your page.

As Peep put it:

Copy is the only weapon you have for increasing motivation… copy is gonna be the main driver that gets people to take action.

Even if a page is visually pleasing, weak copy can torpedo it.

Take Mezoz, a company that crafts marketing apps for specific verticals. David felt their value proposition — helping salon owners market their business — was a promising one.

mezoz

But for David, the headline failed to communicate the UVP clearly. Platitudes like “endless benefits” along with numerous typos throughout the page made the messaging unclear.

Even if your design is beautiful, poor copy creates a poor experience for visitors.

The copy on the page is part of the design, and the first designer to touch your landing page should be a copywriter. As Oli explained:

Copy informs design, not the other way around. People think design is pretty pictures. Design is an experience.

Next time you’re assessing a landing page, read the text alone. Is it persuasive on its own? No? Back to the writing board.

Design for clarity

While having a killer designer on your team is a tremendous asset, you can build delightful landing page experiences on your own by learning how to write with clarity.

If only there was some kind of guide, written by an expert copywriter, freely available on the site you are currently reading — OH THERE IS AND YOU CAN GET IT HERE.

Once your page is both well-written and smartly designed, submit it to next month’s Page Fights! But be warned: the people want blood, and blood they shall have.

— Brad Tiller


microsoft-onenote

About Brad Tiller
Brad’s a writer at Unbounce, with a marketing background encompassing everything from community management to lead generation. He's obsessed with the little touches that take marketing campaigns from so-so to stellar. Find him on Twitter: @bradtiller
» More blog posts by

Comments:

  1. Cliff

    Great points, Brad. Nice job with the article. You guys do a great job in the industry with your content. Keep up the great work. Cliff

    (0)
    Reply
  2. Gabby

    Thanks for the tips! Very helpful stuff. I’m finishing my website right now and these are the types of articles that are helping me think about my customers as I design my site. Thanks again!

    (0)
    Reply
    • Brad Tiller

      Glad we could help! One of the great things about conversion-centered design is that it usually aligns with both what you want and what your customers want. Best of luck with the design!

      (0)
      Reply
  3. Yakov Kofner

    Hi Brad, thanks for such instructive article!

    Would appreciate your response to 2 follow-up questions:
    – since nobody really stumbles on a website page, a viewer already kind of knows what he/she is looking for. Have you seen any research which analyzes what absolute minimal information is required before conversion starts to decline?
    – related to above, we just launched a comparison app for sending money, https://www.SaveOnSend.com/, and tried to apply a minimalistic design. Now, based on user’s feedback, we are considering whether to go further and delete any context at all and just get to functionality right away, a-la Google or Kayak. Are there circumstances when such extreme approach won’t be optimal?

    (0)
    Reply
    • Brad Tiller

      Hi Yakov! Glad you liked it.

      With regards to your questions, it’s difficult to quantify something like context, and even more difficult to measure how people will react to more or less context because it’s so dependent on the business. 10 words, 100 words, and 1 image could all contain equal amounts of “context,” and whether that context is actually communicated to the user is completely subjective.

      For example, Google has a strong reputation and universal recognition, so they can present their search box entirely devoid of context, because everyone already knows who Google is and what’s going to happen when they put words into that box.

      For a service like yours, it could be completely different. I suspect many people landing on your site will have never heard of it before, and with something like sending money through an unfamiliar service, it seems to me that more context is better than less.

      But there’s no way to be sure without testing it. So test away, my friend!

      (0)
      Reply
  4. Antonio Sánchez

    Awesome review! Very helpful tips. To bookmarks! :)

    (0)
    Reply
  5. Anto Rejoy

    Thanks Brad for the useful and much needed information on landing page requisites.
    I am from a start-up software dev company. Could you please suggest any websites that provide good landing page templates that might suit all these necessities?

    (0)
    Reply
  6. John Rowan

    Couple of great tips here as I come from a development background and have no degree of expertise on design. Great post thanks for sharing :)

    (0)
    Reply
  7. Syed

    You made an exceptional post on it. Your discussion style is great.

    Thanks For sharing an awesome and informative Article !

    (0)
    Reply
Comments