Monday, March 3, 2008

Tips & Tricks: Store design workshop with Eddie Bauer

The design of your store is a crucial element of its success. It affects how people react when they first land on your store pages. It drives their clicks. It influences their confidence level. It ultimately, directly affects what they do, including whether they decide to buy or not.

We all agree? OK, let's talk about Eddie Bauer. Why? Because they've had some serious problems over the last few years (including a bankruptcy), and when you've got serious problems, you dig deep to find out why. Including finding out why people are not spending more time on your Web store, and redesigning it completely.

That's exactly what they did and that's why we are interested. They spent months looking into what cold be improved. Conducted tons of interviews. Spent time and money you and I don't have looking for great design ideas. Hey, there's definitely something to learn here! (There is a really interesting story about it on the Internet Retailer Web site, which you should read)



With annual, online sales of over 200 million a year according to Internet Retailer's Top 500 Guide, Eddie Bauer's Web store is certainly not the kind of Web operation that a small business would run. So why should we talk about it here? Because store design doesn't have anything to do with size. Even if your store does a few thousand dollars a month in sales, it should still look great. A great design will help it grow. A bad one will hamper its growth potential.

So, let's get started. What can we learn from Eddie Bauer's substantial redesign?

Minimalist Design
Eddie Bauer chose a very clean, almost minimalist design for the new store. The product and category graphics do the talking (see below). The navigation is extremely simple to start, then gets busier as you get deeper into the product catalog. But the idea is that you don't want to make the customer feel overwhelmed when they land on your home page: just a few design elements to grab the visitor's attention, plus simple navigation (just a few choices) and a search box. That's it.

Technical note: the beauty of a "minimalist" design, among other things, is that the underlying source code is typically quite simple as well. And that leads to faster page-loading time, fewer cross-browser rendering issues, and easier design maintenance. The simpler the design, the more likely you are to manage virtually everything in an external style sheet without going nuts!

To Do: is your store design too busy? Are you trying to fit too much stuff in the various areas of the design (e.g. top, left side, right side, etc.). Consider removing many of the elements that are not crucial. For example, move them to the footer (e.g. if someone wants to log in, they'll look around for the log-in box, it does not have to be that prominent).

Simple Navigation
Eddie Bauer has a huge catalog, yet they narrowed it down to 5 top-level categories. Click on "Men" and you get 20 sub-categories, which is a manageable number too, especially because they opted for a nice layout that combines a horizontal AND a vertical element to it. I like it. Not overwhelming, clean, and definitely search engine friendly.

To Do: consider reducing the number of top-level categories. Study your Web analytics reports to see which categories are the most visited, and build the navigation keeping that in mind too. Possibly hire a developer to help you build a dynamic navigation tree that expands/collapses automatically depending on which category is currently being displayed.



Prominent Search Box
Simple navigation must go with readily available search. As you can see, the two are right next to each other in the Eddie Bauer redesign: navigation on the left, search box on the right. See optimizing your search box for more thoughts on this.

To Do: make sure that your search box is very visible, and that your search feature works well. Look, if there is one good reason to look for better e-commerce software is that many small biz shopping carts contain terrible, lousy search features. Category AND product results should always be shown, along with a way to narrow the search.

Graphics Are Crucial
Graphics play a huge part in your store interface. Look at some of the masters in Internet marketing, and you'll find the same focus on big, awesome-looking graphics. Apple is the king in this area, Crate & Barrel does an awesome job too. Especially on the main landing pages, like your store home page and top-level category pages. Cool, sharp-looking graphics invite clicks, convey quality, and build positive expectations for what's next.

What about search engine optimization? Isn't text more important than graphics for SEO? Yes, it is. But a big graphic can have a really small footprint in your source code, as you probably know (it could be just 1 line, loading a JPG image). Text can follow. In the browser, the text could appear even below the browser fold line. To a search bot, it makes virtually no difference. To a visitor to your store, it could change the experience of landing on your home page completely. So, add a good ALT tag to the graphic, and don't worry about SEO.

What about page-loading time issues? Well, don't add crazy-big images, but with broadband becoming more and more mainstream, loading a 20K versus 80K JPG not longer makes the difference that it used to make.

To Do: consider adding large, beautiful graphics to your home page and top-level category pages.

Summary
Clean up, simplify, and add better, larger graphics.

Look around at many of the most successful e-commerce stores today and you'll see that this trend (clean, simple, graphical) is repeated all over the place. That's what triggers clicks. That's what makes store visitors stick around longer and come back more often. And that's something you can do today, independently of whatever e-commerce software you are using.

5 comments:

JDMbuysell said...

great article! would love to see more case studies on here

Adrienne A said...

As of September 10, the site still doesn't work with Firefox 3. They are "aware of the problem" and "are working on it."

It's inconceivable, and unforgivable, that a big commercial site like Eddie Bauer's doesn't support the second-most popular browser in the world.

Massimo said...

Adrienne, works fine for me in FireFox, except for a "File not found" issue when I select size/color on some products (probably the image cannot be found). Make sure that you are using the latest version 3, and not the BETA.

AdrienneA said...

Massimo,

I'm not using the beta. The "file not found" issue is (was--see below) the reason I said the site doesn't work in Firefox 3. I couldn't reproduce the issue in any other browser.

Did you notice that my post said that Eddie Bauer was aware of the problem?

I both emailed and called Eddie Bauer about this problem, and as of two days ago the problem is fixed.

The squeaky wheel.

Massimo said...

Hi Adrienne, thanks for the update. Nice to hear that they listened to your feedback and fixed the issue!