Clicking on all cylinders

Guide to E-Commerce Technology

Maslow`s hierarchy of needs? Cognitive dissonance? High-tech cameras that record what eyes see, versus what viewers report they see? These are not the stuff of Psych Lab experiments—they are representative of some of the thinking and technology underpinning a new generation of retail web site design.

Though online marketing tools such as search have attracted much of the money and effort expended by online retailers to acquire customers and sales, they`re only the starting point on the road to conversion. The rest is what happens to visitors after they`re on the site. It`s there, in the art—and increasingly the science—of site design, that retailers are looking deeper to find gains. As a result, new planning methodology, research tools and technology are part of retail site design today, as sites have evolved from brochureware to online catalogs to an increasingly interactive experience.

New directions in site design spring from the same objective: to get at what`s in the online customer`s head and attempt to build that into the customer`s shopping experience on a site. For it`s the customer`s view of what`s important on a site, and not the old paradigm emphasizing what the retailer would like to convey about itself, that is at the center of smart site design now.

It`s that realization that`s driving major site redesigns at retailers such as J.C. Whitney, for example. When the auto parts and accessories retailer planned the new site that went up in May, it took the approach of putting corporate objectives to the side and instead thought like a customer: How could it design a site that would make customers see that it was in their best interest to buy from J.C. Whitney and not somewhere else? To get there, vice president of e-commerce Geoffrey Robertson and his team borrowed from the study of psychology the concept of a customer`s "hierarchy of needs" and built the new site entirely around it. The result: "We are seeing double-digit conversion rates," Robertson says.

Keeping the needle moving

Across retail sites, early design efforts to grab visitors` attention and encourage purchase—such as adding colors that jump out or re-arranging features on pages—moved the needle on sales. But keeping that needle moving requires more today as online consumers grow more sophisticated.

"Since 2003, there`s been a shift in the way consumers respond. A lot of the old direct marketing or manipulation doesn`t work anymore," observes Bryan Eisenberg, co-founder of web marketing services firm Future Now Inc. "Things are starting to affect conversion now that didn`t a few years ago, like consumer-generated content."

And there have been other shifts in consumer use as well that retail site design must now grapple with. For instance, site operators now must design around the fact that home pages get less traffic than in the past as more visitors bypass that messaging and access the site from a variety of entry points. Site design also is looking beyond landing and category pages to pay new attention to pages and functions buried deep within the site.

"More companies are realizing that very minor changes on a product page or even a payments page—what copy is bolded or how many bullet points it has—can make a material difference," says Mark Wachen, CEO of online testing and optimization services provider Optimost.

Site design also is adapting to incorporate site architecture that allows personalized targeting of visitors while they are on the site. "There have always been cross-sells and upsells, but for a long time they have been based on product attributes, not on the attributes of the customer who`s looking," says David Friedman, regional president of interactive agency AvenueA/Razorfish. "But when customers come through your site, they leave a whole trail of information on what they are interested in. So we are getting much more involved now in designing sites in such a way that allows us to customize messaging and offers to particular customers."

The 60% opportunity

When multi-channel J.C. Whitney saw last year that 60% of its new-to-file customers were coming to it online, it realized the web represented a critical avenue to position what it believes makes the company stand out from competitors: its value proposition. A complete site redesign followed.

Surveys suggested the typical customer was a utilitarian shopper, entering the site knowing what he wanted. That suggested a hierarchy of customer needs that the team used to make design decisions. "I knew that at the base level, we had to make sure pricing was right, availability was there, the product information was clear and that customers knew what cars the products could be installed in," Robertson says. With navigation set up to get customers to all of that information quickly, the company then looked for ways to approach the next level of need: how to satisfy shoppers as to why they would want to buy from J.C. Whitney instead of from competitors.

Communicating that message led to some major visual changes in the new site design. J.C. Whitney swapped out some key home page real estate that had been used for general promotions—a feature that appeared to have less influence on its highly-focused typical site visitor—to instead feature a bold "100% Satisfaction Guarantee" banner and logo articulating the value proposition: best prices, fast shipping and easy returns.

Within the site, other changes further addressed the customer hierarchy of needs; for instance, with a new availability tab on product listing pages. Linked to the inventory database, it shows real-time availability and leverages a key part of what differentiates J.C. Whitney but was something the company hadn`t emphasized to customers: one of the strongest in-stock positions in the industry. Among other changes, it recently added product reviews and included a sort by best-seller status in the navigation process, to add another layer of confidence to customers` buying decisions by allowing them to see what others are buying and experiencing with those products.

