Litmus

I was responsible for the complete redesign of the Litmus site that we launched last month. I'd like to go through a few details about what we changed, and the thought process behind them.

Less cluttered
As we'd added more features over time, the pages were getting more and more cluttered. Especially the home page. Here's how it looked before:

And here's the redesigned version:

Notice the screenshot of the application itself is now the only visual on the home page. Looking back, the sexy 3D “pages” may have looked nice, but didn't aid understanding of what the product actually was.

Bigger fonts
I've become quite a fan of larger fonts with nice tall line spacing. They clearly enhance readability, but they also seem more accessible. I don't mean that from an disability/accessibility standpoint (though that's also true). I mean it makes the pages seem less dense, less intimidating, and easier to scan.

Along with the larger fonts I also added emphasis to key phrases in the form of yellow highlights (just by styling the em tag to add a yellow background colour). That helps to draw your eye through the copy. Incidentally, I also boosted the contrast of the highlighted type, to make it pop out a little more.

More text
Along with a larger font size we've also added a lot more text to the site. We wanted to keep things as concise as possible, but when selling a product like ours there's quite a lot to explain. We've had a lot more sign ups from the new site, and I think the additional copy has definitely had a positive effect in that respect.

I believe people will take the time to read a few pages of information about a product if they're seriously considering using it. There is often talk of cutting back copy to the absolute essentials, but I think that can go too far. We've tried to inject a little friendliness and personality into our copy, as well as covering all the details of the product. As a result it's a little longer than it could be, but in my opinion it works better.

Lots of zoomable screenshots
All the product details are now accompanied by screenshots. When clicked, these expand to give full size views of the feature in question.

The previous site didn't have any full size screenshots. Looking back this was a huge mistake, and one of the must frustrating things I encounter on other sites - if I'm considering buying a product (physical or virtual) let me see it properly first!

As an aside, I used Cabel Sasser's FancyZoom to load our full size screenshots and have been very pleased with it. A couple of effects like that, used in moderation, can really lift a design. Note the rollover effect for the thumbnails as well.

In part two I cover the details of testing the new site, and the effect it's had on our actual visitor and sign up figures.