Bag on Timbuk2

The importance of displaying products in eCommerce can’t be emphasized enough, yet sadly, it’s one of the most overlooked aspects of online visual merchandising.

Customers online are separated from the one thing that the brick-and-mortar customer takes advantage of each time she walks into a store – the ability to pick the product up, feel it, open it, snap its snaps and button its buttons. How does it look? What kind of quality is it? How much functionality does it have? How will it look on me? Is it worth the money?

For many buyers and managers, the thought process of how to keep selling the product once it’s placed into inventory stops at the creation of the item #. The same goes even doubly so for products on the web. But we need to be doubly vigilant about how a product is visually represented online for the very reason a customer is removed from being able to make a physical assessment in a store. For some reason, how products look on the web is taken even less seriously than how they would on a shelf. As more and more customers do their shopping online, and the cost of renting in commercial buildings skyrockets, retail companies need to pay attention to how their products look online, and to ensure that all the visual information needed is there to help the customer make a confident, informed decision.

If you are selling a product that doesn’t rely on the emotions or senses as much as just plain necessity, maybe this doesn’t pertain as much to you. But if you are selling apparel, home goods, jewelry or other lifestyle items, you should seriously consider how your products look online. Would you pay $739 for this blurry, moldy looking bag? I know this brand. They make gorgeous bags. You wouldn’t know it from this terrible picture.

Would you pay $739 for this?

The nicer your product is, the more you invest in making sure it looks impressive. What would you, as a customer, want to see?

Here’s the basics for better online product presentation:

1. Hire a good photographer with a professional camera with access to a good studio with proper lighting. You little point-and-shoot won’t cut it here. Make sure your photographer understands product photography and how to fill a frame. Product photography should be big, informative and clear.
2. Hire a designer proficient in Photoshop retouching with knowledge of web graphic optimization. Yes, this is what I do for a living, and I might be biased, but I can guarantee you that a solid Photoshop artist can drastically change the way your products look online, and, if consistent, your entire website. That designer should have expertise in color and tonal corrections, removing backgrounds, creating shadows or reflections, removing flaws, changing colors realistically without destroying textures or shapes, and sharpening images for clarity. They must understand optimizing images for the web at many different sizes. They also must develop a scalable content management system that allows them to keep the images organized.
3. I have a solid merchandising and retail background, but if your designer does not, you need to guide him or her, or make sure you have a merchandising department who can develop standards for how your products will be shown. For instance, a tote bag for my company will have a front shot, back shot, side shot if needed, open shot, detail shots of special features, and sometimes a model shot. Zappos does an excellent job at this. How they merchandise shoes with multiple views indicates they understand how online customers shop. The goal is to help the customer “pick-up” the product and look at it from all angles, as if they were standing in a store.

Bag on Zappos

4. Invest in Zoom software (Adobe Scene 7) or hire a front-end developer who knows how to use jQuery or Javascript to get you some whiz-bang rollovers and lightbox effects for multiple views of your product. Small thumbnails are fine, but what customers want are large images where they can see every detail. So make sure your thumbnails are linked to larger images, and that those large images are high quality. If you can’t afford the Zoom or rollovers, have a section of your product page or link to another page that shows more views of the product.

Product presentation is often skimped on because it doesn’t show an immediate cost benefit like email campaigns, special offers, or home page banners. But think how you shop. Perception is everything. If your products look fantastic online, customers will believe they are. Great product presentation is at its very core good customer service and excellent salesmanship.

Timbukt2's Build Your Own Bag

I love cool new ways to show product online. I can play with this thing for hours, but I gotta work! Timbuk2 clearly has one of the most user-friendly and fun ways to design your own Timbukt2 bag. Go to their website and try it out!

A screenshot of a portion of the Gucci.com handbag page.

Web designers are always supposed to be mindful of viewers’ monitors widths. A lot of us have very large monitors to work on, and it can be too easy to make a website that goes off the screen of another smaller monitor. Nobody wants to scroll horizontally!

The site developers and designers of Gucci.com have decided to go wide anyway with a very usable and sleek design that is like strolling down a 20′ foot line of high-end shelving in a real store, but it works well for any size monitor. I refer to their handbags page as I work with luxury bags myself, and like to see how other companies are doing it.

