Homepage Design Mistakes You Should Never Make (and How to Avoid Them)

We were recently interviewed for a 2nd time on the Smart Brand Marketing show with Tom Libelt. The show episode will be published soon, in the meantime here are the show notes for that episode.

We reviewed Tom's website for his company Libelty SEO and gave him recommendations on how he could increase the number and quality of potential clients filling out the form on his website.

The primary goal of the site is to get qualified prospects to fill out the contact form on the homepage, but right now, its design is getting in the way. Let’s take a look.

Here is the Libelty SEO homepage design at the time of this review:

Mistake #1: starting with design (instead of with story)

Your customers don’t need a web design in order to buy from you – they need a story. If I am in your target audience, tell me a story about who I am and what my problems are in a way that makes me feel smart for choosing your service as a way to solve my problems.

The story Squarespace tells its customers is this: you are a passionate _______ (chef, photographer, musician, bicycle shop owner, jewelry designer, gluten-free cupcake impresario, etc.) and you are great at what you do. Because what you do is so great, it deserves a high-quality, beautiful website, but you are too busy dedicating yourself to your craft to waste time messing with code, designers or developers. Squarespace was created for people just like you: with Squarespace you can easily create a beautiful website...and then get back to being great at what you do.

Squarespace’s value proposition is good enough: “easily build a beautiful website”, and most companies would have stopped there. What has made Squarespace so successful is that they tell their customers a story about themselves that their customers resonate with.

Let’s examine how Squarespace tells that story on their website:

Your first instinct may be to use words to tell tell your story on your website. However, consider this: our brains process images 60,000 times faster than they process text. Users make a decision to leave or stay on your site within the first few seconds they spend on your page. Imagery is a powerful tool you can use to engage your audience within that short window of time - you can communicate much more within a few seconds with images than you can with words. Squarespace does this beautifully: the Squarespace homepage uses very simple and elegant videos of customers using Squarespace in their workspaces to do the storytelling on a homepage that is light on text:

This visual storytelling is consistent throughout the Squarespace customer experience:

Squarespace told the same story in their recent SuperBowl ad.

Once you have an in-depth understanding of the psychology of your ideal prospect, you can identify the series of “micro-yeses” that need to happen in your prospect’s mind in order for them to fill out your contact form. Once You have identified this, you are able to create a story that will lead your prospect through that series of micro-yeses. Text, images, icons, colors and graphic styles on your website all become storytelling tools to help you do this. Once you know the story that you need to tell, the job of web design is to facilitate and enhance this storytelling. Think about it this way: It’s not a website that needs to be designed--it’s a story that needs to be told. Your website is simply a vehicle to deliver this story to your prospects.

Unfortunately, the majority of web design projects completely skip this first step of Story discovery. They begin with graphically designing a website, with the plan that once the graphic layout of the site is established, the text areas that the designer created will later be filled in with “content”. This just doesn’t work.

The new Libelty SEO website was designed in this manner – at the time of this review the website has been designed and coded, and the plan was to later have a copywriter write copy to replace the placeholder text.

The other 4 “mistakes” we will be discussing in this article stem from this first mistake. Without a narrative of the conversion experience, the web designer is left to haphazardly fill up space on the website. The result is an un-focused site that fails to connect with its audience and move them to action.

We can see these undesired results on the current Libelty SEO website.

Mistake #2: too many buttons, no clear user path

This homepage has about 30 buttons a site visitor can click on. Above the fold alone there are around 20 buttons. Additionally, the page has no visual hierarchy to guide the visitor along the path they should be taking. This leaves the user confused about how Libelty SEO can help them and unmotivated to fill out the contact form on the homepage.

The main goal of the Libelty SEO site is to have visitors fill out the “Get Started Now” form, but with so many other buttons calling out for attention on the page, visitors are much less likely to succeed in filling out that form. If you want your visitor to fill out the form on your homepage, don’t give your visitor 30+ other things to do on your homepage.

You only have so much attention capital to work with, and so it’s very important to not waste that capital on non-essential calls to action. The “Read More” button at the bottom of the page is a good example of a distracting, non-essential call to action:

It actually matters very little to either party, if the site visitor actually reads more. Additionally, the button dominates the visual space at the bottom of the page, giving the viewer visual cues that this is an important button for them to click on.

