Know How To Plan Your Website Redesign & Get Inspired

Advertisment

With this article I will start very serious article and experience series, showing you step by step how we will do our redesign process. I sat down one day and wrote all little steps I will need to do in order to create, plan new design, code it to successful and finished result and now I am hoping to go through those steps myself and make them reality. I wrote down several pages just about those steps and now I will research them further, learn a lot myself and finally will try teach you from my own experiences my best way how to do redesign.

Throughout whole article I will also feature successful redesign of popular blogs showing BEFORE/AFTER screens, enjoy!

We’re sick and tired just from theory, so this time I will give you some serious sneak peek insight in our own website redesign process. I just hope it will not take too long for us to complete and describe it all, but actually will help to bring this whole website many steps further. We hope to get you involved as well, because we will make different polls, discussions, questions to help us decide what you want and what works the best for this site.

Let’s start just by dropping down important points we need to go through before planning redesign and actually knowing what we need to change in order to be succesful!

Goals or redesign process? Think at first why and do you need redesign at all?

Maybe you just need to change some little sections in your designs and it will work for you? Maybe small color, design changes would solve and freshen your design? Usually the best way is to change small points for design regularly, because need of redesign usually come when you haven’t done anything at all with site design for a long time and one day realize that it looks very outdated and you need to change it seriously. In that case you will need to put there big time and efforts, where small regular changes would help your design daily and also wouldn’t be so painless as complete redesign.

Read this article from ListApart to understand my point – Good Designers Redesign, Great Designers Realign.

Site has grown and content has been changed

Surely you don’t write about exactly the same topics you wrote 1–2 years ago and maybe you need to expand those topics? With growing amounts of content from time to time, you need to change and find better ways to arrange it, make all your important content easy to find and scan.

You need changes – How To Plan Them?

Now I tried to pin point all most important aspects you should think through before planning to design new site design and code it. Do those steps with me and I assure you, when you will need to do actual design and coding you will know exactly what you need to change and how to do it!

1. Analytics is your best friend. Use it!

I use Google Analytics and I know exactly when I changed from my previous design to current one, so I can see and inspect what has been changed, what’s working, what is not. Analyze top landing pages and top exit pages, try to understand why one is working, when other is not.

Try to think how to increase your site page views, maybe with previous design you had more page views per visit? Monitor your history to find answers to those questions.

Try to look from eyes of your visitors – if you would be visitor from Google, social media site –  where you would look, what would make you stay on that page longer and what would make you immediately go away? Ask your friends to check those top landing and exit pages, do some polls to understand where is a problem.  Spend some serious time in your analytics, it will give you amazing results!

2. Clear set of future goals and understanding

Sit down and write exactly what you need to change, what is working, what is not. When you think of something you need to implement in new design – try to answer question yourself – Why?

Why you need to add that feature, how you and your readers will leverage from it? Maybe you need something different or you don’t need that new feature at all?

Do you need new branding or you want to just freshen up it a little bit to make it more up to date? Think what you need to do to make your new design more user-friendly, make it intuitive and familiar for visitors even if they visit your site for the first time. People get used to designs and sometimes big changes makes them confused or even turn away – don’t let your site to achieve that negative effect, always put your visitors in the first place!

3. Modern design, appropriate to your niche

This is very important point as well. Each niche has its own trending and appropriate designs – tech, social news type websites usually are very light weighted and fast loading ( check Mashable, TechCrunch for example). For design type websites this trending is completely opposite, designers are ready to sacrifice site loading speed in order to make it more beautiful, richer with nice icons, small gradients, eye-candies and maybe even huge, design-rich backgrounds. Check for example – Tutorial9, WebDesignLedger.

Design needs to be relevant to niche and you should use new technologies, following trending. Maybe even try to understand where design and technologies are going to put even step further as your competitors.

4. Evaluate, analyze your current design

Visit your own site now and write down what is working now, which goals it is fulfilling and which one is not. Run heat map for your site to see where your visitors are clicking the most.

This point differs from analytics tool part  because now you just focus on design emphasis, placements, understanding which parts are outdated from design or technology point of view. Also we need to consider which parts of design we need to transfer in new one as well.

5. Visit and compare competitor websites

It is a very good thought to visit competitor websites from the same niche to learn from their design, understand what features you would like to implement and maybe even use more effectively. Take a pen again and write what you like, dislike in design and why it works!

Understand what you should integrate and which mistakes you should avoid.

