Redesign: When To Relaunch The Site and Best Practices

Advertisement

Redesigning a website is a big job (needless to say) and should be handled with care. Many of us with a portfolio, blog or other website have probably thought about a redesign or at least know we need one. For many designers, though, that redesign never comes. As big and important as it is, the job can turn into a hugely daunting task that we put straight on the backburner of our to-do list.

Why is doing a simple redesign so daunting? Why is it so difficult to follow through, even when we’ve decided to do it? How can we work on designing our clients’ websites successfully every day and then perpetually neglect our own?

The problem is both a lack of correct planning and a lack of understanding of the root need for the redesign. Once we’ve identified these elements, we’re set for success. In this article, we’ll discuss how to plan and execute a redesign, and how to find the perfect timing for it.

Also consider our previous articles:

What’s All The Fuss About?

Every designer has their own clients and projects. Every day, the designer handles their clients and earns a living for their hard work. When they have spare time on their hands, they may work on side projects that help their personal growth or gain marketing exposure, or both. Sometimes, that side project is to update or maintain their portfolio.

To most, this schedule is all too familiar. The point being: we usually give our side projects a low priority, no matter how much we love them. Although we’d like to develop our website, our time is limited, and clients come first. It’s no wonder that we never find the time or energy to redesign that special side project of ours.

We usually manage to squeeze in time to work on our redesign, usually at the end of the day, in the hope of finishing it a bit at a time. This may seem viable at first, but trying to be productive at the end of a long, stressful day is no way to go about this effectively. We’ll often find ourselves thinking, “I’ll work on it tomorrow.”

Redesign Fatigue

Another reason we don’t follow through is that we can’t articulate why we need a redesign in the first place. What should be included, and what should the process look like? When we finally open Photoshop to get started, we realize we don’t know where to begin. All we know is that, for some reason, we are not satisfied with our current design. This leads us to our only tangible conclusion: the new design has to be better than the last.

And so we are never fully motivated to work on it: we get tired and confused and we put a lot of pressure on ourselves for perfection.

Understanding why we have failed, though, is the first step to success. Let’s look at how to combat all of these obstacles and get that redesign done. Let’s finally cross it off our to-do list, shall we?

Should You Do It At All?

Not every website should be redesigned—at least not at any given time. Being bored with your current design is no reason to change it. In fact, that’s a very poor reason. The purpose of a redesign is to improve usability, update the brand or take the website into a new era.

If you have no good reason for it, a redesign could actually be detrimental. Below are a few reasons why:

  • People love consistency. We love consistency in the websites we visit every day. Whether your website has a large following or not, its design is tightly bound up with its identity and is, in fact, part of your branding. With a complete overhaul, would the website still be recognizable to those people? Would they love it just as much, and would it suit their tastes?
  • Redesigns take time. Planning, designing, trying different things, detailing, development: this is all time taken out of your work day. The redesign may not be a paying job, but it can be worth it if it serves a clear purpose. If it’s needed, take the plunge; if not, why bother? Ultimately, don’t redesign out of boredom.
  • With incorrect or careless planning, you could seriously impair usability or degrade elements. In trying to improve the design, we could very well be making it worse.

We crave a redesigning so much sometimes that we don’t consider its purpose or how a misguided attempt can lead our business astray. If your website could use a bit of cleaning up and not a complete overhaul, consider the option below.

Redesigning vs. Realigning

Cameron Moll wrote a popular article on A List Apart way back in 2005, and it is just as relevant today. Good Designers Redesign, Great Designers Realign4 compares people who constantly want to redesign their website and people who upgrade or “tweak” their website as necessary.

“…the differences between Redesigners and Realigners might be summarized as follows: The desire to redesign is aesthetic-driven, while the desire to realign is purpose-driven. One approach seeks merely to refresh, the other aims to fully reposition and may or may not include a full refresh.”

Check out the full article to see exactly what he means and for further arguments. Before undertaking a redesign, ask yourself, “Does this website need an entirely new look or just a few tweaks to make things look and function better?”

Realigning5

