Process of redesigning Janko At Warp Speed, explained
Since I put a lot of efforts and time into the redesign of JankoAtWarpSped (it wasn't fast as warp speed, it was rather a snail speed) I would like to share my experience, thoughts and working process. The redesign process took several months (I can't even remember when exactly I started) because I am always overloaded with work and often have only a couple of hours weekly to work on blog.
The old site
I think the old site is a good point to start the story. The issues with the old site triggered the thoughts about redesign. I performed several different tests and collected a large amount of feedback and it became obvious that it has some serious usability issues. Dark background and poor readability, for example. There were issues with navigation. Many widgets cluttered the interface. A commenting experience wasn't so great neither, and in some cases it was quite confusing. Personally, I was far from satisfied with aesthetics. Those and some other issues was a clear sign for me that I should go with total redesign.
So the main goal were:
- Declutter interface
- Improve reading experince
- Improve commenting experience to help have more people involved in conversation
- Improve aesthetics
- Provide enough space for new content
- Create design that can be aligned later without a need for total redesign
- Drop support for IE6
The importance of Agile
I am big fan of Agile principles. As the matter of fact I am working according to Agile for a couple of years, lately only with Scrum. Since I was a team of one, I decided to adapt Scrum to the needs of this project. I certainly couldn't have daily scrum meetings, but I took the advantage of iterations, user stories and product and sprint backlogs.
The image above was my product backlog and, along with several sketches, a complete requirements specification. I realized I will only lose time with traditional specifications and usage scenarios so I started with first sprint as soon as I identified main goals. At the end of each sprint (iteration) I had something that I could use for testing. Either sketches, wireframes or prototypes. However, I tested only with html/css prototypes.
Throughout many iterations I explored different ideas and concepts. Many proved to be bad ideas. And I am happy with that because the ideas I incorporated in the final design were the ones that proved to be the best.
The new design
My first thoughts about new design was about keeping it light and minimalistic. I started with classic sidebar at first, but I decided to remove it completely and go with the current solution. My main focus in the beginning was on the article view and not on the home page. Although home page is the first most visited page on my blog, about 90% of visitors land on article pages either from search engines or referring sites.
I wanted to combine hand-drawn elements (because I draw a lot and I wanted the design to reflect this) and minimalistic style.
One of the early sketches of article view and home page shows many element that proved to be bad ideas
Header and main navigation
I was playing a lot with header and main navigation. I tried with categories and rss box in header, with different background images (and without images), with many different layouts and the one I chose is the one with the minimum elements on it. Categories are no longer the part of the navigation. Readers access other articles through articles link, breadcrumb or categories in footer.
Links in navigation have a hand drawn hover background which I also use to mark the current page (other than posts). I also modified the logo a bit, so you can always see the actual logo if hover over it.
Breadcrumb separator is just one of hand-drawn elements.
Content
One of the main tasks was, as I mentioned earlier, to improve the reading experience. A light background with a lot of whitespace was a good choice. I organized 125x125 ads in one vertical column. Some may find this distracting, but it is a compromise between the needs and wishes. The intention of the left column is not just to hold meta data about the post but also to enable showing images and other content that is wider than the post width (the previous sketch shows an example of this).
Post footer shows information about the author, tags, categories and share options. There is no stupid related post widget anymore. I will create a list of related posts manually if needed.
Comments
Since commenting experience was one of my main goals I spent a lot of time thinking about the look of comment section and interactions with comment form. After many tries, I end up with the design shown below. The left column is used to show comment meta data ant the rest of the space for comment text and gravatar. This widens each comment and saves vertical space. Since I hate comments replies indentation, I was thinking a lot about how to indent replies but keep all comments aligned. I came up with the idea to indent only meta data and add small arrow before name. It turned out it was a nice solution. Since many readers scan through comment in searching for replies only, I added pale background to author's comments.
Trackbacks are placed below the comment form and are initially hidden, but can be easily revealed if needed.
The previous comment form design was confusing. It wasn't clear that comments are moderated and what is happening with the comment once submitted, there were no reply to comments and there was one unnecessary field. A new solution clearly shows what is happening with the system. Once you click on submit button, the form is submitted through Ajax. A huge hourglass is visible during the request after which the page is moved to the position of your newly added comment (this is animated with jQuery). There is a clear message above newly added comment that comments are moderated.
The image below is a sketch that shows what happens when you submit a comment, reply to comment or cancel a reply.
Home page
The home page is even more minimalistic. The last article is styled differently with meta data in the left column, image and continue reading link. All other articles contain only title and meta data below the title. A link at the end of the list redirects to a page where you can browse all articles. Although I tried several layouts, different features and traditional older and newer pagination (which I dislike, btw) it turned out that this design works just fine. Until some next realignment.
Articles page
The purpose of Articles page is to help readers find the content of interest by filtering articles by category or tag. By default, it shows latest 10 articles. If reader come from home page this will be a redundancy since they already saw a list of latest 10 articles, so I might think of some better solution for this (even though readers mostly come to articles page from pages other than home page).
Footer
The role of the footer is supportive. Readers can browse categories, subscribe, join me on social network sites, check out some of my work or read different books that I will recommend from time to time. A different styling should easily grab the attention while scrolling.
Technical details
The blog runs on the latest version of BlogEngne.NET, which I modified a lot to meet my needs. I use a touch of jQuery on several places. Color scheme is minimal, with shades of gray and blue. Visited links are a bit lighter than regular links. Lucida sans is one of the my favorite fonts on the web so there was no doubt about typography.
I decided to use grid system and I regret after a while. Not because the grid is bad (it certainly isn't bad) but rathar because it complicated things during the front-end development. I could achieve the same result with less time spent. The HTML and CSS inherited from the latest prototype so the code isn't perfect, but I really don't care much about that. I use one large image with CSS sprites for many details. For comment form and search box I use CSS3 borders that enables the level of details I wanted to have on forms, without affecting load time.
Inspiration
There is always a large number of things that influence and inspire. This is what inspired me the most during the redesign.
1. The Universe itself, but especially The Universe series on History channel and similar shows on National Geographic.
2. Drawings of Michelangelo Buonarotti and Leonardo Da Vinci.
3. Faith No More for fantastic music. Too bad I missed their concert in Budapest last year.
4. Sushi and robots website
5. David DeSandro's site
Final thoughts
I hope that I succeeded in explaining the reasons behind the redesign and each design decision. Thanks everyone for the feedback so far. I am looking forward to hear your comments and thoughts.
More articles in
Blog archive or
elsewhere