Looks for Big Improvements from Some Subtle Design Tweaks

The site looked pretty familiar after its recent design alterations. Just goes to show that a few seemingly minor changes can have enormous impact

By Joan O’C. Hamilton

Tweak V. 1.To pinch, pluck, or twist sharply. 2.To adjust; fine-tune. From Middle English twikken, from Old English twiccian — The American Heritage Dictionary

There are times in the design life of a web site when only a big overhaul will do. Ford Motor Co., for example, turned to Razorfish designers earlier this year to transform a site whose design had managed to bury the very things increasingly web-savvy car buyers wanted to research -- hard data on different makes and models. Today, call up and both the look and organization are completely different. It's a much more informative, text-packed, easy to navigate site admirably devoid of car commercial cliches like tiny, indistinguishable images of autos zipping around empty roads. And it's loaded with real decision-supporting data for car buyers.

When launched its 11th version of its web site on March 19, however, the look was pretty familiar. The color scheme was identical to the previous version. The navigation areas had the same general appearance, and the largest piece of real estate in the middle of the home page screen was still devoted to a sort of product promo du jour.

But in fact, IBM made some significant architectural changes to the way the site was organized and how users could now navigate through it. And it attacked some links where poor word and icon choices were undermining the ability of the site to present information as effectively in Tokyo or Turin as in Toledo. It's a great example of "tweaking" a web site -- using user data and other research to zero in on those elements most causing customers trouble -- but otherwise leaving well enough alone. The changes can seem minor. The impact can be enormous.

IBM's old look
Old New

"If you step back twenty feet, the novice won't see much visual difference," notes Jeanine M. Cotter, director of experience design and audience strategy for IBM. That's probably not a bad thing. Business Week consulted several of our web design panelists for a quick once-over about the old IBM site and they mostly said the same thing: Nice, clean graphic design. Uncluttered home page. Nice balance of graphic elements and white space. In a comparative study of 25 high-tech web sites by Summit Strategies Inc. in fact, IBM had ranked an impressive 5th, behind Dell, Compaq, Microsoft, Cisco, for most effective corporate web site.

But Cotter's team spent months pouring over feedback after they launched Version 10 last year. User surveys, click-through data and other forms of feedback and research were yielding a common message: Users were getting confused as they tried to navigate through the site, especially when they wanted to actually buy something. The e-commerce functions of the site had developed in two distinct paths and it was exasperating shoppers. There was plenty of product data to enable research and informed buying, but the actual shopping function existed off on its own navigation path under a "shopping cart" icon on the home page.

The old IBM navigation bar
"As we built a user experience map we decided we needed to focus on top to bottom information architecture," says Cotter. She says's visitors are very technically sophisticated and web savvy and they tend to be business people who are in decision-making positions. Thus, IBM needed to make the site easier for them to actually push a "buy" button (It's noteworthy that while IBM's superior support and e-commerce capabilities had pushed it high up in the Summit rankings, in navigation design the site had ranked 23 out of 25 companies).

The new IBM cart navigation tools
In its revised version, the shopping cart icon and button on the top right of the home page have disappeared. Instead, shoppers can "load" their carts from links within many product pages, where each page either has a link for "how to buy" or a specific "browse and buy" or add to cart link on the page, itself.

Also in the old design, there was no way to register on the home page.. In the new site, a new "My account" button initiates what IBM says will be significant initiatives to better help users personalize the site, in everything from language, to newsletters or other data they'd like to order, or check an order status.

In several other flubs, IBM had fallen into the trap of letting internal company designations that were not clear to outsiders, invade its web space. The most glaring example was in the black horizontal navigation bar, where IBM's previous design divided products into "Products" and "Consulting." Inside IBM, it seems, products meant anything one could physically buy, while consulting referred to all the services the company sold, from training to system design and support. But "consulting" kept coming up short on click-through analyses -- people simply did not equate that term with services, and so were frustrated they couldn't find services under the products menu. "Consulting is a generic term that means different things to different people and didn't represent the breadth of what we offered," Cotter explains. Observes Kara Coyne, a senior user experience specialist with the Nielsen Norman Group , this kind of inside/outside perception problem is very common in large organizations. "You get so used to (a term used internally) that you can't imagine anyone wouldn't recognize it," she says. In the new design, there is a single "landing page" that is now reached by a home page link that says "products and services."