If you’ve decided that a complete redesign is not right for your website, then congratulations: you’ve just saved yourself a lot of time and unproductive work. You may have chosen instead to realign by updating the look of the website, adding interactive elements, improving user-friendliness or something else entirely. You may have chosen to cut things out and minimize the design to highlight the bare necessities.

If you’ve decided that a redesign is still necessary, which it could very well be, then the rest of this article discusses how to make it successful. The first phase is to plan adequately.

Finding The Right Time

Because a redesign will take up so much time, planning ahead for the project’s specifics and timeframe is important. A designer should create a timeline and set a schedule for their own project, just as they would for a client.

Find the Right Time

Redesigning Is A Project, Not A Chore

Don’t set up a schedule that allows you the excuse of, “I’ve done enough for today” or “I can do this tomorrow.” If you set aside two hours at 1:00 pm every working day, the redesign will get done. Make it a task of your working day, rather than a chore at the end.

Just as you allocate time for new clients, do the same for this project until it is completed. Once you have set aside time each day for it, be conscious of it and schedule other client projects accordingly. You may need to take on fewer clients during this phase, so be prepared financially as well.

What Time Is Best for the Website?

Finding the right time for the website is just as important as finding the time in your schedule. If you’re redesigning your portfolio, are you in the midst of pursuing any clients. If so, would seeing your website under construction scare them off?

Do you plan on any big changes, upgrades or features that could coincide with the redesign? For example, Smashing Magazine timed its redesign to coincide with the introduction of the Smashing Network, rather than just redesign the blog alone. Redesigning any sooner or later would have been pointless; the new feature made a greater impact by being a part of this other change.

Review your goals for the website and upcoming changes. Planning your redesign around them would probably be most effective.

The Planning Stage

To answer the “Where do I begin” question, we must plan appropriately and in sufficient detail. Without a plan, we’ll run into problems later on, causing us to make many fixes and perhaps give up. Or we might finish the redesign (or come close) and realize that it is not coming together as well as we had envisioned.

So, planning is essential. Below are the elements that need to be planned before starting the redesign or even sketching ideas on paper.

Content Requirements

At the beginning, many designers will start thinking about navigation placement, visual elements, the “feel” of the website and so on. For whatever reason, we don’t think of content first. But we should.

No matter how cool Web design is, content is still king. Good design helps, and so a good redesign will help, but it won’t keep the website alive. A redesign requires one to think about readability, imagery and detailed typography (e.g. tags such as pre, blockquote, ol, ul, etc.) first and foremost.

Assess the current website’s readability. It may be great, but could it be better? Even if it’s readable, look for weak points:

  • Is there enough contrast?
  • Do the alignment, baseline, line height and so on complement the design?
  • Does the width of the content area help or hinder the readability of the content?
  • If the design is flexible, at what point when it stretches or contracts does the content become illegible?
  • Do style elements such as pre and blockquote serve their purpose and stand out?
  • Is the font suited to the letter spacing you’ve set, and is it appropriate to your audience and industry?
  • Even if readable, could the typography be enhanced by vertical rhythm, a typographic scale or something else?

For more information on many of these matters, check out 8 Simple Ways to Improve Typography In Your Designs6.

Get out a notebook and thoroughly analyze the typography of your current design. Get feedback from others (both designers and non-designers) on readability, content placement and overall typographic appeal.

One more thing to consider for the content area is the type and size of your existing content. If images have always been a certain width, the content area’s width will need to be matched accordingly. Likewise, content inside pre tags will not naturally break to the next line or adjust to the new content area’s width (after all, that’s it purpose), so take that into consideration as well. Depending on the website, video, imagery and other multimedia may require a redesign to accommodate the content area’s width and position.

Plan for Content

As a general rule, do not redesign the content area to be narrower than what it was before, otherwise a number of complications could arise. If a wide content area has compromised readability, though, approach the resizing systematically. Resize images and optimize content first, then do the redesign.

Back-End Requirements

This stage applies more to complex websites, websites that have WordPress themes or ones with automated content management. Because many designers have websites that fall into this category or are looking to upgrading their website to a more automated system of maintenance, this step in the plan must be considered.

