Baking enthusiasts frequently visit KingArthur Flour.com to find recipes. but what they want to see can vary based on what they’re doing.
The shopper viewing a recipe on her smartphone as she shops for groceries wants to see the list of ingredients, and that’s what she’ll see when accessing KingArthurFlour.com on her phone. but when she sets up her iPad in her kitchen to bake the cake or trifle, she doesn’t want to touch the tablet with her flour-covered hands—and so KingArthurFlour.com shows the directions and the ingredients side by side.
The manufacturer and e-retailer of baking products can adjust the look of its site based on the device because it’s carried out a major redesign of its site that gives it that flexibility. Rather than designing a conventional e-commerce site for computers, another for mobile phones, specialized apps for iPhones, Android phones and BlackBerrys, and maybe a site or app for iPads, King Arthur Flour Co. inc. now has one set of code—and adapts the presentation to the device the visitor is using.
That approach is called responsive design, and it’s relatively new. but what makes King Arthur Flour’s approach radical is that, instead of starting with the PC site and narrowing the presentation for smaller screens, King Arthur Flour began with the smallest device—the mobile phone—and built up from there.
The resulting home page looks clean and uncluttered on the larger screen of a computer, Halley Silver, director of online services at King Arthur Flour, explained in a featured address at the Internet Retailer Web Design & Usability Conference 2012, which took place in February in Orlando, Fla. but more important, she said, is that the site looks great to the consumers visiting via smartphones and tablets, which now account for 22% of the site’s traffic, up from 6% a year earlier.
“Mobile is exploding,” Silver said. “We’re skating to where the puck is going.”
The ice hockey metaphor is especially apt for a retailer based in Vermont, but the idea of adapting e-commerce sites to meet the needs of the customer pervaded the conference, which drew 917 attendees, up from 889 last year. Fifty-one companies exhibited at the show, compared with 45 in 2011.
While Silver and a few other retailers presented accounts of major web site overhauls, more speakers described recent examples of relatively minor tweaks, often made at low cost, that produced significant results. but practically every speaker emphasized that a retailer should seek to understand what each visitor is trying to accomplish based on how she navigates the site, what she’s done on the site before and how she arrived on the site—and tailor the site to her needs.
“Give the lady what she wants,” said Lauren Freedman, president of e-retail research firm The E-tailing Group inc., repeating the mantra drilled into her when she worked years ago at Chicago department store Marshall Field’s, which has since been converted to Macy’s. on the web, where every click can be tracked and analyzed, it’s often possible to discern what a shopper wants, and IRWD speakers explained novel ways to understand those needs—and meet them.
That’s not to say the new methods come without a cost, as Silver explained. Coding the new site took quite a while, she said, about two months for a half-dozen page templates.
And the responsive design approach adds to page weight, which can slow page load times. That’s because the coding for each page contains all its elements—images, descriptions, reviews—even if they’re not all presented, for example, to a smartphone user. but with the spread of Wi-Fi networks that offer fast connections and mobile phone networks ratcheting up their speeds, Silver said, performance of sites designed this way should steadily improve.
Another example of an e-commerce site that’s been redesigned to very specifically meet the needs of its customers is WWGrainger.com, the site of W. W. Grainger inc., which sells maintenance supplies, spare parts and tools, mainly to businesses and government agencies.
Paul Miller, vice president of U.S. e-commerce at Grainger and the keynote speaker at the IRWD conference, explained that before redesigning the site the company closely examined what customers were trying to accomplish on the site. The aim of the redesign, he said, was to answer this question: “How do you make it so they can find it, buy it and move on?”
Grainger determined that its two main customers were purchasing agents and contractors or maintenance managers in the field. For purchasing agents, Grainger.com now makes it easy to see the status of current orders and to view what they ordered in the past for fast reordering. meanwhile, a worker on a job site can enter a ZIP code and quickly determine whether a part is in stock at a nearby Grainger facility, and when he can pick it up.
“Start by observing what you see on your site,” Miller advised. “Meet with customers. by listening and observing you can get a good sense of what they’re trying to do and design around it.”
For e-retailer Threadless.com it was success that forced it to embark on a major redesign of its e-commerce site, explained CEO Thomas Ryan in the keynote presentation on Feb. 15. since launching its site 11 years ago, 1.8 million consumers from more than 150 countries have registered with the site so they could submit and vote on T-shirt designs. Threadless has received 375,000 submissions and turned 3,300 of those designs into T-shirts that shoppers can buy on Threadless.com.
That response has led Threadless to make two big changes to its business model. First, it is now printing the most popular designs on products besides T-shirts, such as wallets, backpacks and totes. Second, it’s working with other companies, including The Walt Disney Co. and Dell inc., to develop community-based designs for their products.
500 Online Sales: Growth: see More 500 Online Sales: Growth: see More 300 Online Sales: Growth: see More 400 Online Sales: Growth: see More