February 1, 2012, 12:00 AM

The toughest design puzzle ever

Never has e-commerce design been trickier — or more rewarding when the pieces fall into place.

Lead Photo

E-commerce site design is going through an upheaval, driven by the stunning increase in web site traffic and sales coming from smartphones and tablet computers like Apple Inc.'s iPad.

In December, 11% of sales at 500 major e-commerce sites tracked by IBM Corp. came from mobile devices, double the 5.5% of December 2010. For some retailers, the numbers are even more dramatic. Bakeware and baking ingredient e-retailer King Arthur Flour, for example, saw web traffic from mobile devices jump from 5% in December 2010 to more than 19% in December 2011.

Suddenly, every web retailer has to consider how its site will look on a 4-inch smartphone screen, a 9.7-inch iPad and desktop monitors of 25 inches and more. They also have to learn the intricacies of such mobile operating systems as Android, Apple iOS and Windows Phone 7.

And they can't dawdle. Not when 43% of U.S. mobile phone users already own a web-enabled smartphone and more than half (58%) of all new phones sold are smartphones, per the Nielsen Co., and upward of 20 million consumers unwrapped iPads and Kindle Fire tablets on Christmas morning, according to investment analysts.

With e-commerce sales growing 15% over the recent holiday season, according to comScore Inc., far outpacing the National Retail Federation's 4.1% estimate for total retail sales, web retailers know they have no choice but to keep up with the mobile-driven revolution in site design.

"This is one of the most exciting times in e-commerce design since the beginning," says Craig Shields, vice president of e-commerce at TV and web retailer Jewelry Television, where purchases made from mobile devices now account for 9% of sales. "But at the same time, when you look at the broad proliferation of devices and form factors, it's also never been this complicated."

Retailers are responding in a variety of ways. Some are building sites and mobile apps designed for each of the major types of devices consumers use to access the Internet, in some cases upgrading their e-commerce technology so they can manage multiple sites. But others are taking a bigger leap, designing pages for mobile devices first, and adapting the display to the device the visitor is using. The learning curve can be steep, but at least one e-retailer found that once at the top it's downhill sledding to extend this approach to more sections of its retail site.

'Why are they doing this?'

Whatever the strategy, retailers say there's a lot of experimenting and learning going on—including, it seems, by consumers who are still learning how to navigate web sites on their iPads and smartphones.

Teen and young adult apparel company Abercrombie & Fitch Co., for example, has been puzzled by consumers' behavior since it launched dedicated mobile sites for Abercrombie.com and Hollister.com in November. Consumers who access either site via a smartphone are automatically routed to the associated mobile site, yet 15% of those shoppers manually click a "view full site" link at the bottom of the screen to visit the traditional desktop site, which is more difficult to navigate on a phone's small screen, says Lauren Morr, head of online operations. "Right now we don't know why they're doing that," Morr says. "Something is not getting satisfied on those devices."

The retailer is working to add features, like search, to the mobile site that may improve usability. It is also combing through its data to evaluate which features from the desktop site should be translated for mobile users, and how. "We've been studying our analytics like crazy to see where we are meeting expectations and where we need to grow to increase mobile conversions," Morr says. The retailer is having better luck with consumers shopping via the iPad. Those shoppers see a version of the desktop site modified for touchscreen navigation, and tablet users convert at a rate in line with desktop users, Morr says.

JTV.com has a mobile web site that optimizes for iPhone, Android, Windows Phone 7 and BlackBerry users, plus apps for iPhone and Android phones. Two years ago, it had none of these, Shields says.

In order to be able to support a mobile site and apps, JTV moved off its home-grown e-commerce platform to technology from Demandware Inc. that can feed product information and images to multiple web sites and mobile apps. Using Demandware's content management system, for example, means that when JTV needs to change a promotion or add a new product it makes that change once and the platform makes the change across all JTV's web sites and apps. "Before we migrated to Demandware, we were perpetually behind on e-commerce best practices because we didn't have the resources or time to keep up," Shields says. "Now the same team has been able to get on top of the trends and stay on top of the curve, if not a little ahead."

Responsive design

Like JTV, King Arthur Flour found itself with an e-commerce platform built and maintained in-house as it confronted the mobile revolution. The thought of having to build and maintain multiple sites or apps was daunting. "It would have been a nightmare," says Halley Silver, director of online services.

Silver went searching for a design solution that would accommodate customers' future needs without exceeding King Arthur Flour's current resources. At conferences she came across two design approaches that the retailer combined to create much of what is seen on KingArthurFlour.com today. The first was to design for mobile users first and let those designs lead changes to desktop design. The second was to apply principles of responsive web design, an approach in which a master design can be reflowed and optimized according to the device accessing the site.

King Arthur Flour first applied the concepts to the recipe portion of KingArthurFlour.com—where most of the mobile traffic was going—in August and later redesigned the home page and some smaller sections, such as the Contact and About Us pages, to match. Silver says it will apply the design approach to the e-retail store and rest of the site this year.

comments powered by Disqus




From The IR Blog


Terri Mock / E-Commerce

How online jewelers fared this Valentine’s Day

The key takeaway: Start early, because sales tail off in the last few days before ...


Cynthia Price / E-Commerce

4 tips for improving email marketing results

Every piece of data you collect can help you serve your audience exactly what they ...