Redesign of Problogger.net

August 11th, 2007 / 47 comments / design

Problogger.netIn late May Darren Rowse, the Problogger, asked me if I’d be interested in redesigning his blog Problogger.net. About two years ago I think I saw Problogger for the first time and it was the place I learned a lot about blogging - best practices, writing content, etc. Since then his RSS feed has been a daily read in Bloglines.

So when he asked if I’d like to redesign one of the most popular blogs on the internet I was pretty excited.

I always try to give clients my best work, but designing for such a large, vocal community added a bit of pressure. If I didn’t do a good job they would almost certainly let me know where I made mistakes. And so the process began, or as much of a process as I have - my design flow changes with every project. Sometimes I sketch out some wireframes (for Problogger there were probably 20-30 sketches to start) and sometimes I just jump into Photoshop and start arranging boxes.

The Goals

In the broadest terms, the primary goal for the redesign was to give Darren a platform to expand the Problogger brand. We needed to create a design that could easily incorporate more than just a blog while realizing that the whole point of this website was to teach people about blogging.

Darren also wanted to highlight old content that hasn’t lost its value. The sheer number of posts at Problogger make this a challenge - there are a lot more than ten great posts - there might even be more than 100. How do we get people to go back to these old posts without taking them away from new content?

Darren, much like Brian Clark, puts a huge emphasis on his RSS subscriber count. A blog with 10,000 unique visitors is nice, but when you write an article that is instantly sent to 25,000+ subscribers your blog has significant value - those people are waiting for updates, they aren’t casually browsing the web. We needed to make subscription options obvious and easy to use to get from 25,000+ to 50,000+ and higher.

Also along the lines of building a loyal fan base, we needed to get people from a single post page that has been linked by another blogger or submitted to Digg to get deeper into the site. We wanted to turn that casual visitor into a loyal, returning fan. Once again, easier said than done.

Tackling the problems

Goal 1: Give Darren a website that can expand with the Problogger brand

This was the broadest and most important goal. I’ve designed a lot of blogs, but never one the size of Problogger. Given the size of the community Darren has built up it makes sense that he might want to expand the brand down the road.

Incorporating those plans - which don’t necessarily exist yet - into the design consisted of building a front page that could expand and be realigned quickly and easily down the road. This allows Darren to adjust the front page easily to incorporate new pieces of Problogger - whether it’s the redeveloped job board that’s launching in a few days or forums down the road, adding new content to the front page is a breeze.

Goal 2: Highlight old content

A lot of blogs do this well, but not a lot of blogs have as many posts as Darren does. The posts span many years and he often posts more than three times per day. Rather than simply list popular posts in the sidebar I used some DOM scripting to create tabs on the home page that present four different sets of popular posts - all time, monthly, beginners, and Darren’s favorites. The all time and monthly popular posts are using a modified version Alex King’s Popularity Contest, the other two sections are static.

This is not available as a WordPress plugin - you can build one yourself using code from around the internet, but I don’t want to spend time creating a simpler version that is expandable for other people’s blogs.

There are also a few other ideas for highlighting older content that we’re going to be adding down the road including rotating banners and maybe some more widgets - we’ll see how well the first attempt works first.

Goal 3: Increase the subscriber count

If you look around the blog you’ll notice there is a pretty big emphasis on subscribing. We didn’t do anything extraordinary - we added a link at the bottom of each post, but a “subscription widget” above the ads, and made sure to make all the RSS links stand out with icons and brighter colors.

Goal 4: Turn one time visitors into loyal fans

This is something every blog is (or should be) trying to do. We listed recent posts and related posts on single post pages. This has worked well for me on other blogs and with the quality of Darren’s content it should be sufficient to drive people deeper into the site.

Once we integrate the rotating ads that are focused solely on Problogger content we will have three obvious ways for people to find more content - this should be more than enough and won’t take the focus off the page they were originally interested in.

Successful redesign? Sure

Was the redesign a success? The reaction from people has been good so far, but there are always things that could be perfected. We’ve been ironing out bugs the past few days and integrating a few suggestions from people’s comments.

I am sure I will be tweaking the design for the next week or so, and even so it will never be perfect - but that’s the deal with design. I am happy with it and I feel like I put the best possible product out there and came up with a few innovative ideas to push blog design a bit further, but I’ve already started my next design and I am already coming up with new ideas, so we’ll see where it goes.

What Next?

