Print to Web Series: Product Catalogs Go Digital

Editor’s note: This is part of an ongoing series that explores the relationships and similarities between traditional print design and web design. For more inspiration, check out these other articles on the subject:

Who says print design is dying? Judging by the constant flow of product catalogs that hit our mailboxes, I beg to differ. For some, these are a welcome sight; for others, an obnoxious nuisance. From a marketing perspective, there’s nothing like putting a product catalog in front of people; it lets you guide their attention, giving them key products to focus on that will hopefully draw them to your (bricks-and-mortar or online) store and entice them to buy.

If you are still finding your footing in the interactive design world, Patrick McNeil will be at HOW Design Live helping conference attendees create their own career roadmap from Print designer to Interactive designer. Visit HOW Design Live for more information.

So, how does this mailbox spam translate to the web? At a basic level, a product catalog is a guide to a retail store. It highlights key items, shows products in context (like an outfit or a room setting) and allows customers to scan the offerings. This sort of approach is difficult in the online world. When customers land on the homepage for a large retailer, they have to choose product categories and then see tens or hundreds of items in a grid. So it makes sense that retailers would translate the “guided tour” experience that a print catalog offers customers to the web. In fact, retailers are increasingly moving in this direction.

The Simple Digital Catalog

Before we look at some more advanced versions, let’s begin with what might be called an entry-level approach to digitizing a product catalog. Retailers have long been set up to produce printed catalogs, so it’s no surprise that the first stage of this print-to-web transition is a literal one. Here’s an online version of the exact product catalog that Target might send us in the mail.

Target weekly ad online version

Mass retailers have been doing this for years now. The interface often includes fancy page-turning effects that reinforce the idea that you’re viewing what you’d expect to see in your mailbox.

The Catalog Microsite

It’s amazing how long it took for retailers to start to rethink their approach to digital catalogs. Perhaps the direct print>web translation was working, so no one felt the pressure to push forward. But we’re starting to find some real momentum toward innovation in digital catalogs. In fact, Target leads the way. We web folks aren’t the only ones madly obsessed with one-page websites; here we see a mini site Target created to support its wedding registry business.

Target wedding catalog online microsite

What we have here is a huge stack of content spreads that mimic the print catalog, but with some key interactive magic. Since the content and layout have been translated into web-native content ( HTML, CSS and JavaScript) the print pages can be brought to life in fairly easy ways. A good, old-fashioned animated GIF near the top of the homepage instructs visitors on how the Favorites feature works. Other simple features include in-page scrolling, sliders, image hotspots, hover states, color/pattern selectors, pop ups and more. The page isn’t extraordinarily progressive, except that it takes something old and modernizes it. Don’t get me wrong, the page is an amazing leap forward, and I hope we see more digital catalogs like it. Interfaces like this are extremely powerful. Instead of having to browse a never-ending list of products, users can quickly scan a curated (and this word is critically important) offering and find real gift ideas.

If I had to speculate on what the future might hold, I’ll guess that we’ll be seeing more microsites like this, where products have been carefully selected to go together. Combine this with targeted marketing, and retailers can send customers to not just landing pages, but to purposefully crafted catalogs that drive their purchasing. Even better, why not craft these sort of pages on the fly based on prior shopping patterns? Amazon already has a powerful suggestion engine—imagine if they transformed this into a personalized shopping catalog of stuff you’ll love.

A few more examples of this important print-to-web translation: Target has developed a number of these catalog microsites on various themes including a baby catalog (baby products, not actual babies), toys (including some awesome animations) and home decoration. Clearly, Target has a system in place that facilitates the production of pages in this style. Here’s hoping their 2013 product catalogs continue to push this approach.

Target home catalog online microsite

Digital Catalogs in Fashion

I’m not surprised to see Tommy Hilfiger as a brand following suit on this digital catalog trend. This example of a fashion brand’s online catalog detaches itself from the idea of page spreads even better then the Target microsites. All of the content is interwoven to the elements before and after it. This has the interesting effect of making you want to keep moving through the content. You will also notice a large usage of fancy in-page scrolling effects (aka, parallax).

Tommy Hilfiger online fashion catalog

Some brands are taking this concept and applying it to their entire brand, eliminating the traditional multipage website with boring grids of products. For example, Valentina Gallo, a women’s shoe brand, has an amazing demonstration of this. What I love about this site is that it elevates the shoes to works of art (I’m sure the price tag matches). Instead of pulling out a grid of images and then linking to About Us pages that give the backstory, they make the entire package one huge awesome sales pitch. I can’t visit this page and help but think that these must be some kick-ass shoes.

Valentina Gallo shoe retailer online catalog

For comparison, consider the Hush Puppies website. Granted, they play in an entirely different market. And to be fair, their site is quite well-produced. But the user experience is radically different. Here, you feel less catered to. The message is, “Here’s what we have, look around and hopefully you’ll buy something.”

Hushpuppies website homepage

Finally, here’s another digital catalog example that puts the idea of a printed catalog on the chopping block. Trunk Club is a clothing retailer that doesn’t have a printed catalog. With this service, you give them details about you, the type of clothing you like, the styles you prefer and so on. They hand-select a range of items, package them up in a trunk and ship them to you. You try them on, keep what you want and send the rest back.

Now, I can’t imagine that Target will ship me a range of coffee makers to choose from and I’ll send the extras back. But this extremely customized approach brings a tremendous value to the client. In the case of Trunk Club, it helps men be fashionable (something many of us struggle with). It overcomes the hurdle of shopping online in that you get to actually try the stuff on. Another key point, it supports laziness—after all, why not just let some fashion guru choose a wardrobe so you don’t have to think?

Trunk Club Men's Outfitters website homepage

I love to observe how traditional print assets are translated in a digital world. In the case of product catalogs, I think we’re going to see a lot of rapid change. Considering the explosion of tablets, it only makes sense to make interactive, smart catalogs that can be tested and optimized to increase sales. But don’t expect those print catalogs to stop filling your mailbox any time soon.

More resources for print designers transitioning to web design