The Gucci handbags page opens up to show a nav on the left that allows you to narrow your search according to features, and then to the right of that, columns containing grids of up to six bags each. On my visit, you could horizontally scroll through about 10 columns. Next to each column is a small arrow which can allow the viewer to scroll easily through the columns, like turning pages in a catalog. No need to scroll!

Click any of the bags and the column expands. The bag comes out of it’s grid cell like someone is actually taking it off the shelf, then is showcased in an information pod at the right. This is where the copy is, and the “add to shopping bag” button.

This is how nice the zoom feature works for Gucci.com

What I really liked in addition to the great site design was the quality of the photography and the nice zoom feature. A viewer just clicks on the thumbnail and the zoom brings the viewer face to face with killer detail and texture. Here is where a great retoucher (like me!) can come in handy.

This is an inventive and intuitive way to show high-end bags online. I really feel like I’m in a beautiful store, and the way the bags are presented emulates as much as a web store can how it feels to pick up a product and ogle the details.

My only complaint: No alternative views or look-in shots of the bags. I want to see how much I can cram in it. Are there any pockets? What’s the back look like? What does it look like on a person? What other cool features would I need to see if I picked this up in a store? If your company isn’t brand-famous like Gucci, it would be wise to show multiple shots of all views.

If you can’t afford a massive site design overhaul like this, investing in quality photography, professional retouching and showing multiple views will go a longer way than most (because most aren’t doing it! Have you noticed?). Do you know anyone who’ll drop even just $200 on a blurry, muddy looking .jpg? Could be the nicest bag in the world. How would anyone know it?

ModCloth logo

I’m a designer by trade, not a marketer, but I come from a sales and merchandising past which requires knowledge about how customers think and react to certain stimuli. This helps me to integrate with the marketing team I work with and helps me design with the customer in mind.

And I am the customer. I absolutely hate (HATE!!!) malls and will only shop places that are clean, spacious, not crammed with crazy people and don’t have a scowling face manning the one open cash register with a line out the door. So I shop thrifts, Marshall’s on their slow time, or I go —more than ever— online.

This mirrors the current trend. As consumers get more comfortable spending money on the net, stores will react by creating attractive and user-friendly web stores, which is an entire blog post in itself. But along with attention being paid to creating highly shop-able web stores, we must also pay attention to the growing trend of destination web stores, where tribes, forums and communities of brand-fans thrive. We need to learn how to make web stores more organic.

Be the Buyer at ModCloth!

A strategy I like is from my latest favorite online clothing and accessory store, Modcloth. Modcloth allows you to set up a detailed profile, RSS subscribe, join on Facebook and Twitter, and leave reviews, which is pretty standard fare (if you don’t think so, it’s time to wake up, Rip Van Winkle!). But its “Be the Buyer” program is unique in that it encourages customers to vote on the merchandise Modcloth should carry. Modcloth will then email the voters about the availability of the product they chose to be placed into production. The static customer is now a dynamic participant. Modcloth has invited their customers to be part of their community.

Name It and Win It!

Another program they have is the Name it and Win it contest. Customers contribute names to Modcloth’s newest additions. The Modcloth brand is young, fun, indie and creative. Much like J.Peterman, copy and product names are used in a lyrical narrative that spurs the imagination and creates excitement about the brand. Modcloth invites its customers to be a part of their brand, not just a static observer, by actively creating cool names for the products they may purchase one day. How many companies invite direct participation in such a fun way?

(Don’t even get me started on their Flickr community where customers post pictures of their wicked cool ModCloth threads! Weee!)

Lots of online marketing strategies start out with a few successful formulas but then fear to deviate becomes a habit. But what worked today may not be sustainable tomorrow. While email blasts, free shipping and deep discounts work now, everyone in retail is doing them, and customers will always expect them. It might even cheapen your brand. What made you so different in the first place? Why should your customers be excited by you? (What makes you think you’re so special, huh?) If customers are going to continue to buy merchandise in the fourth dimension of the internet where they can’t pick it up, touch it, or smell it, we need to think of how to give them other ways to connect to it. Going tribal is one way. Modcloth is doing just that.

You are at their mercy. How do you work smarter?

