How to refresh a website ?

Refreshing an existing website — as distinct from creating a website for the first time — has a different set of challenges, opportunities and pitfalls than for new websites.
A website refresh project is in many ways a golden opportunity to enhance the communications effectiveness of your enterprise.
These projects can appear daunting, but with good planning, teamwork and tools, the process can be enjoyable, efficient and meet your deadlines.
Illuminant’s Digital Communications team is skilled at the special challenges of website refreshes, and since we have just completed a comprehensive refresh for our own house site, we thought we’d share our insights.  We have distilled our best advice into five simple steps, which we’re happy to offer.
What are the five most important factors the Illuminant Digital Communications team applies to every website refresh project?

Get your information architecture right

But what’s an information architecture? Your information architecture (or, “IA” for short) is your site’s overall structural design (and we mean “design” in the abstract sense, not the graphical sense).  Your IA defines thecontent you are presenting, the context in which it is to be presented, and how your users will interact with your website.
For complex websites such multi-channel portals, the IA is almost impossible to comprehend from a bird’s eye view, but for the majority of corporate and non-profit websites, a simple and easy-to-grasp IA should be fairly simple to achieve.
Think about your site’s hierarchical navigation system, and you should be able to see your IA in terms of a site map. Then visualize the main page designs in your site, stripped of all their “chrome”, or graphic design elements, and you’re seeing your IA in terms of presentation.

An example of a rough IA site map

For your site map, you’ll always have a home page, and with a click, your users can access a range of other pages which are organised into sections or categories.
In the case of conventional corporate-style websites, your sections or categories are usually neatly arranged into menus and menu selections.
Different users can see different sections or categories depending on their level of privileges (for example, logged-in staff-members might see the company database, while logged-in customers might only see their own orders).  Not all sites have different levels of users, of course, but with the rise free open source content management systems (such as WordPress, Joomla and Drupal) its become really simple to provide these different levels of access for the different classes of visitors.  After all, we treat our team-members, our customers and our suppliers differently when they present themselves to our offices or showrooms, so why shouldn’t we do the same when they visit our websites?

A simple wireframe, as produced by Balsamiq

Your site’s IA presentation should be visualized as a wireframe, which is a really useful method of presenting the layout of the various content and features of a given page, without all the distracting chrome. Ideally, you’ll have a clear wireframe drawing for every different class of page — these classes are usually called templates.
There is a rich choice of tools available to help you to wireframe. From specialist tools such as Cacoo and Balsamiq, to general purpose tools such as Google Docs and PowerPoint, wireframing is a very efficient process that allows your site development team and your other stakeholders to visualize and discuss layout without the distraction of the most emotive aspect of every website: its visual elements and graphic design (which we call “the chrome”).

IA as a Venn diagram, according to Louis Rosenfeld

We consider Louis Rosenfeld to be the canonical expert on website information architecure.  He invented this diagram which our IA team keep in their wallets at all times. You might be interested to learn more about Mr. Rosenfeld’s thinking at his website.
Okay, so how should I approach my site’s IA during my website refresh project?
Every site refresh project presents a golden opportunity get your information architecture right.  You want to review your IA, and to amend and rationalize your IA by removing deadwood and adding important new content and sections.
This is your chance to truly learn from past successes and failures and create a blueprint for a greatly improved website to launch at the end of your refresh project.

Revisit your corporate identity

