An Exploration of Website Redesigns: Tips and Examples

Jun 20 2011 by Mohammad Moradi | 22 Comments

An Exploration of Website Redesigns: Tips and Examples

Website redesigns — whether for your own website or clients — seem like exciting and interesting projects. It’s challenging to create a new design while retaining the site’s existing brand and content. And for most web designers, these types of challenges are motivating.

However, website redesigns are tricky to plan and execute. There are several constraints involved in redesigning a website that might not normally exist if you were to start with a blank canvas. I would even argue that a redesign is often more difficult than starting from scratch because of these boundaries.

We will delve into the subject of website redesigns by reviewing and discussing redesign efforts of sites such as Yellow Pages, Mozilla and Blinksale.

Why Redesign a Website?

It’s important to note that Design, in one of its most fundamental forms, is the act of solving a problem. Whether it’s to address durability and signal strength issues while still maintaining the beauty of a mobile phone (like with the iPhone 4′s stainless steel band) or coming up with a solid navigation design that improves findability of site content, the act of designing should be purposeful.

When the motivation to redesign an existing site is driven merely by aesthetics, I believe that the incentive of the redesign initiative is insufficient.

There are many costs involved in a website redesign, both to its users and to its owner.

For example, creating a new site navigation scheme or the reconfiguration of the web page layout requires existing users to get used to the new web design.

It requires a lot of time, planning and decision-making to ensure that the present content integrates well with the new design. It might also require updating existing content to fit the new design.

The outcome of the redesign project should justify these costs.

Here are a few reasons why you would want to redesign a website:

  • The site is not user-friendly
  • The redesign can increase site profits
  • When objective information, such as those gathered by data analysis, clearly indicates something is wrong with the design
  • The redesign can improve the site’s speed and performance
  • The site is built using outdated web design practices that burden the user experience (table-based layouts, animated GIF backgrounds, outmoded interactions that can be improved using Ajax techniques)
  • It lacks features that, when adopted, can profoundly enhance the user experience
  • It has information architecture flaws (poor findability, navigation, categorization, etc.)
  • It doesn’t fit with the existing company brand

Component Redesign

Does the site need a complete design overhaul or can existing issues be solved through the redesign or realignment of certain components? With the opportunity for us to iterate rapidly and seamlessly on a production site, a partial redesign might be enough.

For example, when a checkout web form of an e-commerce site makes the user’s experience cumbersome, we can use our resources more efficiently by focusing on that troublesome component instead of spreading our efforts thin by trying to tackle everything.

Redesign Mindset: Focus on Solving Issues

It’s a fact that the most important element of a website’s success is its content and purpose. Whether it’s to provide a venue for people to connect with each other (like Craigslist) or to disseminate information (like Wikipedia), success is measured — and attained — based on utility, not aesthetics.

The redesign must be in line with the intended purpose of the site. The design must support the site’s objectives.

Deficiencies in the site’s content and utility will never be resolved by making the site look more beautiful.

Real-World Examples of Website Redesigns

To explore the topic further, let us examine some website redesign efforts.

Yellow Pages

According to the site’s About page, one of Yellow Pages’ goals is "to be a utility for the people: the one-stop site that, in fewer clicks, helps everyone live more."

Therefore, it makes sense that the outcome of their redesign effort should be to enhance findability; to lower the clicks required to reach the desired information. Does the redesign achieve this goal? Let’s take a look.

Old Design

New Design

The redesign of the website has a similar appearance to the original design. It retains much of the original colors (most notably the company colors of yellow and black).

In the new design, localization is used to populate the front page with more relevant content based on where you live. This helps reduce the amount of work users need to perform in order to select the locality they’re most likely interested in.

Other than that, the redesign is predominantly aesthetic, and old features that were potentially useful were taken out.

For example, the "More Tools" tab was moved to a less convenient-to-access spot. The "search tips" link, which could help new and existing users improve their search queries, was removed.

Rich images used in the front page — although they make the page more attractive — can slow down front-end performance and if they don’t enhance the user experience and support the site’s goal, then their inclusion is superficial.

Blinksale

Blinksale, being a web app, would want a site layout that optimizes conversion rates so that new visitors can quickly see how the tool works and quickly discover the path to signing up. In this respect, Blinksale’s new design has several advantages over old one.

Old Design

New Design

The new design makes it easy to spot the primary call to action on the page, using the art of distinction to highlight its location and direct the eye gaze of the user. It’s also easier to learn about the app’s selling points — how much it costs and unique features that sets it apart from its competitors — because of the succinct bulleted list and price information on the left.