Say you’re an artist within a web retail team (like me). The marketing folks decide they want you to develop a new design for their sales program. Unless your company has a very strict and organized hierarchical structure of planning and approving designs, you can be left at the whim of every person within your team and beyond. This means you will be in the reactionary mode of forever tweaking the design until all the “powers-that-be” are satisfied. Perhaps you can’t control what others do, but you can control how you deal with it.

For Print folks, deadlines can be a salvation. If the design is scheduled to go to print, it motivates people to solidify their edits in a timely manner, and hopefully, to think things through enough to get it right the first time. I’m sure there are exceptions, but this has been my experience.

In Web, however, things happen in real time because the web is “on” 24/7. This requires a certain kind of flexibility and a special kind of superhuman patience on behalf of the designer. If non-designers realize you can tweak things and immediately go live, then you can expect that to happen!

Every once in a while I’ll post time-saving (and sanity-saving) techniques that I have developed while working as a graphics designer in the constantly changing world of eCommerce and web.

Here’s my first few tips:

1. Save all “approved” versions of your designs. They are subject to re-approval at any moment. Don’t assume the first design is the right design. Depending on how long your chain of command is, and if 20 sets of eyes need to see it before its go-live time, you could possibly end up with an entirely different design at the end, only to have the first one suddenly approved after the last one goes live.

2. When making designs, particularly in Photoshop, keep all your Layers specifically named. Keep all named layers of your design in specifically named Group Folders. If you have multiple background colors or images you may have to toggle on or off, you would have them all in one Group Folder and they would be named so you (or your fellow designers) can easily find them. This is Photoshop 101 people…but it’s amazing how many designers don’t practice good workspace hygiene.

3. If there is any possibility you will be asked to switch out different versions of an image element (ie: a wallet that comes in brown, black and red), keep all versions you have in your layers. Today they want a brown wallet. Tomorrow, they might want a black one. Next week, it might be red. If you have a Group Folder named Wallet, you would have your multiple color versions of that wallet within that folder. It’s as easy as toggling a layer on and off should they want to switch the color.

Even if they tell you they just want a black wallet….do yourself a favor and keep all the color layers handy anyway. Minds change.

So, in essence, THINK AHEAD ALWAYS. Be prepared to turn on a dime. All designs should be built with complete usability and change-ability in mind. Thinking ahead will save you time and streamline your productivity, not to mention help any designers you work with who must also work within your files.

One man's anguished cry for better usability

This post from Andrew Wilkinson at MetaLab would be really, really funny if it weren’t so true.

Now, Zappos ain’t gonna lose any love from me because I adore their selection and famous customer service. But what IS customer service, anyway? Awesome shipping policies? Yes. Crazy product selection? Yep. Quick and knowledgeable help via phone or email? Hells yeah. Zappos has all that. It’s going far and beyond what most companies are doing these days. Zappos should also get some credit for the way it displays its products on the main product pages. Multiple views of the product from all angles and a nifty color swatching feature help the customer visually pick up and handle the merchandise.

But the point is this: Usability IS customer service. Whether your customer has to shop dirty aisles and trip over floorstacks, or look at bleary jpgs and crappy navigational menus, it’s the same thing. Customers can “walk” into your webstore 24/7. Therefore, you should put as much effort into making the shopping experience for your online customers as intuitive and easy as you would for your earthbound store. A pleasant and groan-free shopping experience means more sales.

I am no web usability expert (yet). But I have enough years working retail floors, designing retail merchandising plans, conducting resets and remodels that I understand it instinctively. I also understand customer service. The more I work in eCommerce, the more I understand that what applies to real stores should apply to online stores as well. As more and more consumers buy online, it would behoove us to remember what it feels like to be a customer.

Amazon Cyber Monday Deals page

I work in eCommerce design, so I get a little excited when I see an online store do things right. I’m referring to Amazon.com and their Cyber Monday Deals, which a fellow designer I work with called my attention to.

Visit the homepage, click on the upper right hand corner where it says Cyber Monday Deals Are Here in red. That’s where you’ll see a page dedicated to the best deals up until today, 11/30. Subsections are set up on the page titled with product header such as Electronics, Video Games, and what they call Lightning Deals, deals that are added on an hourly basis and subject to sell-outs, and have a stock meter and time remaining on the deal to create a sense of urgency.

With so many different kinds of products (zillions!), creating clean, intuitive design with excellent usability is a herculean challenge. The Amazon development team certainly make it look easy.