You’re doing good if you succeed in getting your site visitor to take even just one or 2 actions. Don’t ask your visitor do something that’s a waste of time for you and them – if you do, that will likely be the last action that visitor takes on your website. If the “Read More” button needs to stay on the page (for SEO crawling purposes, for example), the wording should be revised so that is no longer telling the visitor to do something, it should be moved to a position of less prominence, reduced in size, and re-designed to not stand out from the page.

There are many other non-helpful buttons calling for user attention on this homepage. For example, the “Our Work” section creates sort of a mini navigation within the home page:

This provides tabs for the user to click on, but once the user clicks on a tab, they are only shown a very small snippet of information. This space could be used better.

Rather than walking the user through a story, what the current homepage designis essentially saying to the visitor, “Here’s a thing! Here’s another thing! Here are 30 different things!” This sends your prospect on wild goose chase from snippet to snippet of information, hoping that somehow by luck that wild goose chase will result in the prospect filling out the “get started now” form.

Solution: remove all the unnecessary buttons and create a page that walks the visitor through a narrative that concludes with the visitor filling out the contact form.

Mistake #3: using automatic image sliders or carousels

Image sliders or carousels have become very popular in web design. Part of their appeal is that they offer an easy way for a web designer to appease multiple stakeholders. Five different decision-makers want 5 different things on the homepage? Great – we’ll use a slider with 5 slides and everyone will be happy. Unfortunately, too many cooks spoil the broth – the upshot of the ‘just throw it on a slide’ approach is that site visitors have now been trained that image sliders and carousels are going to contain largely irrelevant information:

"In all the testing I have done, home page carousels are completely ineffective...the chances that the information being displayed in the carousel matches what the visitor is looking for is slim. In test after test the first thing the visitor does when coming to a page with a large carousel is scroll right past it and start looking for triggers that will move them forward with their task."
Craig Kistler (usability expert)

This eye-tracking heat map demonstrates this user behavior in response to image carousels:

Users are skipping over the image slider and looking underneath the banner area for relevant information.

In addition to image sliders being largely ignored, in the case of the Libelty SEO homepage design, they also compound the “too many buttons, no clear user path” issue we mentioned earlier. The Libelty SEO homepage, actually has 3 image sliders:

This gives the viewer many different paths to take, and leaves them confused as to where they should be looking for information. A visitor’s conscious and unconscious thought process dealing with this level of complexity might go something like this: “Let's check out this SEO company. What services do the offer? Where should I look to find that out? In 3 different places? Hmmm, this seems hard (leaves site)”

Solution: remove the image sliders/sub-navigations on the homepage and instead take the information that would have been on the different slides of each slider and organize it from the top of the page to the bottom of the page in a way that addresses the information relevant to the prospect in a logical and sequentially compelling manner.

Mistake #4: key credibility and relevance items are buried rather than highlighted

Libelty SEO has accomplished very impressive results for its clients. For example, for the client Phillip Bloud and Associates, Libelty SEO achieved an 800% increase in visitors. This is the type of credibility piece that the target audience is looking for, and yet the current site design makes this information difficult to find. If a site visitor stumbles upon the right page and makes it to the bottom of that page, they find these great graphics:

These graphics do a good job highlighting Liberlty’s competence – there’s no reason they should be relegated to the bottom of a sub page. If nothing else they should be moved to the top of the case study sub-page, but even better would be to have them near the top of your homepage.

Visitors to your site will be making an evaluation in the first few seconds they spend on your page as to whether what you offer is relevant and trustworthy. They will be looking for these types of credibility indicators, and so you need to put them where site visitors can see them within the first few seconds they spend on your page.

Solution: get key credibility items on your homepage and ideally near the top of the page. Use graphics to illustrate key conversion elements, rather than burying them in text.

Mistake #5: Content above the fold isn’t relevant, no value proposition, generic imagery

Okay, we've been harping on the importance of your website making a good impression within the first few seconds of being viewed by your prospect. If we evaluate the portion of the Libelty homepage that will first be visible to site visitors, one that does not contribute to this goal is the bar of social icons for Facebook, Twitter, LinkedIn, and YouTube:

These should be removed as they aren’t accomplishing the objective of the site and may even be distracting visitors from the most important steps:

If we move down to the large banner image area, we see another problem: an irrelevant image taking up a large amount of the space in the header area:

