Saturday, May 31, 2008

Tips & Tricks: Home page design workshop with Borders

I love huge redesign projects (as long as it's not our Web site getting redesigned). There's often a lot to learn from good companies releasing a new version of a Web site or a Web store. Both good ideas to keep in mind and mistakes to avoid.

A couple of months back we focused on how apparel giant Eddie Bauer had updated their Web store. Now, let's look at what books & music powerhouse Borders has come up with.

Why? Because a $3.8 billion dollar company like Borders has a lot more money and human resources than you and I to spend on figuring out the best way to redesign their store. They spent a year on the project, and recently re-launched their storefront. When that kind of thing happens, I'm listening.

Let's see what they've done and whether there is something we can learn from their experience, and maybe apply it to our own e-commerce Web sites.


Specifically, we're going to focus on their new home page. There are 5 things that I want to point out about their new home page design.

(1) Search

As mentioned here, many leading e-commerce stores are now placing the "small search box" centrally, in one of the most important, most visible areas of the store design. That's simply because search is absolutely key, as many studies have shown. If I were you, I'd do the same.

Interesting how they put a category drop-down next to the keywords input field. That's a good idea too, in my view, and easy to implement on your Web store as well. Specifically, if you have a bit of experience with HTML, you should be able to rather easily change the HTML form that makes up the search box to include a category drop-down. In a nutshell:
  • Visit the advanced search page on your store (most e-commerce systems have one)
  • Save the page with your browser
  • Open it in an HTML editor
  • Look at the code used for the category drop-down (assuming there is one)
  • Copy and paste it in your small search box, then style it to make sure it looks OK.
  • That will do the trick in most cases. If not, ask your Web designer to help you.
(2) Tell them what's new!

If you've got new and existing stuff happening on your Web store, tell your customers! Don't expect that they'll find out. It's not a bad idea to place a visible interface element right at the top of the Web store design, just like Borders did, and then link to a page that talks about what's new. For example, this page could talk about...
  • New products or categories of products
  • New promotions
  • New reviews that have been written about your products or services
  • Changes you've made to your Web site (e.g. how to use a new feature), etc.
  • ...
Be proactive about informing your customers about what's happening on your Web site, or within your company. This is not only important as you're providing useful information, but also relevant marketing-wise, since it delivers the idea that yours is a dynamic business that you keep investing on!

(3) Main category navigation

In most cases, it doesn't make sense to have a huge category tree available on your home page (even if it's a fly-out menu). Instead, only present the main categories. Don't overwhelm the customer, but rather invite them to simply click for more information.

On the landing page you can certainly help them locate the exact place they want to go to with a list of subcategories and other ways to browse (e.g. browse by price, browse by brand, etc.) or search within the selected category.

This brings about an important topic: should navigation be different on your home page? Yes. It should. Pay attention when you visit most of today's leading e-commerce stores, and you will see this pattern repeated over and over. The home page is typically a very different page from the rest of the store, in terms of how navigation is presented.

And this prompts the next question: should the home page be a page you control completely? Should it not be controlled by whatever template system controls the rest of your Web store? Yes, in my view, it should. Your home page is crucial. It should be a page that you:
  • manage yourself (e.g. using an HTML editor)
  • update regularly (e.g. weekly)
  • does not use the same navigation menu as sub-pages
  • presents information in a graphically engaging way that invites the visitor to "come in"
Of course, it needs to be graphically consistent with the rest of the Web store, but it does not need to be managed through your e-commerce system. Will this create more work for you? Yes, but it's worth the investment. Your home page is too important.

(4) Magic Shelf

The main area of the Border's new home page is what they call the "Magic Shelf". Designed in Abobe® Flash®, it allows the visitors to browse featured products in a few different categories without even leaving the home page.

The idea is to replicate the experience you have when you walk into a Borders store and spend a few minutes looking at the main displays where they're presenting new products or pushing hot selling items.

This is certainly not a "must have" on a Web store. Having a few featured products and categories on your home page will work just fine. As long as your graphics are nice and your marketing pitch is compelling, your home page will successfully invite a lot of visitors to learn more.

That said, the "Magic Shelf" is a pretty cool idea. I like it. In my view, it successfully helps replicate the "let's see what's new and what's selling" experience that many of us have when they walk into a bookstore.

Can you do it on your store?
Does it have to be done in Flash?

  • Yes, you can do it too!
  • It's not easy to do. You're going to need an expert hand to help you.
  • It does not have to be done in Flash. Flash is one option, but not the only one.
  • In fact, I would rather use JavaScript and CSS to accomplish a similar effect, and in a more search engine friendly manner too! Technical users: check out the Tabbed Panels Widget in the Spry framework (look at the vertical tabs example).
(5) The rest of the page...

Nothing compelling in the lower part of the page. I doubt a lot of people even look at it. The top is where most clicks will happen. However, don't get me wrong. I'm not saying that you should not have a "bottom" area on your home page.

In fact, the "bottom" area of your home page is very important. That's where you need to place well-written, well-organized textual content that will serve two purposes:
  1. Tell visitors there's "a lot more" to view, read and buy on your Web store.
  2. Tell search engines what you store is about.
Number 2 is key. Lots of graphics at the top of your home page are fine and make a lot of sense as a strong "welcome" to your store visitors. But it's important to accompany them with well-written textual content in the lower part of the home page.

Imagine that you're serving the page to two completely different visitors: potential buyers will like the top (graphics, Flash animations, you name it!); search engines will mostly ignore it and focus on the bottom (text).

Happy home page redesign!

1 comment:

MySpace Design said...

Great tips! Thanks for sharing. This is very informative and very useful indeed.