Ecommerce Design: Supermarket Style

Every weekend I grab my list and my keys and drive to the neighborhood grocery store. I'm never alone in this ritual, and I am reminded of this as I navigate through the maze of cars on my way to a parking spot. After heading inside, I dislodge a cart from the chain, and forge on to the first item on my list. At this time, the store's goal is to get me to each item on my list quickly and efficiently, show me some other products I may be interested in along the way, direct me to checkout and complete my purchase. If it's done right, it's seamless and hassle free - and my local store just earned my business for next week's groceries. The online retailer should have the same goals - identifying a need, directing me to it, encouraging my selection and completing my purchase.

Part of the lure of online shopping is speed and not having to battle for parking spots. But in an environment where one click can end a shopping experience, it is crucial that the online retailer provide efficiency and ease of use. Simply, the easier it is for the shopper, the more profitable the retailer.

Identify the Need
When I want food, I go to the grocery store. This is the store's sole purpose, and I know exactly what I'll find when I get there - food.

Companies develop websites for many reasons. Brand extension, lead generation, customer outreach, and product sales are a few. But many sites fail to achieve the desired result because the goal of the site hasn't been clearly defined nor has it been reinforced on every Web page. For sites where the goal is to sell products or services, the type of product or service sold and the availability of an online shopping cart should be evident squarely on the home page and throughout the site.

A good example is the website for Neuchatel Chocolates, www.neuchatelchocolates.com. The URL, home page design and navigation buttons tell you immediately what the focus of this site is - chocolate. The shopping cart icon remains in the same prominent location on every web page to let visitors know that online purchases are available and encouraged.

An example of a website that could use a little help in this area is TigerDirect.com. (Please note that I have never had any dealings with this company, and they might be absolutely wonderful at what they do.) While the home page shows photos of computer hardware and peripherals, it is so cluttered that there is no clear call to action. The eye doesn't know where to look first, nor is there a place for the eye to rest (e.g., no "white" space). Although the site sells product, the shopping cart icon is very small and the "Your Shopping Cart" area is hidden within the right navigation bar.

Finding What You Want
Supermarkets, like websites, are essentially self-service mediums. Of course, supermarkets are staffed, and you could find a clerk for help if needed. But, by and large, we all shop alone. With this in mind, supermarket layouts are the product of countless hours of research where shopping behavior is translated into floor plans developed to maximize sales and profits.

Without a third dimension, this type of planning isn't as easy online, but it is still possible to steer shoppers where you want them to go.

Neuchatel Chocolates' website features navigation buttons that use logical naming conventions - helping the visitor clarify their needs.

EXAMPLE
The Pottery Barn (www.potterybarn.com) site uses "calls to action; golden nuggets that alert online shoppers to new, seasonal or popular products and sale items.

At the time of this writing, the home page contained several important calls to action:

1. Seasonal Items: This page contains two "calls to action. "Create your Outdoor Room" and "Easter Brunch.
2. What's New: New items are located in this area and grouped by the same general categories found throughout the site.
3. Spring Sale: The place to find recent sale items.
4. Best Sellers: Features the company's most popular items.
5. Specialty Areas: "Small Spaces, "Style House" and "Registry" are areas that target specific customer needs. For example, "Small Spaces" is dedicated to providing decorating solutions for cozy apartments, and small areas of a home.

By mapping out the home page in this way, visitors can quickly find the call to action that is meaningful to them, and follow that path to the products that they want.

In an attempt to be creative or hip, some companies devise new and unfamiliar names to identify their product or service categories. Unfortunately, instead of being intrigued, visitors become frustrated. A website I visited recently sells flower and vegetable seeds and gardening supplies. The main product navigation is separated into: Vegetables, Flowers, Herbs and Garden Gear. I clicked Garden Gear expecting to find gardening gloves, clogs, hats, i.e. "gear, to wear when gardening. What I found were supplies: tomato cages, planting pots, and pop-up greenhouses. Now "Garden Gear" sounds nicer than "Garden Supplies, but it didn't effectively communicate the contents of that section. I clicked out immediately because I didn't find what I wanted.

Promote The Purchase
Choices abound in supermarket aisles, and product selection is based on many factors, such as brand loyalty, packaging, shelf position and price. Take the cereal aisle for example. Shoppers can choose from dozens of cereals: hot vs. cold, healthy vs. sugary, low-cal vs. high-cal, etc. If shopping for an item that you've bought before, you might not put much thought into the purchase. But when shopping for a new item, you're more likely to make a selection that you've deliberated. First, you'll probably identify a candidate by price or packaging then pick up the box to read the ingredients and nutritional information. You might do the same for a few similar items before making your decision. This type of comparison constitutes your "product research, and few of us purchase unfamiliar items without undergoing this process.

The advent of comparison shopping sites such as mysimon.com and bizrate.com have turned up the heat for ecommerce sites retailing multiple product brands. These sites help online shoppers find the cheapest price for a particular product from a number of competing websites. Price might be the deciding factor for some online shoppers, but not for all. Here's where the design of a shopping cart can win sales by showing value, especially if your product isn't the cheapest.

The Levenger web site (www.levenger.com) contains an easy-to-use shopping cart that provides shoppers with multiple product viewing options. The standard view shows a small image with product details, color options and price. Visitors can click on a color and the item will change to the color selected. Additionally, a static page containing "More Photos" provides multiple product views and close-up photos to show detail. But the pièce de résistance is the "Zoom" feature, where not only a larger photo is available, but the shopper can focus in on finishing details with a single mouse click. While your budget might not allow for such a slick feature, any feature that helps convey product value will help convert browsers to buyers.

Another way to show value in the shopping cart is by anticipating needs. The Levenger site provides a list of related items for up selling and cross-selling opportunities, customer reviews, "how to's" and product care instructions.

 
Checkout
Here some supermarkets are following the lead of ecommerce sites. To offer a truly "self-service" experience, many forward-thinking supermarkets have added "self-checkout" lanes. Shoppers can swipe their own barcodes, bag and pay - theoretically more quickly than with traditional checkout lanes. Whether these lanes are actually quicker might be subject to debate, but the perception is that they are.

This holds true for online shoppers as well, who believe that shopping online is faster than shopping at brick and mortar stores. The purpose of your shopping cart, then, must be to support this perception. While product offerings and company policies will probably determine the amount of information required from your shoppers, streamlining and simplifying the process will be critical to your success. Confirming your process with usability testing will allow you to see and hear where would-be customers become stymied with the design and functionality your cart offers. ■