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!

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.