Still more tweaking occurred in trying to make the site work better across the 31 languages in which IBM presents customizable home pages and content. For example, one reason for removing the previous "Support" button on the home page, which also contained a + icon, was that in some countries the + is a common symbol for "help" (as in the Red Cross). Support and help are related obviously, however users viewed the icon as indicating that was where to go to get help on the site, itself. IBM also paid more attention to translations across different languages. Previously, it had tried to make the language as uniform as possible, but it discovered places where references to accounts, for example, translated very narrowly as if referring to bank accounts, which was not the intended meaning. In "My account," users can now pick from features that vary by country. Choose Canada, for example, and users will see a home page that immediately presents them with the option of viewing it in French or English, and also emphasizes IBM's activities with Canadian customers in the news highlights.

Our designers warn that there is an art to tweaking correctly. Constantly fiddling with graphics and icons, for example, can disorient and exasperate frequent site users who grow used to visual clues to navigate to the information they're seeking. "There are companies that go in the wrong direction with tweaking," says Marty Gruhn, vice president of Summit. .And over-reacting to feedback that doesn't actually speak to the ability of a user to get a job done as much as to personal aesthetic preferences can really foul things up. "You can run into the trap of subjectively tweaking versus objectively tweaking," explains Michael LeBeau president of the web design consultancy Byte Interactive of South Norwalk, Ct.. He and Coyne point out that web designers are constantly coming up against senior level executives in a company who order design changes without a good understanding of even the basics of interactive design. "Subjective tweaking happens when you don't have a solid creative and marketing strategy," says LeBeau, who tries to develop exactly that for high profile clients including Perrier, Coty, and Olympus.

It doesn't take long to differentiate between subjective and objective tweaking in conversations with clients, he says. "Too often we find questions aren't asked like ‘What do we want to get out of this?" We say: "Let's talk about what's going to drive your business. We want a consumer-centric focus rather than a company-centric focus.'" But that doesn't seem to be an issue at IBM. Vice President of Marketing and Strategy Dave Bradley is a big supporter of collecting data constantly to monitor and help improve the site. In that view, he is aligned with user specialist Coyne: "One of the biggest issues in web design is when you have a user base that's so varied. That's why doing usability testing is so important. So you can figure out -- have we ruined the experience for any one person, with a design change." Adds Bradley: "We've invested in data."

There is one element of both the old and new design that gave LeBeau pause -- attempting to make virtually everything IBM sells quickly accessibly to every user from the home page. "I think it would have made more sense to spend some time on figuring out who is coming to this site. They've obviously got very diverse user groups yet they've got every single product and service available to every user on every page... It seems like it would make more sense to take users off to sub-sites."

Cotter says IBM tries to confront that dilemma by designating specific sub-groups on the left-hand navigation list -- such as small business or investors or even journalists. But she says IBM wants to make sure that all users perceive an easy path to products they might want to buy, ranging from a single laptop for their own home office, to a complex suite of training software modules for their company division. LeBeau responds: "The content is so diverse, they can certainly better segment content for specific user groups." For example, the large middle section where IBM features products from many parts of its business, from laptops to large servers, he feels may be better spent helping the customer quickly narrow the view to their interest.

The new IBM Call back feature
One of the elements that helps IBM rank so high against its competition are the links it has sprinkled throughout its site where users can click on "call me" to speak with an IBM representative (on IBM's nickel, by the way) or to chat online in text form.

Unlike others trying to wean users away from the phones,'s Bradley says users love having the option of asking an IBM person to call them to discuss their needs or finish the sale. Summit's Gruhn says that's the kind of feature that can really give a web site a significant competitive advantage: "Some vendors used to hide so they weren't accused of interfering with other sales channels," she notes. IBM's aggressive, multi-communication method outreach to consumers "will set a standard," she believes. Agrees Coyne: "One of the things they do well is helping people stupefied by technology and side-by-side comparison tables."

Not to mention that if, as old English speakers might have put it, IBM indulged in one twiccian too many, frustrated users can always tell them so personally on the phone -- but also finish their order.

Below are some of the key design tweaks launched on March 19th

  1. Move the Search function to a more prominent spot from under IBM's logo and add the "NavCode" search box to expedite the user's path to a specific product they've seen in ads.
  2. Eliminate buttons at top right which were confusing.
  3. Remove "ad-looking" boxes at bottom of previous home page which users ignored.
  4. Change words along top navigation bar to make more sense, specifically take two categories of "products" and "consulting" and merge them into a single link called "products and services."
  5. Begin adding more personalization elements with the "My Account" link where users can set language preferences, check orders, and order newsletters.
  6. Move news and customer-related stories to front page where they generate interest and traffic for specific products.

In IBM's new "landing page" approach, all products and services that IBM offers can be found through this one page.

Hamilton writes the Digital Lifestyle column for BW as well as the online Web Site Makeovers

    Before it's here, it's on the Bloomberg Terminal.