20 Gorgeous Examples of E-Commerce Done Right

by on 21st January 2010 with 44 Comments

E-commerce sites are notoriously busy and overcrowded.

Today we’ll be examining a ton of online stores that break this trend by being both functional and attractive. Each of the examples below has a unique lesson to teach us about good e-commerce design. Let’s get started!

First, The Problem

screenshot

Before we can appreciate sites that are well designed, we must think about what is wrong with the traditional e-commerce format. Some wise individual once remarked that a camel is a horse designed by a committee. This clever jest definitely applies to e-commerce sites. Big name online stores often have way too much input from way too many people, resulting in a mess of good intentions and great feature ideas that were never properly integrated with each other in a synergistic fashion.

The screenshot above is just a small portion of the Kmart.com homepage. As you can see, it’s a train wreck. Cruise over to the site and you’ll see that the page taken in as a whole is even worse. Like Kmart.com, many e-commerce sites suffer from immense clutter. There’s so much competing for your attention that the ultimate result is your eyes bouncing from place to place with no real purpose or focus.

Now, the Solution

Let’s take an in-depth look at some sites that got it right. As we look at each of the sites below, compare the interface to that of Kmart’s to see how much more effective a clean and simple layout can be.

Xtreme Mac

screenshot

Xtreme Mac has the most original and innovative shopping experience I came across in my search (Icon Dock below was a close second). You’re presented with a simple grid of product shots with bright, colorful rollover effects. When you click on an item, instead of being taken to a dedicated page, the entire grid fluidly shifts so that the selected cell can expand to eight times it’s normal size. You are then given a larger product shot, a brief description and the option to either learn more or buy now. Click another item and the dynamic layout changes again to feature that item.

I found the Xtreme Mac interface to be beautiful and all out fun to play with. Getting your visitors to not only be impressed with your site design but actually enjoy the shopping experience is the holy grail of e-commerce design. The more they enjoy your site, the more time they spend on it. Which, theoretically, makes them more likely to actually buy something (the ultimate goal of any e-commerce site!).

Icon Dock

screenshot

Right off the bat you can see that Icon Dock is a beautiful site full of top notch illustrations. My favorite thing about icon dock though is how they’ve handled shopping carts. Some websites make it quite difficult to see and edit the contents of your cart, but Icon Dock gives you a visual “dock” of icons that stays with you as you shop. When you want to add something to it, you simply drag the icon to the dock to drop it in. Then if you want to remove anything from the dock, simply hit the little “x” on the icon.

This is crafted in such an intuitive manner that you really don’t need any instruction. It works exactly like you expect it would. And for those who don’t get it right away, there’s still the old option of clicking an “add to cart” button. This is an important feature. When designing a uniquely interactive interface, always think about whether you should still include the traditional way for those who might not understand your fancy new idea. This allows you to blaze your own path in interactivity while preserving usability.

Nike

screenshot

Sorry Flash haters, but I really like this site. To concede a little, the loading times for every page are pretty annoying. However, the overall site is an impressive visual treat. Like Kmart, they’ve got a ton of items for sale (maybe not as much, but the argument is still valid), but instead of cluttering up the home page with mismatched featured items, Nike has integrated everything on the page in a visually seamless manner. They’ve got well over ten unique sections on a single page, yet it looks completely cohesive. Let’s look at a few of the things they’ve done to accomplish this.

The first thing they’ve done to cut clutter is fairly simple. Instead of stacking randomly-sized banners promoting different items on top of each other like Kmart, Nike has one primary banner that rotates between three messages. This surely isn’t groundbreaking, but it’s something too few designers consider when faced with loading a page to the brim with content. Prebuilt libraries like jQuery make this type of rotating content a cinch and can really make an otherwise static page come alive in a subtle, non-annoying way.

The next thing Nike has done to cut clutter is to put all the sections below the main banner on a continuous background color to avoid that “dropped in” look you get with the sale item boxes in Kmart’s design. This makes the entire page look as if it were built at the same time by the same designers, as opposed to having an old design that you keep cramming more and more mismatched items into over time. It’s all about synergy folks.

Dyson

screenshot

The lesson we can learn from Dyson is that you can make shopping for a vacuum feel like shopping for a Mercedes. No matter what you happen to be selling, if you want it to look high end, get your inspiration from websites that sell luxury cars, yachts or anything else that costs more than you make in a year. The black and gray background is really complemented by splashes of white and/or blue that really jump off the page with contrast. What really steals the show is the product photography (no doubt as much Photoshop as actual photo), which really captures the essence of the attractive product design. Also notice the rotating banner as with the Nike example. You’ll see this again and again throughout the examples below for good reason, it’s just a great way to put a ton of content into a small space without any visual clutter.

SkinBox

screenshot

