I just returned from an inspiring weekend at the NAMM show in Anaheim, California, one of the largest (and loudest) music shows in the country, with over 80,000 attendees from all over the world. I was invited by moderator Danny Rocks to speak to this diverse group of musicians, educators and business owners about ways to improve their websites.

My session, called "This Old Website: Why Your Site Needs a Makeover!" drew a good group of about 100 people, mostly small business owners and music educators. My friend Madeleine Crouch of Madeleine Crouch and Associates, an association management firm, offered up one of her new clients in need of help, and joined me on stage to discuss the problems and solutions.

Does your site need a redesign?

I started off by explaining many of the reasons you might need to redesign your website. If your site suffers from one or more of these problems, your business would likely benefit from a redesign:

• It looks outdated
• It doesn’t reflect who you are
• It isn’t user-friendly
• It doesn’t rank well in search engines
• It isn’t generating business
• It is too hard to update
• Visitors have complained

How do I redesign my site?

There are 4 main steps:

Step 1: Set your goals

Begin with the end in mind. If you know what you want your site to do for you, then it’s much easier to figure out how to get there. If you’re redesigning something very old, then it’s possible that your goals may have changed over time. Define exactly how you want the site to support your current business objectives, and make sure that every element you include on the site supports those objectives. If it’s just filling space, then take it out. (Yeah, I’m talking about YOU, boring generic Mission Statement, and YOU, grainy Photograph of Warehouse Exterior!)

Step 2: Identify the problems

You’ll be able to spot a lot of the most glaring problems off the bat. Can Google find you? Are you getting business from the site? Have people had trouble buying something or finding something from your site? Is it ugly, even according to you, the website’s parents?

At this point of the process, I recommend getting a few "average" people to look at your site, and watch them as they try to complete a typical task– such as finding some information, filling out a form, or buying a product. And by "average" person, I mean someone who has never been to your site, and is as frustratingly computer-illiterate as possible. Maybe an octogenarian neighbor, or your mother, or better yet, my mother.

Step 3: Hire an expert

Talk to some website designers or usability consultants. (Tip: It’s a lot easier to find a website designer than a usability consultant, mainly because nobody knows what a "usability consultant" is, and lots of people with a copy of Frontpage call themselves a "website designer.") You need to find someone who understands your specific business goals, has a good grasp of the techniques available to realize those goals, and most importantly, knows how to design for the needs of your website visitor. I’m not saying this person CAN’T be your friend’s wife’s nephew who is studying HTML, but I kind of am. Anyone can create a pretty page of code and graphics; what you need is someone who understands good user-centric design.

Step 4: Test, test test!

Test your site early, and test it often. One test at the beginning is more valuable than 50 at the end, because it’s the least expensive and time-consuming point at which to correct a mistake. Come up with a mockup, and then get someone to walk through it doing a typical task. Make note of what wasn’t 100% clear, and make it 100% clear. (See Don’t Make Me Think! for tips on how to do cheap, easy usability testing.)

The "Before" Site

The site I used as a makeover example is the Music Distributors Association (MDA). MDA is an international non-profit organization of manufacturers, wholesalers, importers and exporters of musical instruments and accessories, sound reinforcement products and published music. Their goal is to grow the organization by increasing membership and attendance at their annual events. Here is the original site (click image to see larger):

The biggest problems, which become instantly apparent upon the first two minutes of walking through the site, include:

• Frames-based design, which causes big problems in bookmarking and search engine optimization
• Ambiguous icon-only navigation, which makes it impossible to visually scan or intuitively understand the choices
• Confusing architecture (where do you join? Where is "home"? Why is the directory split across 7 different sections?)
• No home button, and no clickable logo to take you home
• No clear call to action means the user doesn’t know what to do next
• No compelling reasons to join the association
• Difficult to find out how to join and how to register for a conference (the two primary reasons for going to the site)
• Too much extraneous text makes you not want to read or scroll (people tend to read only the first line or two of a paragraph, in an F pattern)
• Dated visual design reflects poorly on the freshness and vitality of the organization

It’s important to evaluate your site through fresh eyes. The less you know, the more valuable you are at uncovering problems. That’s why testing your site with people who have never seen your site is extremely important. Every single time you find something that leaves you hesitating for a moment while you figure out what to do next (a "question mark in your head"), that is something that needs to be fixed.

Tip: Don’t strive to be understood; strive to be impossible to be misunderstood.

The "After" Site

Here is a mockup of how I might fix those problems (click image to see larger):

Some of the things I did were:

• Make the call to action immediately clear "Join MDA now!" and a designated Events area with "Register" buttons
• A search button (You can implement Google custom search for free)
• Use plain text navigation to make it easy to visually scan the options, and easy for Google to spider. (See tips for Successful Navigation Design)
• Drastically shorten the home page text, leaving it peppered with SEO-friendly keywords and links to pages within the site
• Large graphical area in the middle which can be used to visually set the tone for the site, and can be easily modified to include Flash, or other kinds of rich media, and can be changed periodically to draw attention to different things
• Highlight a member (lower right) – this adds value to members and doesn’t cost you anything
• Restructured the site so that the member directory is under a single link
• Added a "Benefits of Membership" page where the association can clearly explain what extras members will get when they
• Added a "forum" where members can talk directly to each other
• Added an "events" page where all the assocation’s event information can reside

Conclusion

As long as you "design with the end in mind" and always make sure that you design for the needs of your user, you can’t go too far wrong.

I strongly recommend this book: Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug. It’s short, concise, entertaining, filled with great examples, and chock full of timeless common sense. It’s perfect for anyone who owns, designs, or manages websites.
Covered are topics including:

• How people want to use the web (hint: "don’t make me think")
• How they do use the web (they scan, "satisfice" and muddle through).
• How to design web pages for scanning rather than reading
• Why users prefer mindless (obvious) choices
• How to write for the web
• How to design navigation
• How to design your home page
• How to do simple usability testing (cheaply and easily)

I will be posting some useful website redesign tips and hints on this blog later this week, so be sure to check back (and be sure to hit the "subscribe" button on this blog)!

Thanks to all of you who attended my NAMM session on website redesign, and the panel discussion I participated on, called "Design Your Website on a Dime." Contact me if you would like more information or help on your next website redesign!