In the old design, the eye flow is slightly flawed, if we were to assume that most of their visitors are left-to-right readers.

The logical sequence of a visitor wanting to sign up is to first understand what the web app can do and how much it costs before making the decision to sign up.

The layout of the old design reverses this ideal eye flow.

Six Apart

Six Apart has changed the page layout structure and the colors used in the design.

Old Design

New Design

The look and feel of the new design is more subtle and elegant than before. The search box in the header of new design is a well-positioned new feature.

Plaxo

In this example, we can see both positive and (potentially) negative results of a website redesign effort.

Old Design

New Design

In the old design, Plaxo had a prominent horizontal navigation bar and a home page that was shorter.

The navigation menu in the old design was omitted, which means existing users who relied on this feature now have to relearn how to navigate the site. The new design exceeds the previous page length, which requires many users to scroll down more to access the desired information.

However, the new design has a clear call to action optimized towards new site visitors. It has a clean layout that highlights important site features. It has better content that answers many of the questions a potential new user might have about the app.

ThinkGeek

The latest version of ThinkGeek is a good redesign example.

Old Design

New Design

The components that were effective in the old design were retained and then slightly improved. For example, the left-positioned vertical navigation menu was kept in its place, and just received a typographic redesign to make it easier to read and visually more appealing.

The search box was relocated to reduce the needed eye and mouse movements of people searching for a particular product on the site. It’s now appropriately grouped with the vertical navigation menu because these components complement each other.

Moreover, new features like the horizontal navigation bar and a shopping cart status information have been added.

The design not only makes the site more beautiful, but it also fixes the page layout and incorporates useful features.

Joyent

When I first saw the old design of Joyent, I didn’t realize what the company provided until I read their site’s content. The old site’s design theme — though unique and visually appealing — didn’t seem to clearly support and indicate what the company did.

Old Design

New Design

The refreshed design is brilliant. It keeps the useful site navigation of old design. The new design is cleaner in aesthetics and probably more appealing to their typical audience of IT managers, CTOs, server administrators and the like. The new design adds useful components such as the company’s contact information (prominently located in the site header), a call-to-action button at the side bar and navigation to internal pages in the footer that’s useful to existing and potential users.

Mozilla

Mozilla sites always seem to have notable designs. A Mozilla redesign often incorporates innovative design techniques and additions of helpful features.

Old Design

New Design

Practical features remain unchanged, and some new ones are added; namely, an email newsletter sign-up form and a slideshow highlighting featured content. The new web page layout looks less cluttered, mainly due to the reduction of hyperlinks and the use of whitespace between design elements.

REI

REI is an excellent example of redesigning a site to include useful new technologies and techniques.

Old Design

New Design

The main navigation scheme and information architecture is kept relatively unchanged. As an e-commerce site, upsetting loyal customers by changing things they might have grown accustomed to means that things such as navigation should be approached with caution in a site redesign.

Using an image slider and a multi-level horizontal navigation bar are the two main changes of the new web design.

Dave Wilkinson

Here we have an example of a redesign of a web developer’s portfolio site. Web developers and web designers are known for rapidly redesigning their own websites, often to reflect the most current design trends.

Old Design

New Design

The difference between the old design and new design is remarkably vast. Almost everything has changed. The logo and tagline, the colors, the design style, the layout, the personality of the site’s copy, the information density — they have all been improved.

Etrade

The Etrade redesign effort is more like a realignment rather than a full-blown redesign.

Old Design

New Design

Most of the layout’s components didn’t change, and if they did, the modifications were minor.

However, what has happened is that some design elements have been relocated. Whilst the left-hand vertical navigation menu was eliminated, the links were relocated to its proper place, the primary horizontal navigation bar, reducing possible confusion as to which menu a link might be located and freeing up some space.

Conclusion

The idea of redesigning a website is an alluring one. Before we commit ourselves to this endeavor, we must first take care to plan and think about some important considerations.

Mainly, we should determine if a redesign is something we really need to do.  A website redesign doesn’t just mean changing the site’s appearance, it’s to add missing features, address design flaws, reorganize the information architecture, remove unnecessary components to de-clutter the user interface and to enhance functionality.    

Resources and Further Reading

Related Content

About the Author

Mohammad Moradi is an undergraduate in computer engineering. He spends his free time studying and researching web-related topics such semantic web and search engines. Moreover, he is a web/graphic designer. Contact him via moradi.c85@gmail.com. (He likes email among others!)

22 Comments

