Bob Steelhammer, Head of Ecommerce, Office Depot, joined the multichannel office supply retailer in January 2009 just as the team was beginning to redesign its website.

"Sales weren’t keeping pace, from an Internet perspective, with the rest of the industry," Steelhammer says. "The Web channel here at Office Depot had been known in the late 90s and early 2000s as one of the premier ecommerce sites."

Steelhammer and his team wanted to reclaim Office Depot’s reputation for cutting edge ecommerce features. They also wanted to focus the website more on its core products, such as paper and printer ink. Most importantly, the changes had to improve customer experience.

The team started researching the new site in October 2008 and launched in April 2009 -- a quick seven-month turnaround time for a major multichannel retailer. The site had no major problems at launch and is has since achieved the following results:
o 17% reduction in bounce rate
o 10% increase in conversions
o 18% drop in cart abandonment
o 2% increase in average order value

We asked Steelhammer to explain how his team used research to identify the most important changes, and how they were able to get the job done so quickly. Here are seven major tactics they followed to achieve a high-impact website overhaul:

Tactic #1. Build a strong partnership with IT

Every ecommerce marketer knows the importance of collaborating with the IT department to complete site work or launch promotions. Major website overhauls can take up to a year to design, build and polish.

Steelhammer did not want to wait a year. Shortly after arriving at Office Depot, he approached the IT department’s head of ecommerce development and expressed a need for total collaboration to get the new website off the ground as efficiently as possible.

"Literally, we met every day," Steelhammer says.

The teams discussed technical, usability and marketing issues, and planned how to best pool their resources to accomplish their goals.

Tactic #2. Research customer demographics and website behavior

The team conducted usability focus groups to uncover problematic areas of the website. They also surveyed about 3,000 visitors to gain more insights into the site’s audience.

After about a month of gathering data, here’s what they found:
o Only 5% were first time visitors -- 95% of people had visited the site before
o Ages ranged from mid-30s to early 50s
o The traffic was "heavily skewed" toward female visitors
o 70% had purchased from an Office Depot store previously
o 50% had purchased from the website previously
o 33% were office managers or administrators
o 33% were home users
o Over 40% were there to make a purchase

The team also logged customer complaints about several key elements of the existing site. The biggest reported problems:
o Navigation
o Clutter
o System for purchasing printer ink
o Search tool

- Prioritize fixes

The team took all of its research and identified the key changes that would address about 80% of customers’ issues, and would be most likely to increase revenue.

Tactic #3. Redesign the look and feel

The team completely overhauled the website’s color palette and design. The section of the homepage above the fold was created in a "Z" pattern, which follows the typical customer’s eye-path, Steelhammer says.

"When they look at a website, people typically read in a Z-shaped pattern starting from the top left."

-> Top of the "Z"

The top of the homepage serves as a navigation bar that stays with visitors as they browse the site. Here are its key elements:

- Store locator

The top left space, next to the store’s logo, features a store locator that uses a drop-down menu to accept the visitor’s zip code.

The team gave this tool a prominent position to emphasize that customers can shop online and fulfill their orders in a store if they wish, Steelhammer says.

- Shop by catalog

"Our regular customers love this because they can go and know their item numbers and they can open this window up and start a shopping list," Steelhammer says.

- Shopping cart

A box in the top navigation bar that shows visitors how many items they have in their shopping carts. (More on this box below)

- Product categories

Drop-down menus of categories such as ‘Office Supplies,’ ‘Technology,’ and ‘Furniture.’ These menus give visitors quick access to an array of products directly from the homepage.

- Search box

The team’s search tool is included in the consistent top navigation.

-> Middle of the ‘Z’

This portion of the page is dominated by a large image that cycles through four products and/or offers. The typical selections -- often basic supplies such as paper and ink -- are part of the website’s focus on core products.

-> Bottom on the ‘Z’

The bottom portion of the page, above the fold, is dominated by links to what Steelhammer calls "our eggs and milk; the basic things we sell: ink and paper, design, print and technology."

The team used drop-down menus for each product segment to reduce clutter on the homepage without skimping on content.

Tactic #4. Add a pervasive shopping cart

The team designed a shopping cart that stays with customers as they browse the website, displaying their selected items in the top navigation bar.

The tool also lets customers select whether they want their orders delivered, or available for pick up at a nearby store.

- If ‘Delivery’ is selected, shoppers complete their orders and receive their packages as usual.

- If ‘Pick-up’ is selected, shoppers enter their zip codes to find their nearest store. Then, as they add items to the cart, the system alerts them if they select a product which is not in-stock at the nearby store.

Shoppers do not have to enter their zip codes if they’re logged-in -- the site’s membership information is automatically loaded.

"Pervasive carts are not really a big deal," Steelhammer says. "But pervasive carts that are geo-targeted are pretty cool and they’re pretty leading edge as it relates to ecommerce."

Tactic #5. Add ink selection tool

Research uncovered significant problems with the previous website’s system for buying printer ink. Many customers complained of having to scroll through long lists of technical printer names and model numbers to find their printer.

The team conducted competitive analysis and designed a tool that addressed customer complaints:

- The tool first accepts the printer’s brand, then printer type, then model number. Each selection is made on a drop-down list that refines its results as selections are made.

- Once customers have identified the printer they wish to buy ink for, they can save those specifications under a name, such as "John’s office," to use again on future visits. The feature makes repeat purchases easier.

Tactic #6. Update search tool

The team also received complaints about the relevancy and flexibility of its search results. They responded with a complete search overhaul that added the following features:

- Refine results

After searching for a broad term such as "laptops," users can use a left-hand navigation bar to further refine their searches with a few clicks. They can limit their search to:
o Specific brands (multiple selections can be made)
o Price range
o Technical specifications such as memory, hard drive capacity, operating system and weight

- Display options

The team made a grid-view the default for all of its search results. Horizontal rows of four products are stacked on top of each other.

Shoppers can also click to view results in a list-view. When ‘list-view’ is selected, the system cookies shoppers so all their searches will be displayed this way.

Tactic #7. Shorten check-out process

The team’s previous check-out process had eight steps and required customers to enter about 80 different pieces of information.

The team reduced that to a simple, four-step process:
1. Login
2. Provide shipping information
3. Provide payment information
4. Review

The team also reduced the amount of required information to about 50 fields. They did this by:
o Eliminating repeat requests
o Auto-filling information already provided
o Allowing shoppers to use their shipping address as their billing address with one click

Useful links related to this article:

Creative Samples from Office Depot’s website redesign
http://www.marketingsherpa.com/cs/OfficeDepot/index.htm


BGT Partners: Helped redesign the website
http://www.bgtpartners.com/

Usability Sciences: Helped the team with usability tests
http://www.usabilitysciences.com/

Office Depot
http://officedepot.com/