Since our website redesigns last year, our main pages have been re-fitted with a promotional module called "Cards on the Table" (or "CoTT" for short). This was a replacement for the classic "Dynamic Lead" module (the usual giant animated picture with text that seems ubiquitous on programming websites across the Web). I based the design on the simple notion that quickly exposing a site's value at the top of the page was a good thing for a time-starved audience. Since users don't have time for animations and rarely use controls to see more promotions, we had to come up with a new strategy to reach an audience skeptical that our sites had value. This post explains the design challenge of the new dynamic lead from a variety of angles and the outcomes.

please click "read more" for the goods...


First let's take a look back on the prior design (see major portals including our own). The form factor of the DL has always been driven by a couple of print-based assumptions which I feel are wrong for the Web.

The major notion is that editors always know what is good for us and will PUT THAT ITEM FIRST. This is a key assumption that drives editorial and art direction teams in almost all realms of publishing and media. It is top-down. It is reinforced by newspapers and TV every day as "the lead story", the "cover story". In print it actually works out pretty well (or at least it used to). Some people need to be told what is most important, the reasoning goes and this is, of coarse, true. When translated visually you wind up with big juicy promos, or "hero shots" on a Web page shouting "this is what you should care about!".

The richer manifestations of this approach have nice animation, are Flash-based, and, in themselves, are quite nice designs. Tabs or other navigation devices allow the user to jump-cut to any of the promotions underneath. We've done a lot of variations on this theme in the past as have our competitors.

As we embarked on our redesigns in mid-2006, I had to ask: "Is everyone interested in the same lead story?" The answer, obviously, is of course "no". The next postulate was: "Does anyone have time to click around this thing and find something of interest?" Again, the answer is no when you step back and put yourselves in the shoes of consumers.

The more we sketched, the more that the idea that someone was going to wait around 8 seconds to see what promotion came up next made less and less sense to me. Users divine the value of a web page in a micro-second--there is a lot of competition for their attention. And our own user research shows that when content or utility is hidden behind tabs or other interface devices, usage plummets on the components that are hidden.

Also, a LOT of effort was going into the writing and design of promotions that many people would never actually see. Some designs for panels were going back and forth between designers and editors 4 or 5 times before they were deemed "right". The design and photo teams in particular were screaming for relief. So, ease of maintenance had to be a business factor of the re-design as well. That led to the standard photo sizes and the non-layering of text and image for ease of publishing. A panel could now be easily created in a matter of minutes--as opposed to the hours it required before. Great!

But design insights are not always based on objective data alone. Firsthand observation and experience are critical as well. In my own corner, as a fan of music, I was starting to dislike the AOL Music site because it was always promoting teen pop acts. Didn't the site have more to offer outside the base? Couldn't we cater to a wider variety of musical tastes at first glance? Why did I have to hunt around for the cool stuff? The content was there, it was just buried beneath the surface rarely to be found. To attract a new audience on the Web we had to be about more that one programming idea. One shot to get it right. Would you want to bank all of that on one picture of Britney Spears?

So why THREE exposed in the solution? Well, two is not enough to establish a pattern. And two is just not enough to convey you have a lot of content on your site. Three panels communicates to the user the breadth and depth of what you have for them and increases the odds that you have a match to their interests. Three promos also visually anchor the page by creating enough mass to attract the eye. On a related note, the aol.com team did a test with just two promotions in the DL and it failed to delight users. Three it became as a standard in programming.

How have they done? Very well. In fact it is the standard module on most all programming mains and many hubs.

Unfortunately, as successful as all of the sites we redesigned have been it is hard to isolate the leads effectively until true A/B testing can happen on the channel level (coming soon). And the redesign of the Cards on the Table promotional module did not happen in a vacuum. We have to remember that we simultaneously added more prominent search, introduced left hand navigation, a stronger right rail of content and cross-linking, standard global navigation, and new cross promotion in the footers.

Advancing on the design, a new release comes out this month that allows the programming teams to have a "hero shot" again as a larger picture that cuts across two of the three panels. It will be used with discretion to "break through" on bigger stories that need more heat or traffic and will help to communicate something is extremely special (Grammies, Superbowl, Oscars, etc.)

Recently, I was surprised to see yahoo! adopt the design on their women's site, shine. Almost to a pixel I couldn't tell the difference with our own module. Cool (well, sort of). Nice to be copied now and then.

Well, that's a lot to convey I realize. Just wanted to get it all down. We're already working on the next generation of it now (and the 2.0 version is not even out yet!). But that's the biz.

Related Links: