trope design

portfolio for steve kuhn

Office Depot

thumbnail of office depot    thumbnail of office depot

Summary: A redesign of the Business-to-Consumer e-commerce site for office supplies giant Office Depot. ATG Design was selected to redesign the look-and-feel of the site to accommodate new corporate branding concerns, download requirements, and ease of use. ATG was also contracted to design early personalization functionality for the site.

Problem context: At the end of 1999, Office Depot had a nominally successful, two-year-old e-commerce site for its small-business consumers. However, users complained that the site had usability difficulties, as well as stability problems. Office Depot's concerns with the extant site were much the same. Office Depot technical personnel also wanted a site that would scale more effectively. Additionally, Office Depot was on course to re-brand itself as a products and services company, and wanted a Web site which would emphasize this fact while offering prominent access to both areas. Finally, OD was also beginning to look at increased personalization for their e-commerce site as a way to retain business and begin turning the site into a small-business portal with a range of functionality.

Project goal: Redesign the Office Depot.com site to be easier to use and to download faster. Also, incorporate an entirely new Business Services section. Develop basic personalization for users coming from strategic affiliate sites.

Target audience: Small business office products and services purchasers.

My role: Led the creative team which identified and specified business and user requirements; led development of all functionality, UI design and visual design; authored feature specification quantifying functionality; managed creation of all media and HTML for final client implementation; led two rounds of formal user testing on developing interface.

View screen shots:

Homepage
The homepage needed to strongly express the OD brand, as well as establish navigation, show the depth of the catalog, show the new business services offerings, and show special offers, all above the fold.

AOL co-branded homepage
Office Depot was building several business alliances, and needed the ability to easily co-brand the homepage. This shows co-branding with the AOL logo.

bCentral co-brand (in frames)
For certain alliances, Office Depot wanted to ensure that the site could exist within a framed environment. This shows the site sandwiched by the bCentral co-brand.

Catalog home
We took special care to show the depth of the catalog above the fold, allowing for easier navigation and also communicating the thoroughness of Office Depot's offerings.

Catalog hierarchy w. images
Office Depot remarked about how important it was to show product pictures. Their previous site had only shown product images on product pages; we suggested they move images as high up in the catalog hierarchy as possible.

Multiple product page
For pages where multiple products are displayed, we designed the ability to either link to a single product page to view full details, or to add product to the cart or to lists from here.

Single product page
A clean presentation of product details and the ability to add to cart or list, as well as easy linking to related products.

Order by catalog number
We designed a way for power users to mark up their Office Depot catalogs and then enter product numbers to retrieve multiple products quickly.

Shopping cart
A clean, easy-to-navigate shopping cart.

Review order
Always a tricky page in an e-commerce site, because of the amount of information that must be related to the user before they hit the "confirm order" button. This gets a lot done in a little space.

Small Business Handbook
Office Depot also had a great deal of business-oriented content on the site. We developed an easy table of contents interface which allowed for the presentation of a good deal of information while still saving space for cross-sell on the right.