Success stories abound at industry conferences. But failures can be instructive, too, as attendees learned at the Internet Retailer Web Design & Usability 2011 Conference in Orlando in February.
Consider web design consultant Ethan Giffin who related how earlier in his career he thought it would be cool to put edgy comedian Richard Lewis on a promotional landing page. The page flopped, leading Giffin, now president of design firm Groove Commerce, to draw two conclusions:
"Don't put a cynical old man on a landing page. And it's the lessons you learn that matter most."
With that philosophy in mind, here are 10 lessons in site design and usability drawn from case studies online retailers presented at the Internet Retailer Web Design & Usability 2011 Conference.
One step at a time
Timothy Peterson knew there was a lot of work to do when he joined NutraOrigin in late 2009 as vice president of marketing. The web retailer of vitamins and supplements was attracting fewer than 100 visitors a day and the conversion rate was a woeful 0.25%.
"We needed a complete overhaul, but we had limited funds," Peterson explained at the design conference.
Rather than try to fix everything at once, Peterson worked with web design firm Tellus LLC on a phased redesign of NutraOrigin.com. "For us, it was trying to figure out what can we spend now, what we spend soon, and what can we spend later," he said.
Peterson focused initially on "continuity" customers, shoppers who subscribe to receive regular deliveries of vitamins and supplements, particularly the popular Omega-3 fatty acids that studies link to health benefits. Attracting those regular orders meant making the site easier to shop and adding confidence-building elements, and those became the phase one goals. The site's home page now features four tabs across the top labeled: "Why Omega?" "Why NutraOrigin?" "Our Community" and "Customer Care." Left-side navigation highlights popular products.
The redesigned site now attracts more than 1,000 visitors a day, 10 times the previous traffic, and 2.4% convert. With phase one complete, Peterson plans to add more products and a wholesale section of the site.
Besides limiting the phase one cost, focusing on limited goals also leads to more modest—and realizable—growth projections, pointed out co-presenter Betsy Emery, CEO of Tellus. However, a retailer should have a vision of where it's going with its redesign, Emery added, so that elements built into phase one don't have to be discarded later on.
Cater to your customers
When Footsmart.com's e-commerce team began discussing a redesign of its 5-year-old product detail page last year, they noted that competing online shoe retailers had added features like multiple views of each shoe and zoom. But rather than just assuming its customers wanted those features, Footsmart tested them with shoppers in its target demographic: adults 45 to 65.
The e-retailer, part of Benchmark Brands Inc., found a lot of the high-tech features of competing sites were of little interest to Footsmart customers, explained Sarah Payne, senior manager of user experience and analytics. "Things like zooming weren't as important," Payne said. "A lot of younger users would be interested, but for older consumers there's not so much value in it."
Those older consumers were interested in customer reviews, but the way they were presented on Footsmart.com led some visitors to believe the reviews came from the e-retailer. Footsmart redesigned its product page to move up reviews, and to make clear they came from consumers. The e-retailer also enlarged the color blocks shoppers use to select shoe color, and added white space between the blocks to make selecting the right color easier. It also added more product information, as research showed older consumers wanted it.
The result: a 19% increase in conversions on the product page. "It was huge," Payne said. "We were not expecting such a large lift from small changes."
Label products so shoppers can find them
The Little Tikes Co. manufactures toys, from adjustable basketball hoops for young athletes to bath toys for babies. When labeling the toys for children under the age of one it used the industry term "infant toys," which meant those items didn't come up when consumers searched for "baby toys," as they often do. Nor did the manufacturer take into account that some consumers searching for an inflatable trampoline and slide would call it a "bouncy house," and others a "bounce house."
Because it wasn't labeling items in its back-end product database with all the terms consumers use, shoppers were having a hard time finding the toys they wanted on LittleTikes.com, said David Jones, e-commerce infrastructure architect. "We really had to step back and look at our site's data organization," he said. "We had to structure our data to be available in the way a mom or grandmother would search."
Adding all the terms consumers were using as they searched for toys has helped the manufacturer provide better search results on its site, Jones said.
Follow basic design principles
Effective use of color, type fonts and photography can make a web site pleasing to the eye. More importantly, effective use of those design elements can increase sales, explained Sari Levine, creative and user experience director at home improvement retailer Lowe's Cos. Inc., and co-presenter Josh Levine, co-founder and chief creative and experience officer at web design firm Alexander Interactive.
Over the past 18 months, Sari Levine said, Lowes.com has paid closer attention to using consistent type fonts to tie together key areas of a web page, and employing photos with text to explain page content.
The site uses different colors behind the central images of its home page to appeal to different customer segments. For instance, she showed one home page with a rich blue background, and a fancy script font, that promoted holiday gifts, and another with a red background and a more straightforward typeface for an appliance sale.