What exactly is my corporate identity? Good question.
Your corporate identity (CI) incorporates your enterprise’s brandmarks and logos, visual elements, colour palettes, typographical guidelines, boilerplate copywriting elements such as straplines and taglines, and other standardized elements.
Your enterprise’s CI is your enterprise’s face in the marketplace.
CIs are the most powerful single element to set positive first impressions in the minds of the enterprise’s audiences.  If your CI is well standardized, your audiences will more quickly and deeply develop trust in your communications.
Illuminant’s corporate identity work exemplifies a conceptually sound approach to visual communications. The dozens of CIs we have designed (and many we have localised for use in China) have helped our clients to more accurately position their products and services in the marketplace, reducing their communications effort and cost and giving a sense of pride to their employees, partners and stakeholders.
Depending on the size and/or flexibility of your organization (some small organizations are very inflexible, while some multinational corporations can be extremely flexible) your website refresh program may give you an opportunity to examine how your overall corporate identity could also be refreshed.
We should note that we’d rarely (if ever) counsel that a website refresh should call for a complete change in CI.  However Illuminant often counsels our clients to refresh their CI on a regular basis (say, every two or three years).  By being open to regular refreshes of your CI, you can keep your face in the marketplace contemporary and effective.
Okay, so how should I revisit our CI during my website refresh project?

• If your enterprise has a CI Guidelines document, get it and read it cover-to-cover.
  • If your enterprise lacks a CI Guidelines document, pull together your standard logos, colours, taglines/straplines and other elements into a new document…
  • …or, engage Illuminant to produce a great CI Guide for you — we have produced dozens of highly effective CI Guidelines for our fantastic clients.
• Consult with your marketing and branding team, your agency and your key stakeholders to use this opportunity to refresh any elements of your CI that are looking stale, inconsistent or that lack conceptual soundness.
• Ensure that all your standard colours have been accurately translated into HEX colour codes for use in your website. Ensure you have a small but good palette of colours to work with for the main type styles in your website.
• Check with Typekit if your standard typefaces can be used in your website instead of ugly Arial or Times (or, heaven forbid, Comic Sans!)  Beautiful web type is finally an option, and you should fully utilize it if you can.
• Consider standardizing on a copywriting style that is consistent across your entire website (although you may choose to encourage different voices and styles in your blogs, as we do in Illuminant’s blogs).

By taking this opportunity to revisit and refresh your CI, you’re not only setting up your new website to be launched with a fresh and contemporary look, but you’re also a hero for your enterprise’s broader use of the face it uses to present to the world.

Keep your team as small as possible

There is something about websites that encourage more people to comment and editorialize, and to feel entitlement to do so, than any other marketing medium.  Print projects, TV ads and PR campaigns are all easier to design, achieve management approval and execute than websites.
Hence, one of the best things you can do for your website refresh project is to keep your team as small as possible. Seek opinions and approvals only as widely as your enterprise’s reporting lines require, and you will deliver a successful project quickly.

Define your functional specification, and stick to it!

Second only to the danger of an unwieldy and large subcommittee, the lack of a clear and firmly-held functional specification is the critical point of failure (or extended delay) to most website refresh projects.
Once you have reviewed your information architecture and sketched out your improvements, reviewed your corporate identity (and possibly revised it for enhanced effectiveness) and assembled your team, your next task is to define your functional specification.  The Illuminant Digital Communications team calls this the “functional spec“.
Your functional spec must clearly explain in words and wireframe pictures every feature of your refreshed website.  You need your functional spec to be able to make sensible technology choices and to create a budget.
Call your agreed list of features your version 1.0 functional spec.  When you receive the inevitable request for additional features, cheerfully accept them, but write them into a revised version of your functional spec, for implementation only after your version 1.0 spec has been turned into a real, working website.
Only by resisting inevitable “feature creep” will you be able to meet your launch deadline within your budget.

Choose and use the right tools for the job

Today’s web development teams have an unprecedented richness of choice for their development and hosting technologies.  If you’re refreshing  your website’s IA and design, don’t miss your opportunity to consider refreshing your hosting and serving technology as well.
If your current website is still static HTML, evaluate a content management system (CMS).  If you are on an old, clunky CMS, consider upgrading to one of today’s slick (and often free-of-charge) CMSes.  The Illuminant Digital Communications team uses and recommends WordPress, Drupal and Joomla! — these are our go-to CMS systems, all free, all extremely powerful.
The end result will be a website that empowers people from across your organization to contribute to your content (all within clear editorial approval workflows), as well as to build a community of stakeholders from your audience.