A Showcase of Design Patterns Found in 120 E-commerce Home Pages

This article is a full chapter from the E-commerce Collection, which contains 21 additional topics and 1,800+ design samples all focused on web applications.

We will begin our journey with the home page. And, of course, home pages get a lot of attention. While this may be for very good reasons, it is not always valid to assume that it is the most important page of your site. And yet, the home page often receives more attention than any other part of a site.

Naturally, the home page is extremely important and we should pay careful attention to the approach we take. But let’s not carried away and ignore the rest of the site. With the home page, your only getting started.

There are a number of common approaches to home pages and all of the sites in the sample set have a home page. So, naturally, there is a sample from every site here, making this a complete list of the sites used in this collection. I have assembled these into groups based on various approaches to home page layouts. Let’s dig in and see what we find and, of course, keep in mind that though I have sub-categorized these, this is by no means a scientific process. Most of the sites can easily fit into many sections. So don’t focus to much on my break down if you find it distracting form simply scanning for ideas!

An Invitation to Dig In

The first approach I would like to consider for a home page layout is what I refer to as the invitation. With this style, the goal is to essentially pull users in. Your not showing specific product so much as you are attempting to entice them to dig further. Sure, you have to reveal what the product is, but the goal seems to be to imitate a sense of curiosity that will lead to an exploration of the product.

Jumbo Photos

In this small subset of home page layouts, I want to consider the impact of super-sized photography. In my opinion, one of the single most important aspects of an e-commerce site is quality photography. The better you portray your product, the more likely it is to appeal to consumers. Consider the samples here, food and fashion. Both of these are extremely easy to be sold based on an emotional response. And the jumbo sized photography on these home pages gives the product impact and appeal. These large and beautiful images generated a gut level response that is overwhelmingly positive.

A Link Portal

Many sites simply have so much product that the primary challenge of the home page becomes how to most effectively allow users to dig into the content. The resulting approach you see here I have dubbed the link portal, because in reality these home pages are pretty much just a launching point for users to dive into the site.

New and Featured Product

A pretty natural route to go is to feature some product on your home page. In this case it isn’t necessarily on sale or under some sort of promotion. Many of these simple feature their newest product. While others, like Crutchfield, have simply selected something to highlight. In a later example, I am intrigued that a site with such a range of product has simply chosen one thing to feature, well to be fair they have a rotator of several items. But still, I can’t help but wonder how they go about selecting what to highlight.

Product Detail Page

Sometimes a site literally has only one product. In such cases, you should carefully consider simply turning the home page into the full blown product detail page. Perhaps this is obvious, but sometimes we assume we have to make things more complex then necessary.

The Product List View

Another tactic that is rather popular is to place a product list on the home page. And I don’t mean a list of currently promoted or sale items. I mean, placing the entire (or large portion of) inventory directly on the home page. This approach is interesting if you have a small number of items and simply want to allow users to quickly see the product. This especially makes sense if your product is as easy to understand as a t-shirt or game controller. In such cases, getting the product in front of the user quickly not only makes the site easier to use, but it removes extra, unnecessary steps in the sales process.

Promotions and Sale Items

It is almost hard not to imagine an e-commerce site featuring sale and promotions on their home page. It so clearly connects with the most common ways to draw people into a physical store. You offer up some sort of sale to draw people in, hoping to up-sell and cross-sell them into higher profits. It is not the least bit surprising to see such tactics so clearly at work on the web.

I would just like to challenge this for a second, and this is no at all because I consider this a bad approach, I simply want to challenge our thinking. Is it wise to push promotions so prominently on the home page? After all, a user has chosen to end up on your site, do you really need to compel them keep browsing? I suspect that in many cases, you will be better served by simply highlighting your most popular items, new products, or simply help users find their way. Again, if this tactic works for you, great, but don’t assume this is the way your site has to be. Experiment and see what happens.

The Sales Pitch

Another great strategy for the home page is to focus on a sales pitch. Sometimes you need to sell your users on a concept or idea prior to introducing the actual product. This is what these sites do. They put out a promise, ask a question, set a mood, or otherwise establish some sort of thought in the user’s mind.

This can help filter your audience. For example, the Alienware site sells premium computers that are basically insanely fast. Their simple sales pitch “Some people find power sexy” sets a mood for the site. With such power comes a price tag, and the sales pitch and fancy packaging are nothing more then a sales tactic to get you hooked. The sites collected here all use a sales pitch in some way, but not all quite as bluntly as the Alienware sample.

What is This Thing?

With some products, the first challenge is helping visitors understand what it is, why it is unique, or, generally, why they should give two cents about it. In such cases, the education process is critical. The following sites all feature products that requires some explanation. This is particularly true of software products, for example, but is also important for many other situations. With this in mind, consider the following e-commerce sites.

Additional Samples

And, finally, here are some additional samples. Some I couldn’t’ decide where to best place, and others simply defy calcification.

But wait, there’s more!

If you enjoyed this set of inspiration, you will love the full collection it comes from. Explore 21 more topics and 1,800 design samples to inspire your web application design work. Check out the full E-commerce Collection for more details.