Many websites have specific technical requirements, as well as features that need to be customized. When we did Webitect’s7 redesign, we forgot to plan for some such features, leaving us with a much longer conversion process than expected. Our previous theme used WordPress features such as excerpts and custom fields to help manage the content on the front page. By not planning for this, the new theme did not have these features implemented, and we were forced to manually customize each post accordingly. Situations like this need to be taken into consideration with other websites and planned accordingly.

Backend Requirements

Giving specific examples is difficult because each website’s conditions are different. To aid the process, write down a list of special requirements that need to be implemented, so that the conversion to the new design is smooth and no features are forgotten. Taking the time to organize these specifics will save time down the road.

New and Updated Goals

A great redesign should account for how a website has developed since the last design was implemented. To correctly do so, one must analyze exactly how it has developed. What goals of the website have been achieved or expired, and what new goals need to be formulated?

If an new goal for the website is more user interactivity, a number of design elements could be implemented to achieve that result — in addition to all of the technical elements. Perhaps that means a better contact form, a more prominent “call to action” button or a more trustworthy design and color scheme to exude credibility.

With a redesign, we must start over, in a way, taking a fresh look at the website and where it needs to go. Below are a few resources on formulating and achieving your website goals.

It’s About What Visitors Want

During the planning stage, consider what the visitors actually want. Conduct a poll, ask people directly, and especially ask those who have never visited the website before (via forums, community websites, etc.) for their fresh eyes.

Aside from asking visitors directly, you must understand your target audience. Many people do this during the planning phase of the initial design, and probably a few times throughout the course of the website’s life. However, a thorough in-depth analysis needs to be done again, and the redesign should reflect the interests of its users. Even for a website with a small audience, such as a portfolio, what kind of client is it currently attracting, and what kind do you want it to attract? Both questions should be considered to push a website in the right direction.

This is also the time to address any accessibility issues that the old design may have had. Think not only about what users want, but about what they need. Would the redesign benefit from a dark or light background? Would it benefit from larger or resizable text? What about a fixed or fluid design?

Study Analytics

Optimizing

As a website evolves, so does its content and keywords and probably your business plan as a whole. A redesign requires a fresh look at optimization. What are people searching for to get to your website? Where are they coming from? Are they finding what they need?

Optimize keywords, content placement and other SEO-related elements. The redesign is a great time to overhaul the website’s optimization systematically, so that the new design enhances it, rather than gets in its way. It’s also a great time to plan for the website’s loading speed. If it was slow before, a good redesign would make it faster.

Redesign aside, this step will also help you better assess your current content and how it can be improved. Better content goes great with a new look.

Check out the resources below if you are unsure where to begin:

Review Competitors

After obtaining this preliminary information, it’s time to start thinking outside the box. A quick review of competitors’ websites can help. Needless to say, don’t copy them, but noting their strengths and deficits is a great way to build your own website.

What design features do these competitor websites use? What is their content like? And what do they highlight? You may want to use similar techniques in your redesign or draw new ideas based on what you’ve seen.

Draw a list of competitors and take proper notes in your research. It will help you better understand your own design style, where they’re lacking and even what their goals are.

Analyze the Current Design

Of course, we’ve been analyzing our current design all along in the steps above, but when you go through it again this time, note any minor details in the design and functionality that could be improved. Also write down random thoughts that you might build on later.

This is the brainstorming stage. After writing down as many ideas as possible, organize the list into actionable steps.

1. Updating Your Brand

Our notes are prepared and our research done, and we are now ready to begin the redesign. The first step in this phase is to examine our brand. Having prepared this much, we may find that our logo, color scheme, tag line and other elements need adjustment.

Upgrade Brand

