B2Bbloggers.com

B2Bbloggers.com is a B2B marketing site that features a lot of guest posts on B2B marketing, and highlights a lot of content from around the niche.

We’re going to take a look at the site’s design today, critique it, and work out how we could improve it. As we do hopefully you’ll learn to apply this same methodology to your own site.

We’ll be working through this design as a case study, redesigning each section along the way, so you get to see each item as we rework it, including the full before and after design.

Let’s start by loading the site in a new tab (Or if you’re reading later, check out this image of the site as it was at this time).

Issues With the Current Site

The following 4 are the issues mentioned by Jeremy (the owner of B2Bbloggers) when he asked for the review:

  • Increase subscribers.
  • Insert categories/archives.
  • Insert popular posts.
  • Better use of footer.

We’ll bear those in mind as we go to work on the site later, but let’s see what other possible issues we can find ourselves. The core areas that I’d like to improve on are:

  • Heavyset Appearance -The current colors, lack of spacing, large blocks of text give the site quite a heavy appearance. No single individual element is to blame, but we’ll see what we can do to air things up a little.
  • Avatar/Vote IconsConfusion – The site attempts to do quite a lot (A lot of its own blog posts, but also feeds from other websites, two separate Twitter streams, and a Google Custom Search Engine for a number of B2B sites). It makes for a great set of resources for visitors, but a more unified appearance and clearer sectioning may make it easier to follow.
  • Clutter – Certain areas of the site feel cluttered (Like the avatar/votes downside the posts), and others just need a little work (Like the pixelated social icons). We’ll sort these out as we go along.

With those 7 items in mind, let’s get to work!

The Header

We’ll start at the top. The header is relatively clean and the navigation bar works well.

Current Header
(Click to see full size)

It’s a little bland though. You could hire a graphic designer to create something much more memorable, but a few simple tweaks could go a long way in the meantime.

We’ll start by changing from the slightly faded blues, to stronger variants. After that, we’ll do a little cleanup.

The “CrowdsourcedFRD” link is a bit of a mystery. The trouble is that with no further information than that, very few people are going to click through to it. In essence, the link is asking for feedback on the site. Online, the clearer things are, the better. So let’s rename that.

To help declutter the header slightly more, we’re going to give your logo some extra room to breathe. We’ll start by moving the navigation links above, over to the right (Where they’ll work every bit as well). We’ll also stretch out the header slightly to give the same padding above and below it.

Last of all, we’ll fix up the borders on the search form, bring some of the logo’s orange into it (It’s been used so rarely in the site) and move the text inside the search bar (Where some simple JavaScript can make it disappear when a user clicks).

Nothing complex there, and let’s see how it looks now? (click to see in full)

New HEader

The Content

We’ll move down to the core content now. On the homepage, there are three main sections:

  • Latest blog posts.
  • Links from other blogs.
  • Embedded tweets from B2B marketers.

We’ll start at the top, with the latest blog posts. Currently, the posts are displayed one after the other with no images (Except the featured post). The only visual content comes from the author avatars, though they have to fight against the large Twitter and Facebook buttons.

We want to break up the flow of text/gaps/posts into something more catchy to look at, to encourage people to scan more of your posts and hopefully click on one. Using images in your content is the ideal way to do this, but it can be difficult (Especially if you have a lot of guest authors like this!).

What we can do instead is make the layout of the post itself into your visually grabbing element. Instead of having just paragraphs of text and headers on plain, empty backgrounds, we will try setting each post into its own box. With some simple design touches, we can make that plain text much more appealing.

Homepage Boxes

Now it doesn’t matter that there is a lack of images, we’ve worked around it.

Next we want to include the pagination. There is no need to do anything fancy; just simple, clean numbers that blend in well with the rest of the page.

Below the latest blog posts section, the author has included a list of blogs from his niche, with links to their latest posts. The layout to use for each blog’s section is clear; our box designs from earlier are perfect for this (We can replace the avatars with the site favicon, and everything else remains the same).

We do need to create a separator between the blog posts and this section though, along with some explanation of what these feeds are. A title/subtitle is the obvious solution for that, but if we think back to our client’s original goal, to increase RSS subscribers, there is an opportunity for us here.