Skinbox makes shopping for forum skins incredibly simple. The homepage is mostly made up of one large section showcasing their themes. The logical categories (light, dark professional, etc) make it easy to immediately find the type of skins you are looking for. The skins in each category are displayed in a large grid with the option to buy now or see more information on the skin. The latter option is important. E-commerce sites too often fill a page with boring product information, resulting in a text heavy layout trying to sell something that’s really all about visual appeal (at least in this case). If you’re selling the design of an item, consider putting the functionality specifics behind a “more info” button so that users who want that information can easily find it and users who are just browsing aren’t distracted by it.

DropBags

screenshot

I honestly have no idea what this site is selling. The “How to Use” section says something about putting the bag in a bucket, filling it with plants and ice and stirring it up, but I can’t imagine why I would ever want to freeze plant life. They might want me to think it’s scientific, but I’m pretty sure it’s witchcraft.

The point is, it’s a funky product. They’re selling a bag that you put into a bucket. Big deal right? However, they’ve made the site around the crazy bucket bag so appealing that I was almost convinced that I needed one. As a web designer, you can’t always land the Nike account. Sometimes you get a client that wants to sell a “multi-purpose extraction kit” that is essentially an overpriced bucket liner. In these circumstances, you should put forth the same amount of effort and creativity as you would if you were working for any big name client. Make the shopping experience as simple and straightforward as you can and make the environment around the product inviting and attractive.

IKEA

screenshot

Ikea wins the prize for the most interactive shopping experience. When I get the Ikea catalog in the mail, my wife and I love to sit down together and flip through it together for design ideas and to see what cool new products they’ve come up with. This is enjoyable because the Ikea experience has been carefully structured so that flipping through the catalog is just like walking through their showroom. Instead of being presented with individual items, you see custom photography of an entire room completely made up of Ikea products. They give you helpful breakdowns of what each item costs as well as the cost of buying the entire room as a set. This helps normal people who don’t know much about interior design create beautiful rooms.

Recently, Ikea has transferred this experience to their online store. What you get is an experience that’s a lot like flipping through the catalog, only much more interactive and dynamic. You can click on the icons next to certain products to get a closer look or view hidden features, change views to look around the room, or skip the room view and look at a simple grid of products. Like some of the other examples above, Ikea is shooting for a shopping experience that is not only enjoyable, but could even be considered fun. If you’re building an e-commerce site, think about how you can liven up the experience by adding something a bit more interactive than your average online store.

Cellar Thief

screenshot

Cellar Thief is just a great example of creative web design. The designers mingled current web design trends with rich textures and bright colors from the wine industry to create an amazingly attractive online store. Notice that they are really only selling three separate wines, which is a smaller product set than you are likely to have in your projects, but there’s still plenty to be learned from this example.

First off, aside from the wines for sale, there’s a bunch of secondary content on the page such as wine tips, a blog feed, etc. Notice that each of these little sections has been placed on the right side of a page filled with left-aligned text. This is structured so that the first thing you see (glancing at the page from left to right) is the primary content: the product for sale. Only after you look at the page for a few seconds do you notice the secondary content. On this particular page, this would not be true if that content were placed on the left. Left-aligning this secondary content might give it an undeserved primary position in the visual hierarchy. Always try to imagine the order in which a visitor will see the objects on the page and structure your content accordingly.

One last thing about the organization of information. Check out how much content there is related to each individual wine. Now imagine what the page would look like if the designer hadn’t thought to divide that information up into tabs. Like the rotating banner of content we discussed above, tabs provide a stylish and effective way to cram a ridiculous amount of content into a small, user friendly space. When designing printed materials, I’m constantly pleading with my clients to trim their required information due to spatial restrictions. By contrast, web design gives you so much more freedom to provide the wealth of information that your client wants in the contained manner that good design requires.

More Attractive E-Commerce Sites

Here are a bunch more examples of designers that overcame the cluttered, clumsy e-commerce stigma by focusing on both aesthetic appeal and functionality. Stop by each example and look for the things we mentioned above. There’s plenty of instances of fun yet simple shopping experiences, amazing photography/artwork, and creative content organization to inspire you to e-commerce greatness.

Baby Quasar

screenshot

Ooga Zone

screenshot

ShoeGuru

screenshot

Madsen Bicycles

screenshot

i/denti/tee

screenshot

Abercrombie & Fitch

screenshot

Sucré

screenshot

DNA11

screenshot

MacStylez

screenshot

One+Only

screenshot

Twelve South

screenshot

Sony

screenshot

Conclusion

Now that we’ve looked at what I consider to be the wrong and right way to design an e-commerce site, I’d like to hear your thoughts. Tell us what irks you about shopping online and what you love or hate about the examples above.

For even more e-commerce inspiration, check out Cart Frenzy, a gallery devoted online store design.

Comments & Discussion