Since going live with the new site in May, JCWhitney.com`s BizRate customer satisfaction scores have risen by 10 points, which Robertson takes as a proxy for being predictive of repeat visitors, pending a more specific future analysis. And though the site`s add-to-cart rate has dropped, a function of the now-visible real-time product availability, the cart-to-order ratio is up dramatically, about 40%. "It really has shifted customer behavior," Robertson says.

Three to watch

Site design doesn`t exist in a vacuum, but reflects consumers` evolving experience and expectations. AvenueA`s Friedman notes that three design issues its retail site customers are increasingly inquiring about foreshadow emerging best practices in site design. He predicts all three will become standard in how consumers interact with shopping sites in the future.

One is the concept of consumer-generated content as people look to peers for product advice rather than to advertising messages. As a result, incorporating the consumer voice in some way is becoming a more prevalent part of web site design. "The customer is going to go out and find information about your product. You are not going to be able to keep that from happening, so you might as well be part of the conversation," he says. "We recommend if possible, host it on your own site. The last thing you want is to let the consumer go off to another site to find it, one where your competitors are selling a similar product or even the same one at a better price." In fact, a recent consumer survey by the J.C. Williams Group, the E-tailing Group and Start Sampling ranked consumer content as the No. 1 aid to a buying decision, cited by 91% of survey respondents.

Another factor fast becoming important is the ability to target messaging and offers based on prior shopping behavior. "If a customer has come back to your site looking for a swimsuit a couple of times, you know they are in the market. So when they come back again, target them with a swimsuit promotion," Friedman explains. What`s new is that much of the same targeting technology that has been applied to e-mail can now be applied dynamically on sites as customers move through the shopping process.

Architecting sites to accommodate personalized targeting can be infrastructure-intensive, requiring software installation and engineering. Friedman compares the process to a move onto a content management system.

"You define merchandising slots and behaviors within the site, and you need to make sure that as you design product pages, or get into checkout, there are places in the process that are available for you to deliver messages," he says. AvenueA has experimented with a hosted technology from a sister company, Atlas, to target offers to customers on retail sites similar to the way Atlas serves up targeted ads on portals and publisher sites.

The third direction that Freidman sees designing traveling is toward rich media. Applications such as Flash are being used to create persistent shopping carts that stay visible throughout the shopping process as the visitor travels through a site. Gap.com, for example, has a drop-down version that displays a running cart subtotal with each new item added.

Flash and AJAX also are being used to enable enhanced previews that let shoppers pick a product size or color without having to leave the product page. "Every time a shopper has to leave the product page to choose a size or color or go to a shopping cart, that risks breaking the shopping flow," Freidman says. "This allows people to stay much more in the shopping experience, without being distracted by the administrative or cart management activities associated with it."

Evolving tools

The research tools underlying decisions about retail site design continue to evolve, becoming more robust, sophisticated and accessible. "Some of the new reporting tools are doing a much better job of showing the impact of various elements on the page in terms of what really drives order size or conversion," says Neil Clemmons, senior vice president of strategy at interactive agency Critical Mass. "When you have data to back that up rather than just opinion, these discussions tend to go a lot faster and a lot easier."

Critical Mass refers to the phenomenon of what design elements and features influence conversion as "convergence," noting that analytics and testing are making online retailers smarter about what levers to pull on pages. To those research tools, Critical Mass adds something new: eye tracking studies, so far used by relatively few retailers to plot site design. The studies managed by Critical Mass for its clients use special monitors from outside technology providers that incorporate cameras to record eye movements. The technology has moved beyond earlier iterations, which required viewers to wear a helmet-like apparatus, into something much less cumbersome.

The data are significant in rating the effect of page elements because eyes don`t always go where the viewer reports they did. "The amount of visual information that someone is receiving from a web site is astounding, and humans` ability to filter out what is unnecessary to their primary objective there is phenomenal," says Arif Hirani, planning director at Critical Mass. "That`s been one of the surprises. I`d imagined there would be a fairly direct correlation between eye tracking data and self-reported behavior, but that`s not always the case."

Harnessing the habits

Eye tracking studies can shed light, for example, on whether viewers see a page`s primary take-action button, and in what order relative to other page elements; or if the eye went first to the primary or left-hand navigation. Such studies can add an extra layer of intelligence to that provided by analytic tools. "Often, the clickstream data you pull from a reporting tool would show that people are not clicking on a particular button. But you don`t know if it`s because of the label, the placement, or because they just don`t see it. With eye tracking, you can quickly see how many people actually saw it, did their eyes even go there, and in what sequence—did they go there immediately or was it after they studied the page?" says Clemmons.