This image should be replaced with something that’s actually meaningful to prospects (see Thou Shalt Not Commit Stock Photography Crimes from previous episode).

A better use of this space would be to include a photo of a client, their testimonial, and the results that Libelty SEO was able to create for them. Something along the lines this Basecamp landing page could work well (a tasteful arrow pointing at your form never hurts):

Solution: Make conscientious use of the space above the fold and other hotspots that are likely to attract visitor attention. Understand your ideal prospect and what information and indicators they are going to be looking for, and place those on your page in a way that is easy for your ideal prospect to access.

Libelty has a lot to offer its prospective clients. By avoiding and correcting these mistakes, they’ll be in a better position to show off their unique offerings. That’s the key to good design: getting out of the way of good content.

Sources:

http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/#

http://visualwebsiteoptimizer.com/split-testing-blog/image-slider-alternatives/

http://adpearance.com/blog/the-abcs-of-user-experience

http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

5 Keys to Designing Landing Pages That Convert

We were recently interviewed on the Smart Brand Marketing show with Tom Libelt on the topic of landing page conversion rate optimization. Our episode will be published soon, in the meantime here's the accompanying article for our episode.

1. Keep messaging, imagery, and visual style consistent across marketing channels

A banner ad or email creative should click to a landing page with the same colors and images. Any visual disconnect at this stage can cause a surge in fast bail-out visitors.

Example: Plus-size apparel e-retailer Kiyonna changes the central image on their homepage to closely match the hero shot and offer featured in special email sales alerts. Their average email click to conversion rate for a house list mailing landing page is 3-14% depending on the offer.

Here’s a sample of a Kiyonna email campaign that got unusually high conversion rates:

Here is the accompanying landing page, which was revised to match the content of the email creative:

Example: Gap Inc., which owns Old Navy, creates at least 4 to 5 new landing pages for various targeted campaigns per week. Here is the Old Navy "Rugby Bunch" email:

Here is the Old Navy "Rugby Bunch" Landing Page:

2. Reduce form fields to increase conversions

If you want to improve your landing page conversion rate, you need to remove anything that may be preventing your prospect from taking action. Nothing stops an interested prospect dead in their tracks like a long form that requires them to hand over lots of personal information.

We encounter many clients who have no idea why they are collecting particular items that are required on their forms. They are collecting data that they aren’t even using, meanwhile these unnecessary form fields are depressing their conversion rate. To increase conversions, reduce the fields on your form to only the most essential pieces of data.

Example: Here is the original form prospects had to fill out to receive a free white paper from the American Advertising Federation. This form required a copious amount of information from the prospect - 13 fields in all:

Here is the redesigned page that was tested against the original. Thirteen form fields have been reduced to 3, and with the extra space this freed up, an explanation of the benefits of the white paper was added:

The result? The treatment page increased the conversion rate by a whopping 816%:

This test demonstrates the 2 key principles of conversion optimization - reducing friction and increasing value. To achieve optimal conversion rates, you need to remove friction, which is anything that may prevent your prospect from taking action. You also need to increase the perceived value of the offer in the prospect's mind. You need to make the benefit that the prospect will receive far outweigh the cost to them - and yes, giving away personal information is a cost to the prospect, even when the offer itself is free.

Not only can unnecessary form fields discourage your site visitor from filling out your form, they could even be confusing your visitor during the process of filling out the form, and causing form errors that prevent your prospect from successfully submitting their information or making a purchase. Here's an interesting article about how Expedia discovered one extra data field was costing them $12 million a year.

There's a lot more we could discuss about submission form optimization, but for brevity's sake here's an infographic that summarizes some key points.

3. Thou Shalt Not Commit Stock Photography Crimes

Bad photos of real people tend to work better than professional photos, especially for testimonials. A slightly imperfect photo feels more real and believable than a glossy studio shot.

Example: Palo Alto Software tested this idea out, and found that slightly imperfect photos of customers giving testimonials worked far better than perfect shots taken by pros. Here's one of the images that beat out the professional photography:

This may not be professional quality photography, but you sure feel like he’s a real guy you can trust.

Stock photography often lacks relevance

Selecting the best images for your landing page comes down to relevance: how relevant are your images to your ideal prospect?

Example: The original homepage for a consumer credit counseling service offering a free debt consultation featured a stock photo of smiling lady wearing a headset:

