Website Redesign: Piedmont Natural Gas – Part 1

Let me start by saying that Piedmont Natural Gas is only one of hundreds of big-company websites that are still terrible. I’m sure they have great intentions, but I will use their site to highlight things that are wrong with many websites in general.

The current Piedmont Natural Gas Website in Firefox at 1024×768.

1. Tell your visitor why they are there

The website currently has no call to action, no big button to click, nothing but tons of links, all the same size. Most of Piedmont Natural Gas’s customers are likely there to:

• Pay a bill
• Sign up for service
• Cancel Service

The homepage should have clear directions for these actions. Right now, the user has to sit and read each link to find anything relevant. This creates a lot of cognitive friction (more thinking) and that means users are likely frustrated and/or unsure of what to do. At that point, making the site usable and clear is as much about PR (showing that you are out to help, not hinder), as it is about good web design.

2. Use size and color to show what’s important

This applies to text and links the most. Currently, all text and all links on the homepage are the same size, which makes it very difficult to see which things are the most important. The colors are also mixed, so you can’t tell which things are are links and which things are most important. Even the footer links are the same size and color, so it’s difficult to tell that they are less important than the “Start/Stop Service” link.

All the text/links on the homepage

On a User Experience note, none of the orange links have a hover state, so it’s not obvious they are even clickable links.

3. Use your space

Usually this is not an issue with web design, usually designers are begging for white space, not asking to fill voids. The current homepage has a huge void in it (and it’s just black!).

Yes, this giant black space is on the homepage

This banner area is prime real estate on a website, usually to advertise a service, show some big pretty photos, or something, anything. Don’t fill it just to fill it, but use your space.

4. Use, don’t misuse your branding

Branding is a good thing, but you don’t have to misuse it. Piedmont Natural Gas’s colors are blue and orange, did you pick that up? The entire site is almost completely blue and orange. The issue is not branding everything, it’s about misusing your branding so that the visuals and interaction suffer. The biggest misuse on the homepage is that the big pretty photos are even blue!

Nothing says "warm" like blue people

Instead of using a JQuery rotator to rotate the images (or anything javascript), or a flash rotator, the image is an animated GIF. Quick rule: never use an animated GIF that contains people, because skin is really varied and complex, and it will usually comes out looking strange.

5. Use great images

GIF hating aside, and considering the onslaught of stock photos on corporate websites, check out the strange imagery:

These 2½ people look like they are responsible for the New World Order or something. Possible tagline “The people responsible for making sure you don’t know too much, love Piedmont Natural Gas”

These legs come from nowhere. Possible tagline “Piedmont Natural Gas. We’ve walked on the moon. In pairs. And it was all purple.”

And as a last, minor note, why do they both have to be wearing hats?

As a last point of objection to these images, Piedmont Natural Gas is a heating company. So pulling up their website to start your heating service, or when your heating is out and you’re blue from the cold, you are greeted with blue people, not warm colors, warm looking people, or warm images. Okay, let’s move on…

6. Make your site work in all browsers at several sizes

This is obvious to most web designers, but not to most companies. You don’t have to make your site look exactly the same on all browsers, just make it work, and make it viewable at least.

The site works at a common resolution (1024×768), but if I stretch my browser window wider, the layout starts to overlap and the gaping black hole becomes even bigger

The first problem is that the graphic in the lower right now floats behind the text links, making them difficult to read, and overlapping clickable areas. You can see that the rotating GIF of blue people (and legs) is floats right, which makes the huge black area even bigger. The last thing is just annoying more than anything, which is that the blue background does not stretch to the full page width. Now our huge black banner area has a matching huge black sidebar area. Sweet.

These problems seem minor, but they go a long way towards ensuring your site always looks and works great. Fixing these problems would take roughly 10 minutes, so there’s no excuse not to make the fixes.

Conclusion

Okay, so this site is not great. I’m sure it rocked 10 years ago, but since then, not so much. In the next post, we’ll tackle redesigning it to make the most of the homepage.