A beautiful, cohesive and web-optimized digital catalog seems to be the unicorn of the Internet, even today. Many of the hottest fashion brands have an immersive online presence, until you start browsing their lookbooks. Converting a print piece onto the web takes a little finessing, so we’ve aggregated a few best practices and examples of fashion brands that we feel did digital cataloging right. Here are a few samples of online catalogs that are both easy to digest and maintain a strong brand essence. Not to mention, they’re just plain beautiful.
Sleek and well paced, GUESS Watches featured an engaging and immersive lookbook. On the desktop, shoppers were greeted by a fully animated experience. The thumbnail navigation allowed for quick browsing while a subtle parallax really brought the product lines to life. Each page had a unique layout with an expandable slide-up menu that revealed product details and purchasing options for non-disruptive shopping. Peppered throughout were short showcase videos as well as playful lifestyle videos that hold true to the brand essence. Because responsive design and HTML5 were still young when this digital catalog was launched, the lookbook was powered by Flash and packed with rich media so a complimentary context-specific dedicated mobile experience was rolled out simultaneously. It leveraged some lovely extras like geolocation detection for an easy-to-use store locator and enhanced viewing & sharing of GUESS’ products. All in all, it’s simple and strikingly chic.
Express is very conscious of available screen real estate. Their lookbook features an expandable navigation for fully immersive surfing and sliding panels (opposed to flipping pages) for quick browsing on both desktop and mobile devices. They use a combination of full-page images and featured product triptychs paired with bold headlines and minimal descriptor text. Like GUESS, they have some unique animated shorts of the clothing in action that really add the cool factor and make it hard not to fall in love with the look. Additionally, they have expandable tool tips to inform users of clickable elements. Once activated, the tool tips open a modal with all featured product details. Similar to GUESS Watches, Express has a well-integrated catalog that does a great job of maintaining their lifestyle and brand immersion.
H&M is unique in that it features a reverse digital catalog where you define the look, the model, and the scene. What’s most impressive is how well it’s done. You rarely see dynamic content so compatible throughout. From choosing your outfit to customizing your model and backdrop, each component works seamlessly with the rest.
Selecting your model type is a great way to create your own look. Different skin and hair color mean different color pairings for a show-stopping look. They’ve even thrown in a bit of personality. H&M does a good job of making online shopping relatable and human. Their only downfall is the lack of a complimentary mobile experience, especially because this fast fashion company has a target audience that is always on the go.
Shoppable videos are still a little clunky, but they’re a great way to convert a passive viewing experience into a potential sale. The best part is that they give a lot of life and context to the outfits, helping to build a relationship between shopper and product. They’re simple, memorable, sharable, and packed with potential. From discounts to social networks, the viewer journey could end up anywhere! Check out the YouTube video playlist for a small collection of shoppable videos. Additionally, our founder, Pete Sena, provides information on this rich media form of cataloging in his article, and walks through popular tools and services that make shoppable video a reality.
With Levi’s, it’s all about the statement. Their latest lookbook has no print artifacting. It is undeniably designed exclusively for digital use. They have plenty of pizzaz from gorgeous lifestyle and runway videos to parallax everything that help define what it means to be a pair of Levi’s. From creating a mini parallel universe that peaks into the life of an outfit on the street to various increasingly unique 360° views of select outfits, Levi’s has gone out of its way to make everything fully interactive and packed with potential energy. Not to mention, they have a strong social presence throughout. Tweet stream overlays in select panels help to expand the product line beyond the bubble of the brand. Whether you are couch surfing on your tablet or shopping on your desktop, Levi’s has crafted an unforgettable, device agnostic lookbook.
Digital Catalog Best Practices
Optimize for readability: A common flaw with many digital catalogs is a cluttered, text-heavy layout. Keep it clean and simple. The product and lifestyle is the hero, while the text is supporting.
Use compelling photography: Provide high-quality imagery using alternate product views and high-resolution product images. Short tasteful animations can also add some great flavor and variety. Alternatively, you can include engaging, highly relevant rich-media content, such as how-to videos, when applicable. Focus on the lifestyle and how and where the product lives, these drive the most engagement and activate the viewers’ senses.
Encourage uninterrupted browsing: Use modals or tool tips if need be, but don’t link out for product descriptions and other details.
Track clicks rather than conversions: Many customers browse digital catalogs on tablets and then do their shopping on a desktop because entering information on a tablet is often a painful process.
Be device agnostic: In this day and age consumers are browsing more on multi-devices each day. Make sure your e-catalog is optimized for the screen and device it’s being viewed from. This is a perfect opportunity to leverage responsive design.
Use email remarketing/retargeting: Shopper intent varies severely and is highly context-specific, so make sure to integrate email and display ad remarketing to nudge visitors that click through but don’t buy. Remarketing is a critical tactic that allows you to serve relevant or contextual ads to shoppers that didn’t purchase directly on first visit. This also can be applied to your data attribution strategy to really track true ROI on your carefully crafted catalog.