A variation of the page was created where the stock photo phone representative was replaced with a picture of the company founder (founder's face was intentionally blurred to protect client privacy):

The result? When the recognizable image of the founder was used, visitors were 35% more likely to sign up for a free consultation:

So what's the lesson here? Never use stock photography? Not exactly – this is an issue of relevance. When selecting images to use on your website or landing page, the questions to ask yourself is "How relevant is this image to my prospect?" A generic stock photo of an airbrushed model wearing a headset is an abstraction – it's a representation that doesn't hold any real meaning for your prospect, and as such it's mostly irrelevant. Do you think your prospect really believes that smiling lady wearing a headset in a stock photo actually works for you? It doesn't matter where your images come from, as long as they are relevant to your prospect.

The following grid breaks down the relevance factors of smiling headset lady stock photo and the image of the company founder, and provides a useful framework for understanding what images are likely to be most effective (click on image to enlarge):

4. Video can dramatically increase your conversion rate (but not always)

There's a lot of data that showing video improving landing page conversion rates.

Example: Through his website SixPackAbsExercises.com, personal trainer Carl Juneau teaches men the best ab exercises for getting six pack abs. Carl carried out three split tests which conclusively proved that videos increased conversions on his website by as much as 46%.

However, there are some situations in which video can cause the opposite effect, and depress conversion rates. Here is an example in which a static image outperformed a video.

Example: Brookdale Living offers community living solutions for senior citizens. Two versions of the sign-up page were created and tested against the original sign-up page (not shown). The first variation had a static photo of an elderly woman. This is how the photo version looked:

The second variation had a 1 minute 56 seconds heart-tugging video in which many elderly people talk about their positive experiences with Brookdale. In the second version, the video replaced the woman’s photo. Everything else on the page remained the same:

The designer expected the video version to perform better than the static image version. Both versions - the image and the video version - were tested against the original page design.

The result? The image version outperformed the video version. When pitted against the original, the image version recorded a 3.92% increase in ‘Find a Community’ searches while the video version recorded just a 0.85% increase in searches. The image version also achieved the statistical confidence of 99.99%. The test was run for 2 months on over 30,000 visitors.

According to the designer, the seemingly modest 3.92% increase in community searches will result in a more-than modest $106,000 additional monthly revenue.

Why did the image version work better than the video version? Here are some theories:

Brookdale is already an established brand and the video acts as a distraction.
The video did not contain the type of information site visitors was looking for, and so only distracted users from finding the information they needed
The target audience tends to have lower than average access to high-speed broadband. The slower internet speed may lead to a painful video watching experience, and hence the image version worked better.
The target demographic may prefer to read instead of watching videos as a method to obtain information online.

5. Don’t make your visitor “click to convert”

The more steps you have in your conversion process, the lower your conversion rate will be. Bangkok Boxing Fitness makes this mistake by making a 1-step process into a 3-step process. Homepage visitors must:

1. "Click here for free session" (shown below):

2. Be taken to a secondary page where they have to choose which free class they would like (shown below):

3. And finally - fill out contact form for free session

For improved conversions, Bangkok Boxing Fitness needs to turn this 3-step process into one step by allowing visitors to sign up for the free session on the home page.

A case study from Marketing Experiments shows the benefit that can be achieved by moving the sign-up form from a sub-page to the homepage. Here a luxury home builder is seeking to sell homes to upper-class families, and in this test they are trying to increase the number of leads they receive from their website. You can see below that in the Control (their original website) the sign-up form is a two-step process, much like that of Bangkok Boxing Fitness:

Experiment: Control (step 1)

Site visitors have to click on the “Request more information” button in order to be taken to a page where they fill out a form:

Control (step 2)

Treatment Here they tested moving the form from the secondary page to the homepage:

And the result? A 166% increase in leads:

Items mentioned in the show:

Sources:

“MarketingSherpa’s Landing Page Handbook: How to Raise Conversions – Data and Design Guidelines”
"Form Optimization: 3 case studies to convince your boss (and Sales) to reduce form fields."
This Just Tested: Stock images or real people?
"Landing Page Image Outperforms Video, Increases Monthly Revenue by $106000"

Don't blink.

We make you more money online.

And make you look damn good doing it.

Open eyes. See results.