Before & After: How to Fix 3 Egregious Website Design Errors

by Rebecca Churt

Date

February 27, 2013 at 12:30 PM

describe the image

Most of us can agree that search experience has improved a lot over the years. Rarely do I come across a seriously spammy site, or one that's just plain horrendous ... though both of those certainly still exist on that world wide web of ours.

What's more common to come across is those silent but deadly website design errors. You know, when visitors land on your site, and they're not met with blatantly egregious website design faux pas, but they are just kind of ... generally confused. The result? If you're lucky, erratic clicking that happens to land the visitor where they wanted to be. If you're like most of us, site abandonment.

There are a lot of ways to make your site more sticky, but I wanted to start with the basics of site design that every marketer should be doing a gut-check for. So here's three websites that have a ton of potential, but are committing some site design errors that could easily be fixed. I then did a little optimization to fix the problems. You know, a website makeover! Here are three examples of what not to do when designing or redesigning your site. If you want anyone to stay on your site, that is.

Poor Site Structure: Before & After

A poor site structure is a recipe for a disappointing user experience. It will inevitably leave a website visitor frustrated, which will result in them leaving your site. Usually poor structure/site architecture results from unclear direction or vision. That translates into a cobbled together site where the flow from page to page is not intuitive, especially as you try to navigate from the home page or the site’s main navigation. And remember, it's not just visitors that hate this ... it's search engines, too. Here's an example of what I'm talking about:

Poor Site Structure: The Before

before bad site structure resized 600

This example is of a site that you will likely come across more often as it appears to be a new design trend -- albeit a flawed one for conversion-concerned marketers. A collection of images like this is pretty, but it's not a substitute for a proper navigation or menu. It’s not intuitive, and will take the average user far too long to navigate. Even with copy in the little squares, it's not clear if I'm looking at an image that leads to an article, instructional copy, calls-to-action... it's just plain unclear. Here's how you could keep that compelling visual design, but still add some much-needed structure:

Poor Site Structure: The After

after bad site structure resized 600

That's right -- add a navigation for Pete's sake! It doesn't have to be cluttered or contain a ton of items, but a basic top level navigation gives people a place to go where they feel safe. Navigations make sense. We're used to them. It's home base. It makes all those new crazy floating images seem a little less foreign. Your navigation will make it easier for visitors to go from general content, to more specific content.

If you have no nav -- or a confusing one -- this is a good place to start to make your website more intuitive. If you need help restructuring your navigation or figuring out what should be in it, visit this blog post that teaches you how to structure an intuitive website navigation.

Content-Crammed Site: Before & After

Sometimes more is less. And even though we're content crazy inbound marketing, when it comes to your website design and layout, the less-is-more rule definitely applies. Here, let's just jump right to the "bad" example:

Content-Crammed Site: The Before

tours site resized 600

I don’t even know where to start in this example. Do you? Where do you click? What’s the point of all this extra content? While the intent may be to show a range of products/service, provide a bevy of options, please a wider audience -- what actually happens is people don't know where to look, or what to do. It's content overload! Let's fix this.

Content-Crammed Site: The After

after content resized 600

Our example site is a travel site. So to fix this content overload problem, let's think about visitor goals for a moment. What are the main reasons why people frequent travel sites? It's probable:

  • To educate themselves on destinations
  • To shop prices
  • To make a booking

Now look at how many of those things you can easily get to in the "Before" example. Yeah, not a lot, if any at all. Especially when visitors are just a quick back-click away from a SERP that's more user-friendly.

By leaving more white space and removing a lot of content that should really be placed on another page, you give your visitors a chance to orient themselves so they're more comfortable finding what they need, and navigating your site. As a visitor to the "After" site, I could more easily find destination information, review top tours, and ultimately make a booking.

Generic Template Site: Before & After

I'm sure we’ve all come across those cookie-cutter websites where you can tell that it’s a template or theme that's shared by thousands of other sites without any customization. Worse, many template-driven sites use generic copy and stock images that make the site completely unremarkable, and totally indiscernible from any other site on the internet. You can just feel the eyes glazing over. Here's an example of what I'm talking about:

Generic Template Site: The Before

before template resized 600

Feels like you've seen this site a thousand times, right? Thing is, there's nothing wrong with building your site around a template! Templates can be customized, so you should take the opportunity to make them your own. Here's what I mean:

Generic Template Site: The After

after template resized 600

Do you see how the basic structure of the template remains, but the site is more personalized? For instance, get rid of the stock photo, and replace it with something that better represents what your customer might look like, or better yet, a form that helps move visitors on to the next step in the process. Same goes for the copy -- it should be edited from the business babble that says a lot and means nothing, and written specifically for your persona, addressing the needs of a site visitor at whatever stage of the buying funnel they're in. And of course, you should add elements to help people get in touch with you, like phone numbers, email addresses, and social media information.

Customizing a standard template means more than making design changes. Your website has the opportunity to speak to your audience, and as such, you should personalize it a bit. Add actual ways for people to get in touch, and make it easy. Add content that is reflective of your business, and make it reflective of your business goals. People like doing business with people, not stock photos.

What are some of the worst website offenses that impact conversions? What have you changed on your website to improve performance?

Image credit: Cubmundo


Search Inbound Hub

Subscribe to Marketing Articles by Email

Subscribe by RSS

Follow HubSpot

Call Us: 1-888-HUBSPOT