The homepage has been sliced into two clear sections so far. We need a clear separation between the two anyway, so why not insert an ad for your RSS feed? (This sort of location works great for actual adverts, so there’s no reason not to try it out for an ad of our own!).

Beneath that, we can then insert a simple title, and the blog posts below. Let’s see how it looks (Click for full-size):

RSS Ad

One thing to point out is that I have been consistently using 20px of spacing between sections in this design. That is to give the design much more whitespace, relieving the heavyset issue I mentioned at the top. The exception is the spacing between the RSS ad and the header, which is 40px. When I set it at 20, the ad dominated the title, but setting it at 40 set it apart. There’s no reason not to bend rules like this when it’s warranted.

The final section of the current homepage is a list of 10 tweets from a Twitter list. The idea is great, but they look somewhat poor on the homepage I find. For example, they currently show a list of 10 FollowFriday tweets (So basically, just dozens of @names!), and most of them are from the one person so the avatar is just repeated.

The idea of promoting others is a great one, but given that we’re going to be enhancing the footer later, we can experiment with moving the tweets to there. If the client has a good reason for having them on the homepage, there’s no reason we can’t move them back later.

Sidebar

The current sidebar is quite cluttered, and lacks any real unity between the different sections. In particular, there is a section where ads and colored widgets are mixed together. I want to break this up to make it less likely for users to simply block out that whole section.

If we start at the top, we’ll being with the social connection box. The current one has a fair amount of writing, small signup forms, and even pixelated icons. We will take out the fluff, leaving only the calls to action for visitors.

In terms of the design; because the rest of the sidebar will be in boxes, we can highlight this section by having it sit right on the background. As for the email subscription form, we will use the search form design from right above it verbatim.

In the image below, you can see the original on the left, and the newer version on the right.

Social Widget

Working down the sidebar, we will add content as we need it. We’ll start by listing the categories (One of the client’s wishes), followed by an advert (In the same location it currently is), with popular posts beneath that (Another of the client’s wishes, and lastly, their Twitter ad and stream (The least important of the modules, so it comes at the end).

Design-wise, the ads are untouched of course. The category lists and popular posts section will both use our box design from the homepage. The big change with the Twitter widget is that we will embed the tweets ourselves, allowing us to use a clean box design as well, rather than the intrusive Twitter widget currently used.

Using our boxes for our footer content makes it easy to add more widgets in the future. Just re-use what’s already there.

Footer

We’re nearing the end now, the final section to work on is the footer.

When I listed the sidebar widgets, I left out two of the sections of the current sidebar; the “About” box, and the links to various parts of the site. By doing that, we cut down on the clutter of the sidebar by taking out content that will fit every bit as well in the footer.

We will use an expanded footer, split into three sections (Lining up with the 3 columns of content above). We can group the site links into one “Get Involved!” section, and because those links are important, we’ll put that first.

We will add the “About” section to the end, as that is somewhat of a standard location for that content.

And that leaves the central section for the marketing tweets I left out of the homepage.

In terms of the design, we will tie in with the rest of the site’s design of course. In the header, I used a slight gradient for the dark navy section. We can re-use that same gradient (The one I’ve also been using on the box links, and the RSS advert) for our background. This makes it clearly stand out as separated from the content and sidebar.

The rest of the footer design is then kept minimal. We will use a simple separating line between each one, white text with orange links (The same colors we’ve used across the site, all taken from the logo), and because both the Twitter and About sections have an image, we’ll add the site’s Twitter logo to the “Get Involved!” section as well.

Here goes! (Click the image to see it in full)

Footer Design

And that completes our design! We’ve taken the current site, kept all of its content and its “feel”, but remade the layout to remove the clutter, add some extra visual appeal, and play to the site’s strengths (e.g. highlighting the social connection options, and working with text not images).

To finish off, click below to see the completed design, side-by-side with the original!

Compare

Now it’s your turn! If B2Bbloggers were your site, what would you do with it? Where would you put those tweets? Would you have kept more elements of the current design that I did?

Enjoy this post? You should follow me on Twitter!