9 Characteristics of Well-Designed E-Commerce Websites

E-commerce web design and development presents some unique challenges that you won’t always face with other types of web design. For sites that exist primarily to sell products, it’s very easy to look at sales and have a measuring stick to use when evaluating the success of the website. However, there are any number of factors that can influence the success of an e-commerce site, and identifying areas of strength and weakness is not always so simple.

In this article we’ll look at nine specific factors that are generally present on well-designed e-commerce websites.

If you’re looking to build your own e-commerce website, we recommend Shopify.

1. Ease of Navigation

When attempting to sell products to visitors, the first requirement for selling a product is that the shopper has to be able to find specifically what he or she is looking for. Effective navigation is important to any website, but it’s especially critical for e-commerce sites. Lost visitors will result in lost sales, so every effort should be made to have a site with clear, logical navigation.

E-commerce sites often face considerable challenges with navigation because of the number of products that are presented on the site. Large sites, such as those of department stores, have to be especially careful with navigation, because finding what you want will usually become increasingly difficult with more options. One factor to consider is how the average visitor will attempt to find a particular product. What makes sense to the designer or to the company owing the site may not be the same path that the average visitor would take to find a product. Sufficient user testing is extremely helpful for identifying potential navigational issues.

Examples:

The Pottery Barn uses a drop down navigation menu to help visitors find what they are looking for. The top level of the navigation menu contains links to the major product types that are available on their site, and hovering over a link will bring up the drop down menu that helps to narrow it down to find more specific products.

Pottery Barn

Nike’s online shop uses a vertical navigation menu. When you hover over an item, such as “Men”, you will then be presented with options for different product types, brands, collections, and sports, making it easier to narrow it down and find what you want quickly.

Nike

2. The Design Does Not Overpower the Products

The focus of an e-commerce site should be on the products that are available for purchase. A design that is extravagant for no legitimate reason will usually do more harm than good, as it will draw attention to the design of the site and away from the products. Yesterday we posted a showcase of e-commerce sites with a minimal design approach. There sites have chosen to keep the design simple so that the products don’t have to compete for the attention of visitors.

Examples:

Apple uses simplicity in the design of their products as well as anyone. Their online store takes the same approach with a clean, attractive design that does not provide any distractions for shoppers.

Apple

Rapha has a beautifully design website, but it still has a rather simple approach.

Rapha

Shoe Guru is another very well-designed site that avoids anything excessive. The page shown below lists the men’s athletic shoes that are available. The page simply provides a product photo, name, and price, as well as a link to the product page for more details and purchase options.

Shoe Guru

3. Easy Checkout

User experience on e-commerce sites is critical to success. If the checkout process involves too many steps or is confusing, shoppers will wind up abandoning their cart with items left unpurchased. Ideally, the checkout should involve a minimal amount of steps and should be as easy as possible for shoppers.

Examples:

Add an item to your cart at White and Warren and you will immediately see the contents of your shopping cart. You will be presented with the options to continue shopping or to checkout. If you chose to checkout, you can login as an existing customer or create a new account.

White and Warren

At BCBGMAXAZRIA when you add an item to your bag, rather than being taken to a new page, your cart will appear on top of the page you are viewing. If you wish to checkout you can simply click the link to do so, or you can close the bag and continue shopping.

BCBGMAXAZRIA

4. Branded

Many shoppers are influenced in their purchasing decisions by the brand, and so the need to establish a strong brand is import for both online and offline selling. In the cases of stores that sell online as well as in physical locations, the website is only a part of an overall branding strategy. In these cases the website should work well with other branding efforts of the company so that customers feel comfortable on the website.

Examples:

Oakley is a well-established brand that is recognized as a leader in their industry. Their website does an effective job of working with their existing brand. It is an attractive website that stands out from many of the others that are selling sunglasses online.

Oakley

Crate and Barrel’s website is well-designed and fits well with the companies overall branding.

Crate and Barrel

5. The Design Style Matches the Products

Like any other type of website, e-commerce sites can have countless different design styles. However, when designing an e-commerce site it’s important to consider the style of the products that will be available on the site. This is a little bit more relevant for smaller stores with a specific type of product and for websites of a particular brand or company that has established a certain identity.

If the design style does not match very well with the particular products that are for sale, there will be a disconnect that exists and visitors may have a hard time relating to products and determining if it is right for them.

Examples:

Innovative Baby sells clothing, furniture and other items for kids. The design and color scheme of their website does a good job of matching up with their products, but it still looks professional and appealing to the adults who are likely to be the ones doing the shopping.

Innovative Baby

ShopRush’s website has a trendy look that fits well with its salon products.

ShopRush

6. Showcases the Most Popular Products

Many e-commerce sites make an effort to showcase items that are likely to be of interest to visitors, obviously with the intention of helping visitors to find something that they will buy. A number of sites are using a large area on the homepage that they can use to promote current sales, new product lines, or whatever will generate interest. On theses sites, this area will often be updated frequently, or it may include some type of slideshow.

Examples:

In the image below you will see that Eddie Bauer uses a large portion of the homepage to promote an end-of-season sale. There is a very large image and links to sale items in several categories: men, women, bags and gear, and white sale.