Of course, there is a difference between upgrading and re-doing a brand. Even upgrading a brand too much can do more harm than good. We’ll want to keep much of our brand the same (i.e. the general style, logo and message). But could we update it with any of the following?

  • The logo should stay the same for the most part, but could it use a glossy makeover? If it was made years ago, technology and trends have changed; so while it should remain recognizable, it might benefit from a polishing.
  • Examine your tag line, slogan or “elevator pitch.” Does it still match the purpose of the website today? Did it become outdated when you adjusted the goals of the website?
  • Each website has its own style (e.g. creative, modern, sleek), and some websites mix styles. The design is a part of your brand. Going from a Web 2.0 style to a grunge style obviously wouldn’t make for an effective redesign. Whatever style you decide on will have to be in sync with your branding?
  • Colors play a big role. You may want to cut down on or increase the colors, but your specific colors should stay the same. Perhaps you could introduce a complementary color, while still maintaining your others. Because color has such a big influence on mood and perception, the colors in the redesign should reflect your style and brand.

You’ll want to update your logo, too, including the overall look, the colors, and small details. Brainstorm on these elements, but always keep your updated brand in mind.

2. Wireframing

As designers, we know that wireframing ahead of time can yield better balance, alignment and visual hierarchy; and it is a great way to position everything early on without worrying about the details.

Site Map

At this stage, we can plan the site map. It may or may not be the same as before. As we continue in our steps, we begin to see that redesigning a website is not only about the design, but about usability, functionality and organization as well.

Sitemap

Begin with the home page, and work down through the primary navigation and on to secondary navigation. Various features will need to be added to certain pages (e.g. RSS link on the front page of the blog), so keep that in mind. Setting up a site map can aid in visualizing your content.

Without a site map, you can easily forget important content as you move to the wireframe, which would create problems down the road when you try to fit a certain element in somewhere.

The Wireframe Itself

Wireframing is definitely an art in itself, and it takes time and practice. It is one of the most important stages in the Web design process, so giving it due attention during the redesign is essential.

Wireframe17

Working from your site map, create an initial wireframe that has everything you need. Then, improve upon a few of the ideas. Asking for second opinions on your wireframes can help as well. Ask your volunteers to point out the sections that stand out the most, the order in which they notice elements and the prominence of key features.

Because wireframing is a lot more involved than we can get into here, consult the list of resources below for assistance:

3. Main Design

Now that we’ve planned and just begun redesigning our brand, we can move on to the exciting part: the actual website. Most of us who have given up our attempts to redesign in the past probably started the process at this stage. We opened Photoshop, chose a pretty color and gave up shortly thereafter.

Now, though, we are much better prepared:

  1. We have researched.
  2. We have worked out our branding, colors and style.
  3. We have laid down a wireframe.

Wow! We’re pretty much done—that is, at least with the boring stuff. At this point, we don’t have to stop the flow of our creativity to worry about technical details or about whether we’re doing it right or need to start over. We have it all planned out, and the plan is solid.

The only things to keep in mind for this phase are what we’ve already gone over. If your research spanned a few days or weeks, review what you’ve prepared. Print out the wireframe and site map and keep them on hand for reference. Start putting everything in place, and then go from there: add the design elements, detailing, alignment, balancing. Make the plan a reality.

4. Development And Testing

Finally, we’ve come to development and testing. Code the design (or outsource it) and make it fully functional. Mind the technical back-end requirements, as well as accessibility issues.

This process is fairly straightforward and needs no further explanation. If you stick to your plan, everything should run smoothly.

Testing and Review

Because we have transferred old content into a new design, we may find errors after we’ve completed the last step. In fact, we likely will. Use a link-checker to double-check all links, and check some manually. Test for speed, and optimize further if necessary. Double-check for validation one more time, and fix any behind-the-scenes errors.

This is also your last chance to ask volunteers to review your working version. You may have overlooked some accessibility issues, forgotten essential content or let some confusing elements slip in. Even with the most detailed planning, mistakes happen, and catching them before you launch is critical.

Your final testing should be thorough. You wouldn’t want to scare off your regular visitors.

Conclusion

As creative types, we constantly feel the need to redesign and improve our Web presence. Often, though, our website is good enough already, and we have to recognize that. The first best practice, then, is to consciously decide whether a redesign is needed at all.

If we decide that a redesign is needed, then we need to follow certain steps to ensure successful results. Without adequate preparation and a thorough analysis, even the best designers wouldn’t be able redesign their website effectively. It takes more than a great designer; it takes determination and organization. With these two characteristics, anyone can carry out the perfect redesign.

