Over the past 2+ months, XP-Dev.com has grown a good extent, and I want to thank each and every one of you. Your blogs, tweets, general word-of-mouth and feedback has made XP-Dev.com what it is today.

Once of the things that have promoted XP-Dev.com is its user interface. Whenever I updated the web design to something new, it has always resulted in an increase in traffic, and it wasn’t just a 2% - 5% increase in traffic – it was something to the tune of 20% - 30%.

The web (re)design did take some amount of thought and discussion before it was released,a I want to share how I’ve ended up with the current web design.

1. Back in the Days (Version 1)
2. Version 2 - a step in the right direction
   1. Design 1 - Futuristic
   2. Design 2 - Simple
3. Version 3 - Fixing it all
4. Lesson Learned

Back in the Days (Version 1)

XP-Dev.com has been around since March 2008, though it stared in a very odd form. It offered subversion hosting and some basic project tracking, though the project tracking portion was just a single user platform.

The first version of XP-Dev.com is below:

The “motivation” behind this design was: no motivation. On a serious note, I wrote it once and just needed something to display a simple project tracker while I was developing it. The response was not fantastic at all. Once in a while a new user would register and not use anything but the subversion portion. The project tracking (lets not forget that it was only enabled for single user, i.e. no collaboration) features were hardly touched by anyone.

Version 2 – a step in the right direction

Sometime in October 2008 I decided to rewrite the whole platform, and at this point I figured that I needed to revamp that whole look and feel so that it was more Web 2.0-ish and would look more appealing to the general crowd.

I did a couple of designs.

Design 1 – Futuristic

Demo page

I decided against this design as it felt really weird and way too dark. The motivation behind it was to feel like the website was from the year 3000. Clearly it was a failure.

Design 2 – Simple

Demo page

Demo page

So, after looking at the dark, apparently “futuristic” design, I stood back and decided that I would just go with something really simple. This simple design just had a menu running on top and a fixed width body for the content.

The problem with the front page was that it took too much real estate at the top and I didn’t like the fact that when users were logged in, they would have a lot of their content some 20-30px from the top of the page. So, I had a “logged-in user” version of the look and feel as well. One that does not drop down all content by 20-30pxs.

I wasn’t too happy, but just went with it.

There were a few drawbacks:

• I made an utter mess from on the font sizes of headings which resulted with all wiki pages looking really weird.
• The fixed width content body is never ever a good idea for websites that need to display a lot of content. Good project tracking tools need to be enough given room.
• The color scheme sucked. I’m sorry, I hated it.

Version 3 – Fixing it all

I felt that the problem with the above templates was that I was not approaching website design scientifically at all. So, I decided to write down all my thoughts to a wiki page and then move on to the implementation.

You can view those notes here.

There were two parts to my approach (view the full version here, this is just a summary):

1. Design. What the website should be:
   1. Intuitive
   2. Brief and concise
   3. Sectioning/Compartmentalisation
   4. Consistency
2. Implementation. What the website should have:
   1. Top banner
   2. Crumbs
   3. Two Column Layout
      1. Left Column
      2. Right Column

This is what I came up with as a first cut:

Demo Page

When I looked at it, I was really happy and thought “OK, this is going to be the final version that I'm going to use”. However, after looking at the development version for a few days, I really hated the colours. They were simply too warm, and at this point I felt that any XP-Dev.com user will basically hate the website after a few months.

Moreover, the logo was way too big which was essentially the same problem from Version 2. It took up way too much real estate near the top of the page.

So, I experimented with a few colours and made the logo smaller. My initial plan was to make the menu at the top into “tabs”, but then decided againts it as there was the crumbs on every other page that will help in navigation, and it might look crowded once I keep adding more features that needed top level menus in the future.

In the 11th hour, the final design was completed:

Demo Page

Lesson Learned

To be honest I spent far less time on the final version compared to the previous versions, and I think the reason was that my approach to designing the website was more scientific.

I hope the web redesign notes will be helpful to anyone who’s thinking of redesigning their webpage. I’m definitely going to follow a similar approach.