Eddie Bauer

When you click on “Girls” at TOOBYDOO, you will arrive at the page shown below. There are links on the left to specific types of products, but a large portion of the page is used for promoting popular items. A large image of a specific item is shown with a link to buy the product. There are several different products that are promoted in a rotation.

TOOBYDOO

7. Promotes Related Products

One of the keys to a successful e-commerce store is the promotion of related products that the customer may also be interested in. Sometimes you will see related products listed and shown on item detail pages, and other times you will see suggestions being made after adding an item to your cart. Promoting the right products that buyers are likely to be interested in is key regardless of the approach that is used.

Examples:

When looking at the detail page of a comforter on The Company Store, visitors will be presented with related products such as cleaning and storage products. This is an excellent example because someone who is going to buy the comforter may easily be influenced to add on these other products to take care of their original purchase.

The Company Store

PacSun shows related products to the right of the screen on product detail pages, where they will easily be seen by all visitors that are looking at a specific product.

PacSun

8. Effective, Accurate Product Photos

Selling online is different than selling in a physical store because the buyer cannot touch the product or see it in person before making a buying decision (unless they have seen it somewhere else). Providing quality photos that accurately portray the product can help to overcome this challenge and can make the buying decision easier on visitors.

Examples:

REI includes many different pictures of products, in this case a tent. The pictures show the product from several different angles and stages, as well as packed up. Potential buyers will be able to get a very good feel for the product based on these photos, and not buying it because of a fear of the unknown is much less likely than would be the case without as many good photos.

REI

Armani Exchange includes product photos from all angles so that potential buyers will not have to assume how the back or sides of an item will look.

Armani Exchange

9. Effective Site-Wide Search

Although navigation is critical for making it easy on visitors to find what they want, there is still the need to allow them to search. Some visitors will still have trouble finding a specific product even with good navigation, and with larger e-commerce sites it may often be more feasible to simply do a search than to move through several layers of links. The type of search and the amount of options that should be offered to narrow the search should be based on the size of the site and the items that are available.

Example:

At Lee, after choosing the type of product you would like to look at, the left sidebar will include some advanced search options that will narrow down the products being displayed if you are having trouble with the items that are shown.

Lee

What’s Your Experience?

What items would you add to this list of characteristics of well-designed e-commerce sites? Your comments could be based on experience designing an e-commerce site, or from the perspective of a visitor/shopper.

Other Posts from E-Commerce Week:

Published July 29th, 2009 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

54 Responses