Further Resources

You may also be interested in these additional resources:

(al)

↑ Back to topShare on Twitter

Kayla Knight is a full-time freelance web designer and developer, and likes to blog a lot too. She also created and runs Freelance Mingle, a social network for freelancers.

  1. 1

    Come at a perfect time! ;) Great article!

    0
  2. 3

    Right on time ;-)

    Some points come in handy at all times when designing something for yourself, sometimes designers can be way to perfectionistic

    0
  3. 4

    Incredible post, I wish it was out a month or so ago when I launched my latest redesign. It took a long time to get through because I was doing exactly what you were saying, leaving it as an end of the day project rather than something I could do during the day.

    I’ll be sure to pass this along to my classmates who need to make a portfolio for our final project.

    Cheers,
    Carson

    0
  4. 5

    Ah, beautiful theory… *sobs*

    It’s unfortunate that practicly every company does the opposite, or at least for 80% of the stuff you mention.

    0
  5. 6

    I’m currently working on a redesign for my personal site. Great and useful resource! Cheers

    0
  6. 7

    What is the best way for one to redesign the IA of a site? Is a card sort still the most-used method for re-organizing content?

    0
  7. 8

    very insightful! I couldn’t agree more with this article and you’ve made a lot of really valid points that I’ve never really thought of! bravo!

    0
  8. 9

    I think now the time has come to redesign my personal site

    0
  9. 10

    Blue Sail Creative

    November 11, 2009 8:13 am

    Our team at blue sail goes through these steps on daily basis with clients. Most think its simple as a new skin on the front end, but there is so much more that goes into it.

    This is ultimately what separates quality firms from fly by night template makers.

    0
  10. 11

    Great post. I am sending this to everyone on my team as a refresher of what separates the men from the boys.

    0
  11. 12

    You read my mind! Thanks

    0
  12. 13

    Kayla,

    Thank you for this article. It was very helpful.
    A lot of times, most sites don’t need a full redesign, just a realign.

    Just bookmarked it. Will be something that I go back to when I do a redesign.

    0
  13. 14

    Good article, very useful.

    0
  14. 15

    Rüstem Çetinkaya

    November 11, 2009 11:09 am

    Very good works.

    0
  15. 16

    Excellent post. Thank you!

    0
  16. 17

    Redesigning one’s own website is possibly one of the hardest projects to work on. I’m never happy enough with the result. These are some decent tips though on getting it done.

    0
    • 18

      I agree. It took me 9 .psd’s to finally get to the point of “content” with my site design. It took me nearly a year to put it up. How daunting is that?

      0
  17. 19

    Good post.
    I would add a part about the CMS choice step.

    0
  18. 20

    very nice post thanks

    0
  19. 21

    Very interesting article, perfect timing too !

    0
  20. 22

    I read (most of) this post somewhere else before. And I think it was actually on this site as well. I must be psychic or lacking sleep. Or both. Or having too much coffee. Or too many ors.

    0
    • 23

      I had the same déjà vu feeling at the beginning of the article :)
      Maybe I should slow down on the coffee too !

      0
  21. 24

    great post, I was in the midst of re-aligning my website. Thank you for such a great post, really saved me a lot of time in better understanding what are the needs and important issue.

    0
  22. 25

    This is really helpful. I wish someone had sent CNN a link to it before they did their boredom-driven redesign.

    0
    • 26

      Boy is that true! I always hated the old CNN site, but they sure didn’t improve it with the redesign.

      0
  23. 27

    Great Article :-D

    0
  24. 28

    Brilliant article! Thanks for the tips…. really really handy.

    0
  25. 29

    This is just an excellent detailed article.
    Thanks Kayla.

    0
  26. 30

    Tejendra Shandilya

    November 11, 2009 10:38 pm

    Gr8

    0
  27. 31

    Just in respect of wireframing – I’ve recently discovered a great tool called “Mock Ups” from Balsamiq, which is pretty rapid for wireframing UI designs. http://www.balsamiq.com

    I like the thought process behind “realigning” rather than re-designing. I often notice that people change the look of something just because they are bored. Interestingly, Smashing actually “realigned” recently didn’t they?

    0
  28. 32

    Excellent article for both designers and potential clients to read.
    Nice One!! :)

    0
  29. 33

    Hi Kayla,

    There is a problem with Webitect.net right now, thought I’d let you know so you could fix it.
    Great article, keep up the good work ;)

    0
  30. 34

    Good article!

    I’ve done several redesigns of my portfolio in last 3 years and some have been more successful than others, but one thing I’ve noticed is that new design works itself in some time.
    It ages like a good wine.

    I made a redesign in the spring and it took me 3 days total with one rush on the wave of the creativity. I was happy and excited for a while.
    But then discontentment grew and I had to start over. So, I made another one… that wasn’t better.

    Now, looking back what did I create at the first place I see that it was pretty good. It wasn’t perfect, but it was more than fine.

    It’s hard to design own’s portfolio. There are so many options. Too many styles. What’s the right path, what’s my style… not so clear.

    Now, I’m thinking about doing redesign again.
    This time it should work out :)
    Logo needs some refreshing, site needs stronger content and less graphics, and etc etc.

    0
  31. 35

    Nice article Kayla. Good planning and thought processes used here :-)

    0
  32. 36

    There has been a good experience & lots of deep thought behind this post.

    0
  33. 37

    This was outstanding. Really helpful and perfect timing.

    0
  34. 38

    This was fantastic!! Came at the right time for me, thanks for the great info!

    0
  35. 39

    Interesting..

    0
  36. 40

    Its weird how you find so little inspiration when designing your own projects. I like doing research on the newest styles and trends when coming up with ideas for my redesigns. Good read !

    0
  37. 41

    Great post, very full! Most important is have it a good goal

    0
  38. 42

    Very nice read, thanks. I redesigned mine about 6months ago without so much planning, and over the last 6 months it’s just been tweaking and tweaking when I get the time. Pretty happy with it now though!

    0
  39. 43

    Kayla,

    You’ve answered many of those hundreds of nagging little questions and the important ones I had like ‘where do I start’ and ‘how do I start’ redesigning my website.
    thank you.

    bookmarked !

    0
  40. 44

    Having just completed my personal site’s redesign and recent launch, I can attest to a lot of this article’s information. Especially the point about leaving room for possible expansion of the site in the future. Very thorough and well written. Nice post.

    0
  41. 45

    Kayla!! What an amazing post, incredibly helpful :D
    Thanks a lot!

    0
  42. 46

    Interesting in an overview sort of way. but really not specific to relaunching a site for oneself, but designing any site for anyone, no? If you aren’t doing this for web clients, then you are probably not doing very good designs!

    0
  43. 47

    The most perfect one. Thanks Kayla

    0
  44. 48

    great info ;

    thanks a lot

    0
  45. 49

    What a great read. This article is a very helpful resource on redesign from a designer’s point of view. However, under the promising heading “Content Requirements,” you only mention typography and formatting text. You mention SEO, but what about the meat of the content? How long do you spend planning your content strategy – the information you want to convey? From a writer’s point of view, this step seems vital.

    0
  46. 50

    Incredible post, I wish it was out a month or so ago when I launched my latest redesign. It took a long time to get through because I was doing exactly what you were saying, leaving it as an end of the day project rather than something I could do during the day.

    0
  47. 51

    This article is a very helpful on redesign from a designer’s point of view. Having just completed my personal site’s redesign and recent launch, jodimilade.com
    I made a redesign in the spring and it took me 3 days total with one rush on the wave of the creativity. I was happy and excited for a while. Nice Post.

    0
  48. 52

    This is very in depth and informative. I just started as a design student at sessions.com and most of the time I use the tools they have available: http://www.sessions.edu/Design-Career-Center/Design-Tools.asp?fmid=0

    0
  49. 53

    I would love to know how may website projects are now new sites vs website redesigns. Great article thanks!

    0
  50. 54

    I feel re-design is always a good thing as we all have to move with the time, and needs change. However, I personally like the new to have some resemblance of the old, seeing design evolve over time.

    0

↑ Back to top