Web Design Basics Design Principles An Insider's Guide To Designing Great E-Commerce Websites

An Insider's Guide To Designing Great E-Commerce Websites

AliceL Design Principles Sep 22, 2014

Unless you've been living under a rock for the last decade or so, or haven't read one of my previous posts, you are aware that ecommerce has become an important part of the global economy. From the days of the dotcom bust, when one e-commerce site after another went out of business, we've arrived at a time in history when e-commerce sales are rapidly heading towards the $500+ billion mark each year.

Online shoppers now treat making online purchases as casually as they do writing an email. Although online shopping is incredibly popular you still need to create an e-commerce site which allows you to seamlessly tap into this huge market, so I've put together a guide to help you create an e-commerce site which really works.

The Design

If you're working on a brand new site then you can design the site in almost any way you wish, or at least you can within client parameters. If you're trying to add an e-commerce backend to an existing site you may find yourself working with lots of legacy code. Where possible you need to make the visitor transition on older sites as flawless as possible, which means integrating existing design elements into your e-commerce design, or completely overhauling the existing site.

Sales Funnel


Far too many designers think that an e-commerce site is complete once the shopping cart and payment processing functions are working properly. The key to a truly successful online store is your understanding of the journey your visitor takes from the moment they arrive on the site, to the point where they enter their payment details and then complete their order. You need to map out which pages a visitor has to travel through while shopping, minimizing the number of steps it takes for them to actually make a purchase. You'd be amazed at how much money online businesses lose each year because of potential sales which are abandoned at the shopping cart stage because of a design glitch.

Product Selection

Building an e-commerce site which features multiple products versus building a site which features just a single product might seem like completely different challenges, but they're actually quite similar. Both will require their own shopping cart, SSL certificates and a payment portal of some kind. The only real difference outside that is how many items are listed in the shop's database. It's still very important to plan a single or multiple product site out well in advance however. One key example of this is figuring out exactly how many products you want to feature on each page.

Make Shopping Easy


Most of the bigger online stores show shoppers exactly how many of a given item they still have left in stock, and if the item is out of stock they give an estimated time of delivery based on when their next batch of stock is arriving. E-commerce design best practices would also have your site displaying related purchases to your visitors, so if the product they want is out of stock they'll probably be more than happy to buy a similar product, often with a higher sticker price.

Social Media

Any modern e-commerce site will need to at least feature social media sharing buttons in the design, because if you have a great design and great products you need to make it as easy as possible for your visitors to share your site with all of their Facebook, Twitter or Pinterest friends. You can also tie your online store to your online presence on Facebook or Twitter, encouraging shoppers to leave feedback or reviews on your social networking sites - these can be invaluable in generating additional sales for your business, and all without paying an additional cent for advertising.

Ask For The Sale


Anyone reading this who has even a tiny amount of sales experience will know that the key to closing most deals is simply asking for the sale. In the case of e-commerce stores this means providing what's referred to as a "Call to Action" on your product pages - literally providing shoppers with a button that says "Buy Now" or "Add to cart". This is part of the sales funnel process, but I decided to include it here separately because it's incredibly important to get this point across: Your site design must include a very clear and very easy-to-use "Call to Action", otherwise shoppers might change their mind and go elsewhere.

Don't Reinvent The Wheel

It's a wise move to look at what the biggest online retailers in the world are doing in terms of e-commerce, and then emulate their best practices in your design. Remember that they've invested millions of dollars in perfecting their sales funnel, so why not take inspiration from sites like Amazon and eBay - you can learn a lot from multi-billion dollar companies after all?


Alice Lagno

Hey all! I’m Alice, I’m a copywriter who is passionate about all things related to web design. Check out my G+ page

subscribe to newsletter