Comments are now closed on this post.

  • Sean, July 30, 2009

    This first thing I ever look for on e-commerce/shopping sites is shipping details, and its not easy to find on every site

  • Anthony Proulx, July 30, 2009

    Great post, lots of valuable information on creating clean, attractive, and precise shopping systems.

    Thank you.

  • Nardyello, July 31, 2009

    One of the most common problems I have on many eCommerce Websites is finding information about shipping, such as when items are usually sent out, delivery time, and other info.

    We all want to be assured that our purchase will be delivered to us as fast and as safely as possible.

    Great points on the post. Clean and simple sites are the way to go =]

  • preston web design, July 31, 2009

    A wonderful inspiring post. I think ecommerce are the most difficult pages to design, it depends so much on what you are selling. People are still scared of the internet, its so important to have a viable phone number and address – somewhere where a human is for people to talk to!

    —and NOT and 0845 number :-)

  • Cody, July 31, 2009

    Awesome article. I wish every e-commerce store would go through this, it would make the consumers life a little easier.

  • Evan Skuthorpe, August 1, 2009

    Very nice examples!

  • Ron Morrison - ronsmap, August 2, 2009

    Thanks I learned a lot from the article. I did notice that you didn’t elaborate on site visitor preferences with types of techniques. For example, full text, faceted, guided navigation, etc. While I’m sure that the type of product and volume of products that at site has as well as the technical capacities of users are major gating factors re: the type/technique of search; it would be interesting nonetheless to get your comments/input and even research.

  • Dzinepress, August 2, 2009

    really beautiful list. thanks

  • Tips, August 2, 2009

    its amazing e-commerce area. What i liked most in this post is that everything is specified clearly in this. there are no doubts raised in my mind after reading it. these examples are very nice. good luck…

  • Black Katz - rent in London, August 3, 2009

    I find many sites allow navigation and search which is great, but I want to search within the navigation too. For instance for a clothing website I may know I want a denim skirt, but I neither want to search for all Denim items, or all skirts, and often using the Search you get all terms matching, whereas if you could navigate to Skirts and then search for denim you would narrow down the choices effectively.

  • angkasuwan, August 5, 2009

    some of the best ecommerce sites

  • Ranu Jian, August 6, 2009

    A friend of mine sent me the link to this post and now I’m addicted to your blog. This was a great post….

  • download xbox 360 games, August 7, 2009

    That was really awesome.

  • Chris Billingham, August 10, 2009

    ECommerce – Can anyone recommend the best SEO friendly shopping cart solution. I want to get a comprehensive shopping cart that will allow me to do the SEO work as needed when adding products.

  • Henri, August 18, 2009

    I absolutely agree with this article. Especially the section one about navigation. Most of the people give up on the website if they don’t find what they are looking for in a few clicks and won’t ever come back.

  • web design + seo missouri, August 18, 2009

    Props to the shoe guru! Nice design…. I found myself starring at the shoes like I was really at footlocker or something.

    Great article guys!

  • Bay Area Web Guy, August 19, 2009

    Promoting popular products is good, but showing related or similar products gets better click-through in my experience.

  • Vandelay Website Design, August 20, 2009

    I agree that promoting related products is a good practice, it was actually listed as the next point.

  • jaya, August 23, 2009

    hmm.. how about my site http://www.sahabatmuslim.com ? any one help me, plz

  • Paul Olyslager, September 10, 2009

    Nice article indeed and i wish to add something. I’m working for a small company in Barcelona and our biggest client is esprit. This is in my opinion not the nicest looking website but it does work. We are really proud that this website is having the biggest revenue in the clothing/fashion business and that comes of hard work and a lot of testing. Some other features on the website that we are thinking of: send to a friend, wishlist, buy by budget, search by filter, … About the navigation: it is really important that the visitor can buy an item with only a few clicks. The amount of clicks are constantly monitored and we try to reduce them as much as possible.

  • Suresh, September 15, 2009

    Nice work, will surely get some ideas wwhen I start my work with an e-commerce site. thanks

    Suresh

  • sinema izle, December 7, 2009

    clothing/fashion business and that comes of hard work and a lot of testing. Some other features on the website that we are thinking of: send to a friend, wishlist, buy by budget, search by filter, … About the navigation: it is really importa

  • mert, April 7, 2010

    how can I make the thing like on “lee” site. narrowing results

  • top ecommerce site, May 17, 2010

    Mert, what do u mean” like lee site”?
    by the way he’s one of the top ecommerce site on the web

    dawn

  • Karen, June 23, 2010

    Thanks for the article. It’s nice to know that I’m on the right track with my web site and I make improvements as I learn. I did a poll and also found ease of navigation to be most important. I won’t stay on a site I can’t navigate easily either. Take a look at my site and provide feedback if you have the time. Thanks.

  • pixelcone, June 29, 2010

    My current job is designing e-commerce website and thank god i found this site. It’s very informative!
    More Power to you!

  • Rain8 Shanghai Website Design, September 4, 2010

    This is really helpful and well thought out.We are currently develop a large e-commerce site and fortunately we have followed most of the rules in the article. In fact is was nice to see the Nike Store mentioned as this was one of the sites we bench-marked before starting the project.

    Much appreciated – I will be passing this on to our Creative and Art Directors.

  • Agate, October 26, 2010

    The Roxy site is brilliant. Thank you for this very useful post. It has given me some inspiration

  • RJ, November 23, 2010

    Mankinddog” takes it to a new level – great website and features interesting products for both canine and (wo)man. Thanks for sharing.

  • Katia, June 6, 2011

    Thanks for this article. Hope the ”quite good” e-commerce auctions pay attention to the 9 characteristics that really fit with the 9 tips and advises provided at the “the Laws of e-commerce project management”.

  • Katia, June 10, 2011

    Easy navigation at the successful e-commerce website is very important. At http://www.placebase.org you may find how it helps you attract customers.

  • Ryan Bollenbach, May 23, 2012

    Hi everyone,

    Great article, I felt that ease of navigation and checkout comments could have been a little more specific. Aside from that I have a few points to mention which I’ve outlined in this article:

    10 Tips for Building Usable E-commerce Sites
    http://boompah.com/2012/05/21/10-tips-for-building-usable-e-commerce-sites/

    There’s also some examples of e-commerce sites which are different from the examples you’ve provided. Please let me know what you think :).

    Thanks.

  • Pamela Alford, January 15, 2013

    Do you happen to know what shopping cart pottery barn uses – or if it might be custom built? Curious, as I have a client that wants the “pottery barn” look to a certain degree.

    • Steven Snell, January 15, 2013

      Hi Pamela,
      No, I don’t know what Pottery Barn is using. Sorry.

  • Donna Tschopp, April 3, 2013

    I am creating another website for ecommerce activity that is for monthly subscription for members with passcode to view exercise training videos (60 vids) I am having a heck of a time finding a CMS and payment service to support this creation. Do you have suggestions? Much appreciated,
    Dangerous Donna

    • Steven Snell, April 3, 2013

      Donna,
      It sounds like you would have to use a membership platform like aMember, Wishlist Member, Restrict Content Pro, or one of the other WordPress plugins for running a membership site.There aren’t as many decent options for membership sites as there are for general ecommerce sites.

  • Richard Eldridge, June 3, 2013

    Donna,
    You want to have a look at Business Catalyst from Adobe. You can create membership sites on there, with monthly subscriptions and videos etc. It integrates with all the main payment gateways.

    Take a look at http://bcgurus.com/hero for an example. It’s built using Business Catalyst, and has training videos about how to create websites using Business Catalyst! Some videos are available with a free account, others you have to pay a subscription for.

    Thanks,
    Richard.