Now I will share a small tip I found to be very valuable for me. Lately I’ve been reading a lot of interviews and usually those are very valuable too, since succesful people share their experiences honestly – you can learn from their mistakes and advises in order to do kick-start yourself right away!

6. Think how you will convey information in new design layout

Understand what you need to put above the fold, plan your article, layout structure in order to make it better. Which colors you should use, why? Why you should choose light layout instead of dark one? Ask yourself always that question – why? (I am repeating sometimes, but only because I want to emphasize the most important points you certainly shouldn’t need to avoid).

Do you need two column or three column layout? Start to sketch your layout structure, each section need to have certain purpose, you should clearly understand and be able to explain for yourself.

7. Search Engine Optimization (SEO)

Don’t loose your SEO while transferring to new design.  Try to avoid your main sitemap changing or if you ned to change permalink structure use necessary tools so Google would be able to understand how your link structure has been changed and you wouldn’t get broken links.

Implement certain related tools from old design to your new design as well.. For example I am using thumbnails throughout my whole site. If I wouldn’t think of this in new design, I may face some serious problems where I should implement those parts manually or even I should go all previous articles to change that part. Such tweaks may be necessary to change anyway, but it’s imporant that you are being aware of such things before redesigning. Plan everything!

Read more about SEO and maybe with new design you could add some more easy SEO features you are not using right now like user-friendly image naming, sitemaps, tagging.

8. Think about functional, user-friendly website at first

Before actually starting to draw design, you need to think about functions this design will need to fulfill. Think about user experience, creating site very intuitive. For example you have two navigation, where one will be used daily, but other..maybe is secondary and not so important. You need to think how to distinguish subcategories, add emphasis to correct categories.

You need more subscribers? Put big,bright RSS button in above the fold section, use white space and layout to support such important emphasis!

What I wanted to say is that you need to have clear understanding of features, functions at first and just after that you can plan how to give those functions beautiful skin and look.

9. Increase User Interaction

This is small optimization point I will try to implement in new design. Everybody wants to get more regular visitors, but we need to work on it in order to get some well-earned regular traffic in exchange! What do I mean?

Add polls, create events, call people to action so they actually feel as part of community! Add community news, count comments and give credits to most active readers! I visit a lot of design blogs daily just because I use them for promotion submitting user news, but in meantime I am of course reading there the most interesting articles I occasionally see while submitting.

Why I am mentioning user interaction in redesign process?

Because you need to plan it in design as well! You need to give some spotlight to regular visitors offering little games (like counting comments, giving special badges to registered users) and plan space in footer for example to give some earned link there.

PSDTuts had comment counting system half a year ago, where I was commenting each post like crazy because I got then “top” space in most active reader section. Good thing was, this counter was resetting each month, so I would need to return there each month to earn that space in footer.

10. Put in use new technologies

I will repeat myself again, but with a little bit different focus now. Avoid using Flash, or supporting old browsers if your visitors aren’t using it anymore. Make use of new CSS3, HTML5, Javascript features!  If your readers are using old browsers, educate them and explain why they should transfer. I don’t think you need to waste a lot of time making your design to look good in IE6 browser anymore!

Don’t forget to update static pages on your site!

Right, now you should have a lot of notes and comments gathered. Order everything now so you have clear step by step understanding how redesign will go and what you need. Now I will show some successful redesigns for you so you can get some inspiration and understanding why previous design was working..but new one is working better.

For further reading I also found several very exciting stories where designers reveal behind the scenes process of their site redesign and more! Very interesting reading and valuable for planning your own redesign:

• Behind the Scenes of the DesignBump Redesign
• Behind the Scenes of the Design Informer Redesign
• Redesigning the ExpressionEngine Site
• Redesigning Your Own Site
• 11 Signs That its Time for a Website Redesign

Keep updated, because I will continue with other redesign process article series, where I will expand and research further important aspects I touched lightly today:

• How To Monitor Your Website With Analytic Tools
• Being Aware Of Simple SEO And Put It In Use Daily
• Sneak Peak Insight In Trendy Blog Design: 2010
• How To Increase User Interaction, Succesful Examples
• Wireframing – Owning And Understanding Your Sitemap
• Planning Your New Design – Typography, Layout, Color Scheme
• Handy Toolbox For Successful Redesign ( Will be expanded in categories)
• Will be continued..

Sounds cool? I am excited as well to see how these series and planning my own site redesign will work out!