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 125×125 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.
- The Universe itself, but especially The Universe series on History channel and similar shows on National Geographic.
- Drawings of Michelangelo Buonarotti and Leonardo Da Vinci.
- Faith No More for fantastic music. Too bad I missed their concert in Budapest last year.
- Sushi and robots website
- 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.
I was worth waiting for the article :)
Keep up the good work, Janko!
Greets from Munich, majstore ;)
fantastic break down of your process, and i have to say im loving the header.
Excellent write-up Janko. It’s nice to read about what the purpose of each element is on your design. I really like the fact that each and every element of your design was done on purpose. I really love the cleanliness and simplicity of your site. The amazing thing is how you’ve managed to still implement your personality to the site with all the different subtle hand-drawn elements.
Again, a job well done!
I really like your new design, very crisp.
Great article, explains a lot. Logo modification really reflects design, nice idea.
very interesting going through your mental process in redesigning this great site. Worth a read… thanks for sharing it
Great work. In my opinion the blog looks much better now, you just create a master piece, congrats! All the hand-drawn elements merged with the minimalist style created an impressive and unique look.
Sorry my bad English.
Very nice work again. Like this style veery much!
Thanks Jad! I am glad it was useful. And looking forward to the new Design Informer :)
I enjoy reading others’ articles about their working processes so I thought it would be useful to share mine.
I guess I could have been even more restrained, but I think this works fine for now.
Yeah, the twist makes it more aligned with the design.
What an improvement! I can definitely see all of the design elements and inspiration come together. This design lets the content take center stage.
Loves it!
^_^
Absolutely love the new looks of your blog! Great job and a great article!
It’s always a treat to hear a designer explains the process behind the design. I think this style suits you very well.
I like the Ads area now is one column, leaves more room for the article content.
As I told you before, I miss that blue :) But I think that blue works better with the darker background you had before, not so much so with the new white background.
Great job!
Really love the new design, its great how you have made simple sketches and textures look so proffesional.
Keep up the good work.
really great job janko. much improved readability. way to go
Just my 2 cents, and in no way do I dislike this design I love how much cleaner it is, and here comes the but…
Personally I liked the older design more than the new one, the color scheme on this is a bit too muted for me, I see a slight bit of snook influence ( if it wasn’t it’s pretty cool how similar they look! ) in the design which is great, but for some reason the actual implementation of color on your design just doesn’t satisfy me visually like snook’s does or your previous design did. I love the blue you used in the comment button, and think that the darker blue would be a much better contrast than the current header/logo and footer blues you used.
I do prefer the lack of clutter of the new design, but the old design just felt better, more finished almost, maybe it’s the sketch feel that’s making me feel that way or the muted color scheme that makes it create a feeling of unfinished.
Opinions are like ********, everyone has one. ;)
I love the blog, keep up the awesome posts, you’re one of my top 10 reads on my reader.
I may say this post is one of your best! It just because now I know who you move on from step to another while design.
Do you do usually come across this process every time you design a web site?
Thanks for sharing the details of your thought process. Very interesting
Hey Jin, thanks for the comment, I was hoping to hear your thoughts (although I already knew’em :)) This was everything but the structured process, but given the circumstances it turned to be fine.
I kinda miss the old blue too :)
Hey Miguel, thanks for the thorough comment, I really appreciate it.
I see your point with regards to Snook’s design. Although there are similarities, his blog was in no way a part of my inspiration. Michelangelo’s and Da Vinci’s drawings (and a few of mine) had a major influence on the design.
I actually wanted to have colors this soft, although it might be too muted if many links are visited. We’ll see about this.
You are right about opinions, and I am glad that everyone has one :) I really appreciate your feedback. Thanks for placing me that high in your reader!
It depends. This project was a bit chaotic, since I had a lot of other work to do so I adapted Scrum to fit the chaos (my wife would criticize me it’s a scrum-but, but what the hell). But in most cases my major steps are sketching, prototyping and testing. I always try adapt my process to circumstances, keeping the core steps in.
Thanks Matt!
It’s always great to see that some people do think about every element they use, and how they interact – great work Janko!
Excellent post, next design is fantastic.
Enjoyed reading this post . . .
Congratulations!
The new layout are very very great. Great minimalist design and usability/readability.
This is inspiring
You know, this article is a good example of just how involved and painstaking a redesign project can be and even how the most seemingly minor of details or tactics requires consideration. Many non-designer/developers don’t truly appreciate the process. Well done, sir!
I love it. Also really enjoyed this post, nice to get into a designers head :-)
Great post! Very interesting to read about your thougt process during the work on the new design.
It was very inspiring to see your hand sketches. That is something that I definitly will start to use more in my work.
thanx for the detailed insight!
Woooo amazing post, very useful to understand the process to redesign a website, your method and sketching are really great !
I like it when a designer shares his drafts and idea’s. Great job on the website. Your methods should be followed.
Wow, really great job. The new design looks neat and clean! And also the process. I didn’t think it cost too many steps in sketch with you to make a new design, but it did. WOW, truly amazing!
Even if I like the redesign very much, I still think the previous one was better and more personal for you Janko :-)
For my webdesign i often use Leonardo Da Vinci for inspration as well. Great artist!
Nice one!
[quote]It depends. This project was a bit chaotic, since I had a lot of other work to do so I adapted Scrum to fit the chaos (my wife would criticize me it’s a scrum-but, but what the hell). But in most cases my major steps are sketching, prototyping and testing. I always try adapt my process to circumstances, keeping the core steps in.[/quote]
Looks fantastic. Keep it up.
Great article! I’m currently working on designing my own personal blog and stuff like this definitely helps… There are things I hadn’t considered that you made me realize I need to focus on, like comment system, small details, etc. Thanks!
This is a fantastic new endeavor. I’m humbled to see you drew inspiration from my work.
Worth every minute spent reading this article! Great explanation of steps you took. Such articles makes me think (how I’d do things) and are great tool when you ran into situations where you face similar issues. It’s a must-read article for site owners who care about their readers.
Hey David, thanks for stopping by! Your work is truly inspiring :)
Thanks! I am glad if this can be helpful.
I like to read others articles about their own working processes. Always learn something.
Thanks Lam!
Janko, I love the redesign. Gotta say I’m a sucker for handwriting style.
But I have one complain: there are not permalinks for comments! (or at least, I can’t find them) I tried to show a friend a comment I had read in one of your articles but I couldn’t do it.
And btw, loved the way you used Scrum even if you’re <em>a team of one</em>. :)
Insanely awesome. Really Cool. I recently started following your blog after my joining to editorial team of 1stwebdesigner. Is there any specific reason for using blog engine except of WordPress?
Cool. Loved the use of jQuery in submission of comment.
Taly, thank you very much for your comment! You are absolutely right about comments’ permalinks, it’s now on my list for fixing.
I guess there wasn’t much left of scrum besides product bakcklog and sprints :) But I do use Scrum properly with my team on work.
Thank you Saad! I’m proficient with asp.net, so that was the ultimate reason for choosing BlogEngine.
Good luck with your work on 1stwebdesigner, looking forward to see more great content :)
awesome work janko!! still can’t believe it’s blogengine.net. hope you can show us some of the key pieces in how you edited the design with regards to be.net.
rock on!
Wow I love the redesign, especially the header. Makes the whole janko at [i]warp speed[/i] name make sense since you haven’t had the colorful wormhole thing for quite a while.
The only thing I dislike is that on the homepage only the latest article has the image and description. While this reduces the amount of content on the page, it also makes it harder to scan and actually makes my eyes want to avoid that section.
All in all a great design. Keep up the fantastic work!
Hey Evan, thanks for the comment! Yeah I guess this blog missed a personality for quite a while.
Good point regarding home page. Currently I am running a few tests and we’ll see if there will be some changes.
Well, this would be the short version of changes I made:
The major changes were on default.aspx, post.aspx and archive.aspx pages as well as in BlogEngine.Core. I created several article views (user controls) and modified default.aspx and post.aspx to render these views. Articles, tags and categories views are all moved to archive.aspx.
Comments and trackbacks are separated to different user controls and latter are hidden by default. I also threw away a lot of things, like widgets, ratings and many more. There were a tons of minor changes, like the way [i]more…[/i] link is rendered.
It took me about a week to tweak the code.
I was taken with the User Stories they used at a previous contract (where I worked hard to get UI/UX deliverables into the sprints) and have tried adapting an Agile approach to my one-person-non-profit work. I set up 2 week sprints but had dropped the scrum part. Think your method works better. Appreciate it.
Wondering if you write your user Stories with acceptance criteria that outlines all the UX requirements, like translating your goals into testable/writable items?
Thanks Susan. It is indeed hard to be Agile in a team of one.
I keep user stories very simple – a short paragraph written to be understood by anyone who reads them – from stakeholders, to designers and developers. This is how I used to work with my team. Then we use them for decomposition and writing specs.
Great article about your redesign, I’ve never seen the other design so I can’t really compare the out come. None the less this was a good article for me and encourages me to try a different approach to my own redesign. At the moment I’m reading a lot of blogs about starting a new site or redesigning one and this is one of the best! The sketches are really explaining a lot, thanks again for the great article.
One remark on the sketchy effects, I would’ve made a few different arrows and highlights. Now all the menu items have the same highlight image. But that’s just my opinion!
Oh and there’s a spelling error in the trackback tweet you posted! I’m going to tweet this myself, is the trackback automatically updated?
Thanks for the comment! I missed that error error with tweet link, will fix that. There are two background images for menu items, one for narrow ones and the other one for wider items :)
[quote]There are two background images for menu items, one for narrow ones and the other one for wider items[/quote]
I noticed that, but still I would make a different one for each menu item. It isn’t a lot of work and it just makes it a bit more sketchy. Something else I noticed while writing this second comment, there’s no reply function to your reply. I think this would be an easy function which could be useful.
You are right, but that was one of the things with lower priority so I decided to go with these two.
You are right about replies. I first thought to enable only [i]reply to thread[/i], because I hate indents when nesting comments, but I managed to avoid nesting more than one level anyway. Will fix that.
Cool, i really like the logo and header sketches – its totally different form the previous design…so light! nice touch with the author comments too.
Epic man, I really like the cleaness of this site, the hand drawn looks suits it, tried this a few times myself but I always failed :)
Congrats on getting it spot on :)
Thanks Max!
Love the redesign, and love the forms. This is one of the small number of sketched-style designs that actually gets simplicity and consistency spot on. A lot of attempts at this come off overblown and disgustingly messy.
Your choice of interface elements and structural layout are great, when you [i]do[/i] add sketched interface elements they aren’t overdone. This is a great display of how knowing when to hold back can generally improve the overall visual function of a design. Excellent work.
Well you certainly have been busy. Your redesign is certainly focussed on the visitors like any good redesign should be!
Loving the Faith No More picture by the way. Mike Patton is a legend.
Thanks for this – always good to see other developer’s design processes – website looks great by the way!
Wow! You are certainly an inspiration to my future work. The new design is awesome! I’m a big fan of minimalism and I think you achieved it spot on. Thanks for sharing your design process with everyone.
Hey, thanks for all the effort, good article
I really like the way you organized the process of redesign and I relly like the sketches you made, they are really similar to my own ;o)
Why do you use Flickr for image viewing? It requires more clicks to see the image, plus it’s slower.
I regularly publish some of my sketches and other work on flickr, so I just linked to what was uploaded before. It is a but slower, that is true.
Hey Janko, Absolutely amazing, it has cleared the process to me.. finally got what i wanted from so long. U Rule!!!