Retailers architect new ways to design features and functions that deliver improved business results
By Mark Brohan
With a new treatment or a major feature going live every three weeks, there’s no room for complacency in VistaPrint Ltd.’s approach to web site design. Instead of speculating over how visitors might respond to a new application, VistaPrint, an online retailer of custom printing products, uses step-by-step planning and rigorous testing to design web pages that meet customer expectations and generate more business.
When VistaPrint recently updated its design gallery of templates that customers use to create personalized business cards and stationery, designers and marketing managers analyzed thousands of transactions and visitor sessions. VistaPrint then used the new analysis to design and launch a new gallery that has since helped the company acquire 4.5 million more customers overall and nearly double daily orders to about 33,000.
“We don’t guess at what our customers want out of a new design,” says VistaPrint senior director of user experience Jeff Prus. “We study their behavior and then design and test a new treatment that’s going to meet their expectations and ours.”
Other online retailers are emulating VistaPrint’s focused, no-nonsense approach to web site redesign and usability, including ActionEnvelope.com, QVC Inc., and Fat Brain Toys. In the early days of web retailing, a flashy design that showcased a merchant’s brand may have been enough to pique an online shopper’s interest. But these days, as web merchants of all sizes deal with the bad economy and a sharp drop in consumer spending, more retailers are looking harder at their design plans and figuring out better ways to drive traffic and generate sales.
To improve their designs, merchants are sifting through myriad information, including traffic logs, web analytics reports, customer service tapes, surveys and other data that help them better understand web site traffic patterns and buyer behavior. Retailers are then using the data to create effective designs that make it interesting and easier for customers to shop and complete their online purchase.
“A great design starts with a thorough understanding of what the customer wants, and the retailers that focus on the end user will be the ones getting the most new and repeat business,” says Eric Cantini, creative and customer experience practice partner at Rosetta, a retail web site design and strategic planning firm. “The design has to be visually compelling to draw shoppers in, but the real task a retailer has to accomplish is creating pages and tools that motivate a buyer to make an informed and easy purchase.”
Drill down
Prior to rolling out its updated design gallery, VistaPrint analyzed nine sets of customer metrics and then created a multi-point plan to create and test the new treatment. Customers found the old gallery with its limited selection and outdated navigation hard to use. To create a better design, VistaPrint designers and programmers used their customer analysis to create forms that reduced by 50% the time it took for a customer to complete a design and submit the order online.
VistaPrint also added 400 new product templates, dozens of different categories and an updated tool bar. In several rounds of focus group testing at VistaPrint’s internal usability laboratory, users liked the overall design, but wanted easier navigation. VistaPrint improved the final design by adding new ways for visitors to search for templates such as by industry, category and other criteria. VistaPrint also made the tool bar the most prominent element at the top of each gallery page.
“The original design was organized in a way that gave users quick access to all of the new templates we were adding, but the functionality on the page was hidden and it took users too long to complete a transaction,” says Prus. “What customers really wanted was fast access to the advanced editing tools and quick order submission. Once we added and tested those elements, we knew the updated design gallery was going to perform well.”
VistaPrint knows the value of detailed planning and breaks down its design projects into five phases: customer analysis, page design, usability testing, page rollout and user follow-up. Having a comprehensive design plan enables a retailer to set specific goals and objectives. A comprehensive plan also provides an online merchant with an opportunity to create a working document for designers, programmers and business managers that spells out specific details, such as technology and marketing budgets, performance objectives, technical requirements and new business expectations.
“Planning out a web site design or redesign can’t be done haphazardly, especially in this online retailing environment where everyone’s fighting to stay competitive and bring in business,” says Cantini. “A formal document that spells out what’s going to happen and when, and then measures the outcome is a road map a merchant can use to complete the project from beginning to end.”
ActionEnvelope.com, an online retailer of custom envelopes, relied heavily on precise planning to redesign its web site. Even though Action Envelope routinely updates its web site every two years, the company worked closely with Alexander Interactive Inc., its current design firm, to write out a comprehensive blueprint before embarking on a much more complex redesign.
For the latest generation of the Action Envelope site, which went live in January 2008, the top design priorities were easier navigation and better customization. Action Envelope sells multiple styles of envelopes that come in nearly 100 colors and in a variety of shapes, weights and seals. But the old site made it too complicated for busy consumers and small business owners to sift through a multitude of combinations and then customize an envelope with their individual logo and trademark colors.
Spell it out
To create a better web site, Action Envelope and Alexander Interactive first drafted story boards and designed page layouts that emphasized a cleaner look and improved navigation. They next created a project timeline and planning document that laid out deadlines, technical requirements, performance objectives and new business goals. “We looked at the overall navigation on the web site, the main categories and how they could be simplified,” says Action Envelope chief operating officer Seth Newman. “The blueprint kept us focused on what we needed to do and when.”
With its plan in place, Action Envelope redesigned its web site and added custom design tools and more rich media. The updated ActionEnvelope.com now has one tab for paper and another for envelopes across the top navigation bar, which helps to keep the home page design clean. When a visitor’s mouse hovers over the envelopes category a pop-up box appears that offers a variety of options, including business and social envelopes, shipping and packaging products, and most popular items. Within the same box, visitors can choose to shop by color, collection, style and use, or to select such services as express printing, high-volume direct mail envelopes, or custom envelopes.
Another tab on the top navigation bar called My Account lets a returning customer log in, see his previous five orders and click on a reorder button that takes him directly to the shopping cart. Several rounds of testing confirmed what consumers and small businesses wanted most: a fast and sophisticated process to order envelopes. “People don’t want to spend their entire day reordering envelopes. They want to order the envelopes and move on,” Newman says. “We’re trying to help them do that.”
For some customers, color is the key if they’re shopping for envelopes such as for a wedding with a distinctive color scheme. A new shop-by-color option above the fold on Action Envelope’s home page lets a customer move a slider to choose the color she wants, with the full spectrum of envelope colors moving horizontally across the page as the visitor drags the slider with her mouse. When the customer chooses a particular hue, such as bright orange, the page shows thumbnails of all 18 envelopes that Action Envelope sells in that color.
The color selector, which was built using Ajax, or asynchronous JavaScript and XML, is an example of how the new Action Envelope web site makes use of recent advances in web design technology, says Alex Schmelkin, president of Alexander Interactive, which has worked with Action Envelope on its last two site redesigns.
When Action Envelope was last redesigning its site in 2004, he says, horizontal sliders were cumbersome and hard to use. But the new slider moves as easily as if the consumer were pushing it with her finger. “We love this way of doing it,” Schmelkin says. “People understand rainbows and it’s a very easy visual metaphor to let people scroll across different colors, stopping on the one they like, clicking on it and seeing the complementary colors around it.”
Big expense
The latest redesign took Action Envelope 15 months and about $200,000 to complete. It is paying off in more business, Newman says. In the first month after the revised ActionEnvelope.com went live, envelope sales doubled to about $1 million and the conversion rate on some envelope styles improved by over 40%. “We knew how customers wanted to use our site and we knew what we had to do to meet those expectations,” says Newman. “Having a formal working document helped us to meet some tight deadlines and stay within our budget.”
Redesigning a web site can be expensive. A big chain retailer can easily spend more than $1 million and take up to 18 months to complete a redesign that includes multiple new page treatments, universal style sheets, and sophisticated features and functions. Even a smaller merchant that uses an outside design firm to revamp an e-commerce site can expect the process to last several months and range in cost from $50,000 to $200,000. To save time and money, some retailers are opting not to make over every aspect of their web sites.
Instead, they are being selective and choosing only the new programs they believe will generate the most new business, such as a new site search program, product videos or customer ratings and reviews. Once the new application is in place, retailers are also conducting more A/B testing, in which a merchant shows a group of shoppers a pair of alternative web pages or two versions of an advanced feature and then asks them to express their likes and dislikes about each, to ensure the new design or program is meeting expectations. “Retailers don’t need to retool every aspect of their web site every two years,” says Dan Kurani, CEO of retail web site design firm Kurani Interactive. “To generate the most new business, they need to cherry pick only the best treatments or features they think will drive the most traffic and sales.”
Specific focus
When QVC recently updated its e-commerce site with a slew of new page treatments and features, the TV and web retailer stopped short of a complete redesign. Instead, QVC focused on adding features and functions that gave customers new ways to interact with QVC.com and each other. A new mobile commerce site, m.QVC.com, which allows users to shop and complete an order using text messaging, made it easier for customers to shop online with their cell phones.
QVC tested and then rolled out the first wave of design changes in early 2008 and introduced others throughout the summer. The new home page for the retooled QVC.com shows large graphics, which depict a deal of the day and upcoming shows and sales. To promote a deeper sense of community, QVC.com was also updated with customer reviews, interactive polls, blogs, live chats with QVC hosts and celebrities, and moderated forums.
QVC conducted several rounds of A/B tests to refine where to place the new features on product pages, and customers liked the end result. Since the new design went live, QVC has added 41,000 new community members which altogether have generated more than 200 million page views. “We don’t do full-scale site redesigns anymore,” says QVC senior vice president of platforms and broadcast technology Bob Myers. “We tested and launched only the new features and functions our customers told us they most wanted.”
Key aspects of the recent redesign are better use of video and more customer reviews. Whereas the old site featured video viewers on product pages, the new site’s home page provides buttons in a prominent window that allow visitors to access a variety of videos, including what’s on the air at the moment, today’s specials and best sellers. The current video player is twice the size of the previous player and provides a crisper picture. Video also is available on more pages, such as the program guide.
Since launching a customer reviews program from Bazaarvoice, QVC has also posted about 700,000 reviews. “We’re generating about 1,200 reviews each day,” Myers says.
A more focused approach to web site design is helping QVC deal with a challenging retailing environment. In the third quarter ended Sept. 30, 2008, total sales for QVC had decreased by 2.4% to $1.64 billion from $1.68 billion in the third quarter of 2007. The company also began laying off 700 employees and closing down a major fulfillment and customer service center in West Chester, Pa.
But the new community and features and better use of video are helping to drive web sales higher. Also in the third quarter, U.S. web sales rose year-over-year by 4.5% to $257.5 million from $246.5 million in the prior year. Monthly sales attributed to the new video player also have risen by 56%. “We don’t think about trying to reinvent our site design every other year,” says Myers. “We are adding on the features and functions we think will help us to grow our e-commerce business and develop a multi-channel brand that ties our TV and web channels even closer together.”
Moving ahead
Despite the recent economic downturn, retailers, especially smaller merchants with limited time and resources, as of now aren’t cutting back on their design plans. A recent Internet Retailer survey of about 100 merchants finds that 49.9% of retailers have rolled out a new design in the past year, including 26.6% in the last six months and 13.3% within 90 days.
But to save money and expedite the process, some retailers are creating simple designs that effectively take advantage of their existing infrastructure. When Fat Brain Toys, a small family-owned niche retailer of learning toys and related merchandise, redesigned its web site in May, the entire process took six weeks to complete and cost less than $25,000.
And the changes were more than just cosmetic touchups for the home and product pages. Fat Brain, which carries an online inventory of 5,000 SKUs, made significant upgrades to its site search, added more categories and dramatically improved navigation. Visitors wanted better ways to search for learning toys by age and sex, so Fat Brain added a new section on the home page that breaks down toys separately for boys and girls and by age. Fat Brain also added more guided navigation and developed a new site taxonomy and information database that reclassified all products into 30 categories such as active play and games. As a result of better site search, which is a combination of Fat Brain’s updated internal products database and search technology from Google Inc., the time it takes shoppers to start and complete a query has improved by 50%.
Making do
Fat Brain’s retooled web site design now features live chat and customer reviews. The home page has been updated with clearer images, a top-of-the-page navigation bar that lets visitors shop by age, what’s new and other categories, and a gifts wizard that asks visitors five questions to help them locate the right item for an upcoming birthday, holiday or special event.
Fat Brain didn’t redesign its web site unilaterally. Instead, the retailer relied extensively on customer feedback to bring about the new look and treatments. “Some web sites get caught up in building a Mercedes when a Kia will do just fine,” says Fat Brain co-founder and CEO Mark Carson. “We did the work in-house and made do with the resources we had on hand.”
Fat Brain didn’t conduct extensive A/B or multivariate testing to achieve the final design. But almost a decade of monitoring calls and e-mails to its in-house customer service center gave Carson plenty of user feedback to draw on. “We were hands-on with the design and putting in place only the most important elements our customers wanted,” says Carson. “We don’t operate in a black box. If users didn’t like the new site search or home page, they would quickly let us know.”
By using only its in-house staff of three developers and programmers to redesign the site, Fat Brain saved money on the cost of the project. Customers also are responding to the new look. The redesigned site has helped Fat Brain increase its sales conversion rate from 2.1% to 2.5%. Fat Brain expects web sales to reach $13 million in 2008, up by almost 40% from e-commerce sales of $9.3 million in 2007. “We didn’t take forever and a day to complete this redesign,” says Carson. “We got to the heart of what our customers wanted and we completed the project within our available budget and resources.”
Getting projects done efficiently and in ways that drive more business is now the new operating standard for retail web site design, says Betsy Emery, CEO of retail web site design firm Tellus. “All of the retailers we are working with these days are doing their redesign with a keen eye toward how this new look will improve the bottom line,” says Emery. “Even if it’s just remaking the home page or building in new functionality, they want that design to generate more business. Retailers are looking at design in a whole new light and that new attitude is going to stick.”
At VistaPrint, which grew its web sales by almost 60% in fiscal 2008 to $400.7 million, the updated design gallery is only one example of the business-like approach the company takes to redesigning its web site. VistaPrint is keeping its full-time staff of 16 designers, usability analysts and software engineers busy with a full slate of designing and launching more self-service features, including templates and services that customers and small businesses can use to create their own web sites. “We get constant feedback from more than 15 million customers who’ve already used VistaPrint.com,” says Prus. “They tell us what they want and then we design, build and test it. A good design that works well and delivers results is a big part of how we do business.”
mark@verticalwebmedia.com
Click Here for the Web Design Products & Services Guide