Carolyn Michel

June 20th, 2011

What a good, well illustrated article. Having been through the process of website redesign on both sides of the fence, as you have said, it can seem alluring. To see it through requires good design, planning and execution. It will cost time, money and quite a bit of perspiration!

Tim

June 20th, 2011

I would agree with most of these, but not with the Joyent redesign. The old design is much better. I don’t know how you couldn’t tell what they did, because it says it in huge text right in the hero image. The new site is bland and lifeless and looks like a WordPress template, and while it might appeal to IT pros, their new logo does not. The new logo looks like it should be for a bakery instead with its curvy lightweight font. While I don’t dig the look of the old hero image with the cartoony characters, it is still more appealing than the new design.

Avangelist

June 20th, 2011

Absolutely incredible top level analysis of home pages for a variety of market sectors.

This was a really well thought out and compiled article.

I completely agree with your view on reasons behind redesigns. It is frustrating that the majority are done out of a desire to look fresher rather than reviewing core issues and ironing them out.

Component redesign is something that I have started to look and think about in the last few weeks. It is always pleasing when you notice a minuscule change on eBay for example as they enter the public discretely unlike the routine overhauls of Flickr.

maryam

June 20th, 2011

Very interesting Article. I was trying to connect with you via your twitter but I can’t find you ?!!

YeuHost

June 21st, 2011

I agree, so redesign can make our website more effective and active to any clients. Certainly, we can’t make a new design for 4 seasons, but change color or make another layout is easy way to keep your guest alive longer time and many pageviews. :)

Akash

June 21st, 2011

Thats a very well written article! Thanks M8!

Samiullah Khan

June 21st, 2011

It really need a great effort in order to redesign a site, as you mentioned it will alter some one’s life style. By the way this article helped us in learning the art of redesigning substantially.

WPExplorer

June 21st, 2011

There are some great redesigns here. There is nothing worse then going to a very popular site and it still looks like the way it did 10 years ago – ugly graphics and tables!

It can be hard and very costly for a larger site to re-design, but oftentimes I think it really helps. Some people may be angry at first but eventually everyone ends up loving the new design.

Speaking of re-design…do you ever plan on doing some yourself?

Abe

June 21st, 2011

A very good article indeed.
For me, it is useful tips before I decide to redesign my site.
Thanks for sharing it.

sanji

June 22nd, 2011

I agree that redesign is difficult rather than to start from scratch. Great examples too!

Goncalo Espinha

June 22nd, 2011

Very good tutorial. Recomended for every Web Designer or lover of design.

Thanks ;)

Mike Dexter

June 22nd, 2011

The Joyent re-design became much less clear, much less inviting, and not appealing at all.

Mainual

June 22nd, 2011

Yellow Pages redesign is my favorite. Thanks for tour

Minimal

June 22nd, 2011

Thanks for this article M.Moradi, very useful for me, espesially re-building a website.

Derek Slater

June 25th, 2011

Good piece – I only want one thing more: data. :) What were the results in terms of traffic, clicks, user behavior.

Thanks for posting! Inspiration is valuable.

Dwaynne

June 26th, 2011

I agree with Derek. I would love to see if the observations made in the article can be substantiated with some proof…metrics…some data. Okay article, but as an analytics man I need some figures.

Vladislavs Judins

July 1st, 2011

Could anyone please share some good articles with before/after redesigning websites? I mean some really big and competitive redesigns. Thanks in advance :)

David Radovanovic

July 2nd, 2011

Some of their metrics must have been misinterpreted. Dince, some orginal (old) designs actually appear more engaging (visualy) than the new ones. Here is a recent BEFORE/AFTER redesign example: http://www.whatsthebigidea.com/garlic-festival-website-redesign.html.

Thanks for the article!

Dave Wilkinson

July 6th, 2011

Hey, thanks for the mention guys! I had almost forgotten about that design. I can safely say that focusing on a tighter market and a narrower range of services has made all the difference to my business.

Simon

July 14th, 2011

Redesigning is always advantageous for every website. It is one way of keeping your site always at the top.

Hugh Caraway

October 26th, 2011

I can almost guarantee that in some of these examples my clients would prefer the busier older designs. Some people just refuse to allow minimalism and therein lies the value of these examples. I now have some good examples I can point to and say “See! See!”

John Locke

June 27th, 2013

One thing that I’ve been noticing in recent website redesigns is a focus on white space and simplification, using iconic imagery to tell a story, and a renewed emphasis on good typography.

Leave a Comment

Subscribe to the comments on this article.