47 responses so far ↓

  • Fantastic work Ben, you help Problogger integrate even more content and making it look cleaner.

    By any chance, how did you get this gig with Darren?

  • I’ve known Darren for a little while from doing work with b5media - the blog network he helps run and is a member of.

    As with almost all of my work - word of mouth played a big part ;)

  • I think the design is great. To be honest, I wasn’t a big fan of the previous design, so it was a change for the better in my opinion.

  • I have been admiring the new look and feel of ProBlogger for the past two days. Exceptional work!

  • Ben.. I’m very much interested in redesigning my blog. Would you be willing to help?

  • Kanwal - unfortunately I don’t have time to help with redesigns - if you want to hire me you can email me and we can talk about it more.

  • Kudos on the redesign. If I were you I would have been nervous as heck, but you did a great job.

    Keep it up!

  • First of all, congratulations on the design. It is a masterpiece. It is so clean and organized.

    I am going to tell as many people as I can about this article.

  • It’s very beautifully.

  • […] the new look has written a post on some of the reasoning behind the new design at his blog called Redesign of Problogger.net. In it he shares 3 parts of the brief that I gave him and how that unfolded from his […]

  • Great job on the redesign–it’s a huge improvement over the old site.

  • I love your redesign of Darren’s blog, Ben, but one thing I’d like to point out is the increased READABILITY of the blog. The old design was hard to read for older viewers. The new design is much cleaner and the text is larger.

    I already loved ProBlogger.net before the redesign. ProBlogger.net 2.0 is gonna take blogging to a whole new level.

    You did a spectacularly magnificent job of redesigning ProBlogger. Darren’s brand is going to explode geometrically. The blog is simply dazzling!!

  • Great design - I’ve always liked ProBlogger but never spent any time on the site (just read through RSS reader) because it was so dang ugly to look at.

    Now I find myself looking at more and more content simply because of the design - great job!

  • As someone who always designs his own blogs and many blogs for clients, I want to pass along my admiration for your work. In particular, you did a great job on the home page.

  • I love the design. Followed this link from ProBlogger.

    What I might like most about it is that from a blogger’s standpoint it probably takes pressure off Darren. Because with all the older top posts on the front page, he’s not just “worth as much as his latest post.”

  • Fantastic work! :)

  • Great work, Ben.

  • Kudos Ben on a wonderful redesign.

    I especially like the separation of the home page from the blog to give it a more portal feel and potential.

  • Hi Ben, followed your link from Problogger, I have to say this is an amazing design, you did an awesome job! congrats! ;)

  • You’ve done a sterling job, Ben.

    I believe this is my first visit to your own blog, via Darren’s mention.

    Now I’m off to read a few of your most popular posts that stand out from the rest.

    Take it easy.

  • Hey Ben,

    Hope you don’t mind, but a friend of mine pulled apart the design a bit on my blog. Mostly typographical things, but we wanted to let people know that there are still improvements that can be made. (I, personally, find the front page too busy, though I understand why it is…)

  • I agree. The site looks great. You did a great job. What are your rates? Availability?

  • Eric - feel free to email me for rates/availability - it seems to be changing constantly :)

  • Nice redesign Ben.

    I think you did a good job assessing the goals, and letting that drive your design.

    I think 3 columns was the way to go, well done.

  • I like the colour theme you used… good job at keeping it simple, too.

    I always go too crazy with these things.

  • Great job Ben. I was wondering where you’ve been for the last few months as you’ve not been blogging, but now I know! :) Congrats on a successful redesign of one of the most popular blogs on the net. I’m sure this will do wonders for your business.

  • Awesome job. Today was the first time I noticed the new design, when I was searching some of the Blog beginner posts (to show to a new copywriter for one of my blogs). And with your new tools to open up the old (succesfull) content, I immediatly found what I searched for. Perfect 10!

  • Ben, I’ve always liked your design work (I owned thepokerblog.net for a while - bought it from Andy), and I think the new problogger has very complementary colours.

    It’s true there’s a mass of information on Darren’s site, so it’s not an easy task designing the navigation. And given that that’s the case, I think you did an excellent job.

    I particularly like the colours of the new logo. But design is such a personal thing. You can’t please everyone.

  • Nice job on the redesign. Thank you for getting rid of those stale colors. However, the sidebar is still messed up in IE6. You probably need a div class for clear: both at the bottom of the sidebar. Also, thanks to IE6s idiotic margins, they most likely need to be changed to accomodate it in that browser.
    Looking good in firefox and opera, though. Just that pesky IE6 thing.

  • […] the new look has written a post on some of the reasoning behind the new design at his blog called Redesign of Problogger.net. In it he shares 3 parts of the brief that I gave him and how that unfolded from his […]

  • Brilliant redesign!

    I know you said you’re not interested in writing a plugin based on the “most popular posts” function you built for use with other blogs, but if you ever do, that would be cool.

    Glad to have found your blog. Looks like you have some great content here!.

    Best, Sully

  • […] These blogs et al, are pushing the envelope of blog design as we currently know it, and it’s a good thing. Good for bloggers, good for users. I for one, couldn’t look through ProBlogger’s recent refresh without asking, how can I restructure my own site’s layout in a more functional and friendly way? Especially after reading this. […]

  • this design is much better and cleaner, especially having the navigation bar to the right & bottom of the page

  • fantastic design. and you get a permanent link at the bottom from darren’s page. a double whammy awesome.

  • Nice site re-design, but it seems to be having problems with IE 6.0. (I’m on Win XP Pro SP2) 1280 x 960. (Last column bumps down after content on middle column.)

  • […] [DESIGN] Redesign of Problogger.net (bleikamp.com, 7 saves, 9 inbound links) […]

  • […] linked to from here, and linked to a post by the (re)designer, Ben Bleikamp. Ben explained that the primary goal for the redesign was to give Darren a platform to expand the Problogger brand. Posted by Andrew Filed in Blog, […]

  • […] se l’articolo non tratta niente di tecnico, ma illustra solo alcune considerazioni sui problemi elencati e […]

  • […] Redesign of Problogger.net […]

  • WOW! I’m really impressed with the Problogger design!! Great work!!

  • Nice work! Look pretty slick. :)

    By the way, do you the font name for your blog header? I’m trying to find something similar for my projects but hadn’t luck…

    Take care.

  • Truly great work comparative to recently redesigned John Chow…

  • congrats on the awesome redesign for problogger…!

  • Thanks for making one of the Web’s best blogging sites even better. Your attention to detail shows.

  • […] probably the biggest revolution in blog design recently has to be Ben Bleikamp’s redesign of Darren Rowse’s Problogger. With a static front page highlighting blog posts, […]

  • […] Mike’s write up of the process and Ben’s on the design of ProBlogger you should get a pretty decent insight into the process that we went […]

  • […] The guy who designed ProBlogger’s new layout has recently posted about the process of redesigning the site. […]

Leave a Comment