Article of Interest - Web Site Design
In Search of the Perfect Web Site
March 1, 2002
(Hint: It's hidden inside the one you already have.)
Christopher Cunningham of RedEnvelope
You were seduced by good looks only to find out it was a match made in hell. So it is with Web sites. The difference is, your customers will get cold feet long before they venture more than a few screens deep into a poorly engineered site, never mind how hip or gorgeous it is.
Usability problems are never obvious—especially if your site looks fantastic. But as luxury gift e-tailer RedEnvelope's CIO Christopher Cunningham found, a few minor tweaks can catapult sales.
At the outset of 2000, Cunningham thought his startup had all the makings of an Internet success story: a solid business plan, two rounds of funding from Sequoia Capital, and a much-lauded Web store design that was directed by Hilary Billings, the celebrated designer behind Pottery Barn and the W Hotel chain.
But that spring, while Cunningham sat in his third-floor office under the shadow of San Francisco's Bay Bridge, he watched as fellow Bay Area Internet retailers like Pets.com and eToys fell—hard. From January 2000 to June 2001, nearly 200 Internet companies closed shop. To avoid the same fate, Cunningham took a critical look at RedEnvelope's Web site—that square foot of real estate that, with the company's paper catalog, made up its entire business.
"If you have a brick-and-mortar store, you can walk in and watch your customers pick up a blender, toaster, or whatever, and see the interactions," says Cunningham. "But the Web is a great wall between me and the customers. It creates a distance you don't want."
Cunningham had good reason to worry about that distance. An August 2001 Yankee Group study revealed that only 55 percent of businesses considered the Net a key factor in their overall strategy, down from 76 percent the year before.
A slick-looking site filled with cool gifts wasn't enough. Cunningham realized that the next most crucial key to succeeding on the Net was ease of use—particularly making it as painless as possible for customers to complete a purchase. The number that chafed Cunningham most: 81 percent of RedEnvelope customers abandoned their filled shopping carts without buying a thing.
More Than a Face-Lift
According to Web design and usability guru Jakob Nielsen, companies should spend 10 percent of a Web project's budget studying how customers will use the new or redesigned site. Doing so, he insists, stands to improve a site's usability by a whopping 99 percent.
Cunningham had a similar realization during a visit to RedEnvelope's call center in San Diego. He took a seat at a call station and donned a headset—and customers gave him an earful. One man complained about the site's then-unique multiship capability, which lets shoppers send gifts to as many as 15 different addresses. But the site timed out after an hour of inactivity, and it had disconnected him just as he had finished digging through his address book.
"That's an example of what I call the self-delusion effect," says Cunningham. "You get smart people in a room and they come up with ideas of what shopping is like and what customers do and don't like—but they don't see it from a customer's point of view. We couldn't see why anyone would stay on the site inactive for an hour, but we were wrong."
Determined to give RedEnvelope's online customers the simplest shopping experience possible, he hired consultants from Vividence, a Web site consulting and usability company.
Liz Edison, Vividence's head consultant on the project, had helped Nordstrom, Microsoft, and Cisco fine-tune their sites. She ran tests on the RedEnvelope.com site with volunteers from Vividence's tester database—Web users who followed a script of tasks on the site and gave feedback in exchange for gift certificates.
Edison's team compiled the results and issued the verdict: "Users were impressed by the warm, luxurious feel of the site," says Edison. "But they were disappointed with the shopping and search functionality—as we expected, they pointed out some specific problems with the checkout process."
Prioritizing Vividence's list of recommendations for solving these problems was a challenge. Cunningham didn't want to alienate longtime customers with too many radical changes. "The problem with any makeover is learning and unlearning," he says. "We had taught visitors how to use our site, and if we changed too much we'd have a legacy problem. It's like the ATM machine: Who wants a new one? It may not be the best design, but it works and you don't have to think about it."
Some of the results also caught Cunningham off guard. For instance, many testers said RedEnvelope's site was too slow. But company engineers' exhaustive tests showed that theirs was actually one of the nimblest sites on the Web. The problem wasn't with actual speed. It was a problem of perception. RedEnvelope's catalog pages were designed vertically, which meant that many products were hidden on the bottom half of the page, giving the impression that the site loaded slowly.
Another problem: the navigation bar, which confused testers by appearing across the top of the page in some places, and along the left-hand side in others. The first steps in the redesign were moving this bar to the top of every page, and changing page layouts so images appeared horizontally to give the impression of increased speed.
Next, RedEnvelope reconsidered its search function. Close to 30 percent of shoppers rely on this feature to find gifts, but Vividence's testers registered dissatisfaction with its ability to find what they wanted. They also suggested new search categories, like search by price and search by age, which were added to the site along with categories RedEnvelope customers suggested, like Just Because, Good Luck, and Spa Seeker.
The most glaring problems, however, showed up in an area where every e-tailing site fights for the upper hand: checkout. Cunningham already knew that an alarming number of customers walked out on full shopping carts. Vividence testers pointed out why: It took too long, users were confused by the order in which information was requested and presented, and they wanted to see the total price sooner. This was a major sticking point: "Customers don't like to give their credit card number until they know exactly how much they're paying," says Cunningham.
So he trimmed checkout from five steps to three: Step one is to log in, step two asks for billing and delivery addresses, and step three takes payment information. Complete pricing information was swept to the first page, and each page now notes how many steps are left.
By October, the new site was ready. A follow-up evaluation showed major improvements. Satisfaction with the site increased by 13 percent, and 32 percent more panelists reported a positive shopping experience. Overall, users indicated they were 12 percent more likely to shop there.
But the real measure of the redesign's success showed up right where Cunningham most wanted to see it: The number of carts abandoned during checkout dropped from 81 to 63 percent (slightly better than the industry average of 65 percent). And sales jumped by 95 percent to $7.7 million over the course of a year.
Not surprisingly, RedEnvelope isn't saying how much it spent on Vividence's services. Typical annual contracts run about $200,000, according to Vividence, but can start as low as $30,000 for a one-time pilot evaluation and go up to $500,000 for an annual program that includes several evaluations on multiple sites.
Go Far, Go Fast
In launching its redesigned home page in December, Travelocity had more at stake than usual. The company makes design changes to its site every six to 12 months—just often enough to keep it fresh without confusing customers. But with the travel industry in a tailspin, and fierce competition from No. 1 Expedia and deep-pocketed newcomer Orbitz, Travelocity's VP of customer experience Elizabeth Cole had to make sure her site's new home page was not only an improvement over the old one, but also the best in the business.
Cole set up focus groups to test the first conceptual ideas, but when it came time to test new home page designs, she relied almost totally on 400 Vividence testers. "Price is very important in our industry," says Cole. "But in the end people have to be able to find what they're looking for. Price and the ease with which customers use the site are our top concerns."
After six months of development and two rounds of testing, Cole got the results she was seeking. Testers preferred Travelocity's new home page design 2 to 1 compared with the current site. More importantly, they preferred it 2 to 1 over Expedia and Orbitz home pages.
The main ingredient in the new design's success was what it didn't have: clutter. Travelocity posted the most frequently used features—including search, Fare Watcher, and Trip Expert—prominently at the top of the page.
Cole and her team considered one other change. It seemed simple, but it had never been done before. Icons for travel services—cruises, car rental, and air travel—had always appeared atop the home page. Clicking on an icon brought up a search box for that subject. But it occurred to Cole that it might actually make more sense for the link to take visitors to an entire page on that subject.
"It seemed really wacky because no one does it this way, no one had tried it," she says. "There was concern it might be too new and too different."
But Cole's innovation was a hit. And although customers said the change was unexpected, 79 percent said they preferred it (while 21 percent liked it the old way).
"For the first two years we were in business, everyone had a 14.4Kbps modem and all they cared about was that the site was fast and that it was up," says Cole. "But customer expectations change fast and the bar has been raised. Everybody's fast, so now customers want to know, 'What can you do for me next?' "
Deliver Results
If the dot-com boom taught businesses anything, it's that money spent on new technologies has to be justified with hard-dollar returns. Yet companies are dropping lots of cash on their sites—without knowing exactly what they get for it. The Yankee Group reports that businesses spend about $38,000 a year for basic Web site upkeep, while Forrester Research says large retailers spend $3 million to $52 million a year on software, services, and labor to keep online stores' virtual doors open.
"The biggest thing right now is making sure customer service is better, and making the site usable," says Yankee Group analyst Lisa Melsted.
Mike Schween, managing director of marketing for FedEx.com Applications, makes a living out of worrying about customer service. In May, when he needed to test the design of a new Web-based tracking service for high-volume customers, Schween first considered focus groups. But time and budget constraints got the better of him, and he turned instead to Vividence, which FedEx has used to get feedback and recommendations for improving its site since November 2000.
The new product, which was set to launch in late January, is called InSight. It's essentially a private portal for FedEx business customers that automatically remembers all tracking numbers associated with each customer's account. It also alerts customers when shipments are delayed, when they've cleared, and when they've arrived.
"This kind of service is not being offered by anyone in the express or ground markets," says Schween. "It's absolutely one of our highest-priority projects. It's an extremely strategic initiative, and when we launch the product there needs to be immediate acceptance."
In Vividence's testing, however, users were slow to subscribe to the service for two reasons: The enrollment process took too long and customers didn't understand what they stood to gain. To solve the first issue, the 10-page enrollment process was cut in half.
Selling customers on the service itself was a little tougher. "We've always considered speed and efficiency to be our best attributes," says Schween. "But the flip side of that is that we were designing all of our applications for power users who don't want a lot of superfluous information, and in this case people needed more text up front to understand the product's benefits." At launch, the site will have been reworked with more detailed product descriptions.
"Testing let us see the design with new eyes," said Schween. "Before, it was impossible for us to come to the site with the perspective of a new customer."
Which is exactly why usability guru Jakob Nielsen believes that testing should be an essential part of any site design (see Elements of Design). Despite these benefits, Nielsen estimates that barely 20 percent of companies test Internet projects before setting them loose online.
"If people can't figure this out," he says, "they deserve to go bankrupt."
Top 5 Ways to Get Shoppers to the Finish Line
1. Make registration optional.
Half of Vividence panelists say they're more likely to abandon a site if they
have to register before buying.
2. Show shipping prices early.
More than 80 percent of testers say they want to see shipping prices early in
the checkout process—before they click on "Buy."
3. Highlight special deals.
Many Web shoppers are bargain hunters. Good deals should get prime real estate.
4. Shorten checkout.
Sixty percent of testers say they favor entry fields on a single checkout
screen, not multiple pages.
5. Save shopping carts.
Customers often return to buy items left behind in their carts. Make it easy for
them by saving the cart's contents for 30 days or more.
Test Your Own Site
Wonder why your customers abandon their shopping carts? These Web consultants can tell you.
Austin Usability Professional consultants and end-user panelists lab-test your site from prototype design to final product. Average cost for a modest-size test is $10,000.
BetaSphere Feedback Management Server Web-based software for gathering feedback on new Web products and applications. Server license starts at $150,000.
Nielsen Norman Group Usability gurus unleash their methodology on your Web site, offering home page reviews for $10,000 and Web site reviews with usability testing for $20,000 to $35,000.
Vividence Qualified panelists test your site, while software gathers feedback. Consultants then make recommendations for site changes. Average one-time project costs about $200,000.
WebCriteria Software tracks your site visitors to detect how they behave—then WebCriteria suggests site changes. Average pricing is from $30,000 to $50,000 per year.
Oops! Learn from Your Mistakes
Tinkering with your Web site doesn't always guarantee positive results. David Scifres, VP of Internet services at Camping World, a large RV equipment retailer, found that his first redesign attempt fell flat.
Scifres enlisted the help of WebCriteria, whose software tracks where customers get tripped up on a Web site. Based on the results, he reworked some wording, revamped the log-in page, and simplified navigation. But "the changes did not have a positive effect—in fact, they had a minor negative effect," says Scifres, who saw a small but perceptible dip in conversion rates.
Still, he doesn't consider the experiment a failure. Without the software, he wouldn't have known so quickly where and why customers were leaving. So with WebCriteria's help, he made some more tweaks to the site, reversing the earlier results: Conversion rates rose from 39 to 52 percent.
For Scifres, the biggest benefit is knowing immediately how changes affect site performance and customer behavior. "I can measure the effects of anything that goes on the site. For instance, if marketing wants to track Web sales back to the catalog, and they insist that online visitors give their catalog number, I can find out if that irritates customers. If it's consequential, I want to know."
ELEMENTS OF DESIGN
Not every design rule works
for every site—or every customer. But usability expert Jakob Nielsen offers
these recommendations for making your Web site easy to use.
Page Length
Limit it to three full screens. The most important features—like navigation and
most-used links—always go on the first screen.
Logo
It's the first thing visitors look for. Place it in the upper left-hand corner.
Search
Place it in a top corner; a box is better than a link to a search page.
Download Time
Ten seconds is the max. For customers coming to you via dial-up, cap file size
at 50Kbytes.
Text Color
Always use black for body text. It looks professional and it's easy on the eyes.
Background Color
A white background is clean and nondistracting. It's the choice of benchmark
sites like Amazon.com and Yahoo.
Link Color
Blue is recommended. Visited links should be purple. If this doesn't work with
your color scheme, visited links should be a less prominent color.
SOURCE: Homepage Usability: 50 Web Sites Deconstructed by Jakob Nielsen and Marie Tahir (New Riders Publishing, 2001)