44 Comments

  • http://beau.livestronger.info/ Web Design New York

    Very inspiring collection here man! I’m a huge fan of your blog and I really like the direction you’ve taken, keep up the great posts dude.
    I love coming back here to check out your latest content

  • http://designbycaleb.com Caleb

    Great Collection, e-commerce is a huge eye-sore sometimes. This proves it doesnt have to be. thx for sharing.

  • Joshua Johnson

    Thanks guys!

  • http://www.cellarthief.com ryan

    Hey Guys,

    Thanks very much for featuring CellarThief. We have followed your site for a while and have been inspired by your thoughts and insights – glad we could return the inspiration.

    Cheers,

    Ryan
    CellarThief

  • http://www.jigowtt.co.uk Jigowatt Magento Design

    Great examples of how eCommerce should be done!

  • ravi

    nice collection

  • http://www.joseph-cohen.co.uk Joseph Cohen

    Not convinced, these sites look great.

    But many of them would seem unsuited to any website looking to convert in the competitive level that the majority of online e-commerce sites aspire to.

    An e-commerce homepage should let the user know what they have landed on, steer them immediately to suitable products and sell where applicable.

    This is e-commerce done pretty which isn’t necessarily right.

  • http://www.mawhorter.net Cory

    I agree with Joseph. I would use some of the sites you listed as examples of how not to make an ecommerce site.

    I also wish to add that Kmart sells thousands of products, while the sites that you are comparing it to all specialize in selling one kind of product. It’s not very difficult to make a shopping experience easy and uncluttered when you have only a handful of similar products to display.

    You can’t draw comparisons between Kmart and the sites you’ve listed.

  • http://www.designshack.net Joshua Johnson

    So your argument is that big corporations don’t have anything to learn from small stores? Are there no interface lessons or design concepts that a large company could glean from the examples above to improve their site?

    Too often, comparing apples to apples just leaves the world full of a bunch of apples that all look the same. Instead, I encourage designers in all fields, in companies of all sizes, to look outside of their bubble of competitors. That’s where true inspiration begins. Southwest Airlines went to a NASCAR pit crew for inspiration on how to improve their operations. Your strict comparisons argument leaves no room for such innovation.

    What if Kmart said, how can we integrate selective, successful concepts from IKEA, Dyson or Nike to improve our own site? How can we, as a company who sells so many diverse products, create a cohesive shopping experience that feels as simple and comfortable as a company that only sells Mac accessories?

    These are questions that innovative designers ask. In the world of design, never be tempted to think that only apples are worthy of comparison to other apples. Instead, always ask yourself, what can apples learn from strawberries?

  • Pingback: The Best Web Design Links From The Week #2 | D-Lists()

  • http://girlstartup.com simone

    I’m not a fan with a number of the sites above, but I do love the Twelve South website! That’s a really lovely clean site.

    I really want their book mac book cover…too bad it doesn’t come in a 17″

  • http://www.ryanmwebmedia.com ryanm

    This is a great list. Thanks for the post..

  • http://www.joseph-cohen.co.uk Joseph Cohen

    Joshua remember Boo.com? It was an inspired shopping experience – shoppers could rotate 3D animations of the jeans they were about to purchase, while Miss Boo, a 3D sales assistant, advised them on their pending purchase.

    Boo.com failed.

    It broke just about every ecommerce and usability rule (granted many of them hadn’t yet been written down). The evolution of ecommerce has produced a plethora of standards that users expect or respond best to. The K-Mart website is in-line with these learnings and will undoubtedly outperform many of the sites you have submitted.

    Using Flash may seem a great idea, but there goes the 40% that would have found your site by search.

    Having a big image of a trainer may look stunning, but you’ve just alienated 99.5% of your site that aren’t looking for a Gola trainer.

    There is a difference between selling a brand online and selling product. Most of your examples sell the brand first and the product second.

  • Pingback: 35 Beautiful E-Commerce Websites « Flash Criminals()

  • http://www.bigcolors.com Bigcolors

    Love these websites. So much inspiration. However I do agree with Joseph Cohen. Good design doesn’t always mean good sales… and that is the most important thing.

  • Pingback: Miromedia Blog - This week’s blog posts()

  • http://www.woonio.de Roland

    Very nice examples! XtremeMac is very nice because it looks like a highend showroom and not like a ecommerce site.

    It would be very nice if you look at our ecommerce site: http://www.woonio.de – perhaps it is also a good example for 3d configuration in combination with ecommerce.

    Regards from germany.

  • http://www.joseph-cohen.co.uk Joseph Cohen

    Roland, nice site.

    I double dare you to try an A/B test with “Buy Now” and “More Info” buttons. You’ve designed a great site, but your calls to action are near invisible.

    While I’m sure this is intentional, I’d imagine your conversion race would improve if you made them just a tiny bit more obvious ;)

    Try an A/B test, I dare you.

  • http://www.rubbercheese.com waggit

    A really good post for many reasons. Lots to think about and lots to debate! There’s lot of inspiration there, and a lot of boundaries being pushed. There’s good and bad, but it’s refreshing to see something new. Im totally sitting on the fence yes, but who am I to tell Nike or Ikea how they sell online? I thought id post annother example of a really nice e-commerce website. Its Liam Gallacher’s clothes line website: http://www.prettygreen.com

  • http://www.woonio.de Roland

    Joseph, thank you very much for your feedback!

    I think you’re right with the call to action buttons. I will test it asap!

    Roland

  • http://www.thebeersoapcompany.com The Beer Soap Company

    The sites look great! Its good to see a few Magento based stores.

  • http://maylingerie.com Kees

    Yeah, Magento is a fine platform, as visible at my wife’s store at http://maylingerie.com :)

  • http://www.wristwatches.co.uk Shahid

    I’d also like to show you http://www.wristwatches.co.uk using the Magento solution with heavy customisation……some really nice features with simplistic navigation……get to any page in a max of 3 clicks….

  • Bob

    Found another – http://www.12leaves.com
    They create good ecommerce designs.

  • http://www.rightintention.com SEO Consultant from Singapore

    Interesting list! Does anyone know where I could obtain statistics how these sites are doing? In my field of SEO, numbers are the most important to the clients therefore in my point of view, I strongly believe that if the site design can help gain user trust and is able to convert them, would be the most valuable design a client can have.

  • http://www.awinter.co.uk Andrew Winter

    Definitely some lovely online stores in this post. With so many big brands turning over millions in revenue from cluttered, messy, so called “badly designed” online stores, it does beg the question though, maybe clutter sells?

  • laurie

    My personal favourites are the Dropbags and Dyson sites. They are beautiful and usable. Here is one that is rather good for both of these things too: http://www.beadsdirect.co.uk/Semi-Precious+Beads/Agate+Beads.htm?osCnewsid=6aa392ecf524a72990ba75fe31078092

  • Jan

    I have taken some inspiration for my site from this one: http://www.duoboots.com/ Brilliant post – many thanks.

  • http://Noneyet Ravell

    Thanks for the blog man. A real eye opener to what people like to see in a website. Navigation, color, and flow seem to be the main focus. Keep up the good work.

  • http://untitledmsjlpalo.blogspot.com/ msjlpalo

    your blog is a lifesaver,i had an assignment about e-commerce and you gave me answers… thank you very much

  • http://www.cheapleafletprinters.com Cheap Printing

    love the nike site and the dyson one, they just scream quality.

  • http://www.englishharbourcasinos.com/ English Harbour Casinos

    Yes, this is very informative. I love Ikea and Skinbox e-commerce sites! Great!

  • http://www.wantnana.com Paul

    Awesome list. Thank you. Should mention that Shopify.com is helping a lot of e-commerce companies take their design to another level without much design effort required.

  • JC

    “I honestly have no idea what this site is selling. The “How to Use” section says something about putting the bag in a bucket, filling it with plants and ice and stirring it up, but I can’t imagine why I would ever want to freeze plant life. They might want me to think it’s scientific, but I’m pretty sure it’s witchcraft.”

    Hehe. That’s a front for “The Bubble Bag” It a novel method for making Hashish from Marijuana leaves.

    They can’t advertise as such so they just make it generic. Just like a bong is an “incense burner.” And rolling papers are for “tobacco.”

    Nice design though :)

  • Woody

    Seems to be alot of duplication from across other inspiration websites. Alot of the same websites across multiple articles.

  • http://www.perfectreplicawatch.co.uk/ wrist watches

    Thanks for the blog man. A real eye opener to what people like to see in a website. Navigation, color, and flow seem to be the main focus. Keep up the good work.

  • http://www.rmt4u.jp/games/tera.html TERA

    great job. this article is so great. i like it very much.

  • http://www.handbagshermes.us/ Hermes handbasg

    Hermes handbags is a fashion house from France which is famous for its ready to wear, lifestyle accessories, perfumes and many more.

  • http://www.abercrombiefitch-saleuk.org.uk abercrombie and fitch

    Their jeans are definitely superior to the remainder and people will receive worth for their cash.

  • Pingback: An E-Commerce Website: What a Customer Wants… | Plumrocket Blog()

  • http://haha.com michael

    you guys suck my big black hairy balls because nobody cares about that that is why nobody ever takes ebusiness is no one cares cares about this boring shit.
    thank you very much
    michael
    alex
    weed

  • Pingback: E-commerce « Hoang Tomas()

  • Pingback: E-Commerce « pitrsonslaba()

  • Bozzo

    Woody, there seems to be a lot of duplication between your two sentences.

Subscribe
Membership
About the Author