The Foundations of a Website Redesign

Embarking on a website redesign is no small undertaking. It will require a substantial amount of strategy, organization, and company soul-searching. Not only will you need to ask difficult questions, but you’ll need to provide answers that satisfy every major stakeholder. This prospect alone is enough to deter some organizations from pressing forward, but there are steps you can take in order to not only streamline your redesign project, but ensure that everyone’s needs are met.

I will be hosting a live webinar on Wednesday, August 27 @ 1:00pm (CST) that will help you get your web ducks in a row, and make the redesign process as smooth and effective as possible.

Why Redesign Your Website?

Before we get into the specifics, let’s ask my favorite question: “why”? What is the problem with your current website, and what is your goal for the new website?

For some organizations, their current site is simply outdated and needs to be modernized in order to compete in a crowded digital market. For others, the functionality of their site isn’t helping them to achieve their online goals (driving sales, providing information, boosting awareness, etc.)

Before you even begin to think about redesigning your site, you need to answer, “why?”

Content Inventory Audit

Now that you’ve determined why your website needs to be redesigned, and what your goals are, you can begin the process of organizing your assets through a Content Inventory Audit.

This is a simple spreadsheet of all your existing webpages and their corresponding URLs. A Content Inventory Audit is a task often done toward the beginning of a website redesign project, and essential for any [website or intranet] content migration project. It is a great way to think through a redesign but may not be the best way to plan a completely new website.

The spreadsheet stores information about each page on the website; a very handy tool that provides a quick overview of your site.

For most of my projects, I like to collect:

• Navigation title, page title and URL for every page
• What's the purpose of the page?
• Who is the target audience of that page?
• More criteria will be covered in the upcoming webinar…

As you prepare to add content to the website, think about who will contribute. In a five-person business, it might be just two of you, and that’s fine. In a large business or organization, 5, 10 or 15 people might be contributing content. The time required to edit and proofread both copy and visual content grows exponentially in relation to the number of people who contribute content.

Unless you are creating the most technical website imaginable, your content should consist of more than just plain text. By using one or more of the following multimedia elements, you’ll greatly enhance the appeal and usefulness of the website:

• Images & Photo Feeds (Flickr)
• Documents (preferably PDFs)
• Embedded Audio & Video (YouTube & Vimeo)
• Social Media Feeds (Twitter, YouTube, Google+, LinkedIn)
• RSS feeds

Content Checklist

Once you’ve mapped out your existing webpages, you can begin to look at the specific content contained within them. The type of content you’re creating will obviously vary depending on your organization’s goals and your audience’s needs, but here is a list of the most common content- this is not even close to an exhaustive list.

• Articles
• Blogs
• Banner advertising
• Forms
• Email newsletter
• Event calendar & registration
• Images, Audio, Video
• Social media sharing links [Twitter, Facebook, LinkedIn, etc.]
• Staff directory etc.

Future Content Considerations

Now it’s time to think about future expansion. For example, you might start out with six news items in your news section, each with brief summaries and links to the full view of the item. But what happens when you have 10, 20 or 50 news items? Do you want to archive old news? Paginate the items? Show only the last 10 items? Consider these questions in the design process.

For websites that accumulate content, such as news, press releases and reports, there’s a good rule to follow when creating mock-ups (you can never have enough mock-ups!) In other words, if you think the layout or design of a page or section of the website will differ significantly from other pages, then mocking it up is worthwhile. This step normally comes after the initial mock-ups are approved.

Sitemaps

A sitemap lists the structure and content of the whole site, roughly similar to the "table of contents" in a book. A sitemap can be an effective planning tool for both designers and non-designers. It’s a centralized document that can help organize and clarify the content on your site, as well as help you identify future pages and eliminate unnecessary pages.

Sitemaps are made for visitors (people), but they also serve the secondary function of giving search engine crawlers an easy way to find the pages of your site. It is always important to remember when you are making decisions about your site to make those decisions with your visitors first and search engines second.

In the webinar, we’ll cover the different ways to design a sitemap, and the difference between HTML Sitemaps and XML Sitemaps.

Wireframes

Once you’ve determined the structure of the content, you can move to the first step in the design process. Wireframes! A wireframe contains the core components of an individual page, communicating hierarchy, user interface patterns, logic, content types, and potential structure. It’s a representation of how the website interface might work. It is NOT the final visual design or layout.

There are many great tools for this:

• Photoshop, Illustrator and Visio works well,
• Specialized tools, like Balsamiq, are my personal favorite

It’s important to avoid the desire to make everything look perfect in a wireframe. This phase of the process is meant to help you guide the design, not actually be the design.

You should create a wireframe for each unique page on your site (Homepage, product page, contact page, etc.) It isn’t necessary to create a wireframe for every product page, unless you intend for them to have significantly different layouts and functionalities.

Once the wireframes have gone through your review process with the powers that be, NOW you are allowed to move to the design stage.

Web Style Guide

Last, but not least, in planning out the structure of your website, a Web Style Guide needs to be developed, especially if there are multiple content contributors to your site.

A style guide is where proper planning shines, as it will define all of the design, layout, interactive and type elements used throughout the website.

These include, but are not limited to:

• Navigation styles
• <h1> through <h5> (heading tags)
• Paragraphs
• Lists
• Links, including active, hover, and visited states
• Icons
• Use of images and image style
• Use of background images (watermarks)
• Common elements such as sidebars

A style guide can also help you start to pay attention to web accessibility standards. If you’re not familiar with web accessibility practices, check out our catalog of web accessibility blogs.