Software generates individual session recordings as a line map overlaying a web page that shows the direction of the user`s eye movements across the page. Aggregating data from multiple user sessions generates a color-coded heat map showing eye movement trends. That kind of visual information offers web site designers guidance on what elements to place where on the site to increase their effectiveness; practical information, for example, on whether images associated with key text are actually increasing readership of that text.

Eye tracking is also building a body of data on what works and what doesn`t. It`s demonstrated, for example, that the eye becomes habituated to a top navigation or left side navigation scheme. That makes it important for the search box, part of how visitors find their way around a site, to be closely associated with the navigation scheme on a site through color, delineation or location. One Critical Mass client that used a left navigation bar but had placed the search box in the upper right corner of the page—a common arrangement on retail sites—saw significantly better utilization of the guided navigation feature after it moved the search box closer to the nav bar.

Lean forward

While leading-edge retail sites are availing themselves of new tools and technology to guide and implement site design, the same changing patterns of how consumers interact with sites offers takeaways for any online retailer. And whether design addresses that with the help of rich media features or something as simple as moving a search box to a more visible spot, in general, when planning design it pays to think not like a marketer but like a consumer.

Good web site design today has evolved into something more contextual, interactive and much less static than it was even a few years ago. "If you think of TV as a `lean-back` kind of experience, the Internet is a `lean-forward` experience," says Clemmons. "So look for the kind of lean-forward tools and experiences that you can put on a computer monitor that will encourage people to interact, to participate, and to really see that product in their home as something they desire."
mary@verticalwebmedia.com

The buzz on Web 2.0
How will it influence design for retailers?

The buzz lately is about Web 2.0: the fusion between technology that makes online applications work better for consumers, and the community aspect that results from consumers influencing sites every time they visit them. Many retailers are wondering how Web 2.0 will affect visitor reaction to their sites.

The expectations of users are changing as they become accustomed to cutting-edge Web 2.0 sites such as Flickr.com and del.icio.us.com, notes David Fry, CEO of web design, hosting and managed services provider Fry Inc. And the challenge for nearly all web properties now is around what expectations a visitor steeped in Web 2.0 experiences will bring to a site, Fry adds. What will he expect to see and do? What type of interaction will he expect between that site and other sites and services?

Fry notes many new technologies and web design concepts that online retailers must become familiar with in order to engage today`s Web 2.0 consumer. His comments on what he views as the top five:

AJAX (Asynchronous JavaScript and XML): It meets the needs of consumers who no longer want to click and wait for pages and frees designers from page-by-page development to provide a naturally intuitive experience, similar to desktop applications. AJAX also provides more user-friendly product configurators and buying guides.

CSS2: The next generation of Cascading Style Sheets. CSS has been used to globally control design elements such as font types and spacing for an entire site. CSS2 enhances this ability to control characteristics across the site and can be used to change the position of elements on a page without accessing the page code.

Real Simple Syndication (RSS): Embraced by the blogging community and used by many to streamline and capture relevant news in retailing, RSS can be used to share content easily and just might be the next generation of opt-in e-mail.

Tagging: This expands the taxonomy that every site uses to describe the category hierarchy of products. For example, a retailer might assign a parka a taxonomy of Mens/Outerwear/Skiing/Parkas/Columbia Double Whammy. A shopper may see it differently—"great coat for thrashing in the powder at Aspen." Tagging is seen on sites like Flickr.com and YouTube.com, where users impose their own hierarchy on the information structure by placing tags or comments on a site. The results of community tagging can yield interesting design options.

Social Computing: User reviews let consumers read others` feedback about products as they make their own purchase decisions, as well as provide their own review. Their impact has grown along with the community commerce aspects of the web at sites like iTunes. Once limited to the site of origination or affiliation, they now are shared across networks at third-party sites.

Click Here for the Internet Retailer Guide to Providers of Web Site Design