Designing E-Commerce Sites Learned From Real Stores

Article Overview

Designing an e-commerce website is very similar to the way in which a retail shop has been designed. You can learn a lot from the way the big retailer’s design, (especially the big US chains) and fit-out their stores.

In today’s online world where everyone has an opinion on what makes an eCommerce site work and what doesn’t, it’s hard to make the right choice.

The trick here is to sit back, look at the bare basics and make sure that these are done correctly. Simply put, an eCommerce online store isn’t too dissimilar from a retail brick n mortar store.

The following article will highlight, how incorporating the elements of a physical store can be adapted to your eCommerce store making it a great online experience – all these means, greater sales and online visitors for you!

We need to break your website down into all the main pages. On the home page, the category page, the product page and the checkout page you can see the similarities.

The home page is like the storefront, the category pages are like the aisles, the product pages are like your products displayed on the shelves, and obviously, the check out page is the check out process.

THE SHOP FRONT: Let’s start out with the store from which is the basis for the home page. In terms of the branding for the store, you can see in most shop fronts the brand is present but does not overpower or dominate the store’s landscape. So whilst branding is important, your products are the things that need to stand out and this is true of the eCommerce website. Don’t focus too much on the logo, emphasis should be placed on the products and how they appear on the website. Remember, people are coming to your site to make a purchase and they need to see what you are selling instantly – keep the overall clutter and internet noise to a bare minimum.

The second area is an inviting display. Your shop front needs to be appealing to get passers-by interested, the question here is how to make this display inviting for your audience. Are they young, old, retro, funky, there are so many types of consumers that you need to cater for their tastes. Who are your customers and what type of display’s do your think your shop may need? Older, more mature audiences may want a cleaner looking store, whilst younger more youthful markets are happier with a lot of clutter and distractions. The same goes for your eCommerce website. Appealing to varied audiences will determine, how your home page looks in terms of font, colours and imagery. Remember the design of your home page will set the tone for the rest of the site. For this reason, be very careful in how you design this page as you do not want to alienate or lose customers. Design for your audience, but keep certain elements generic.

In terms of navigation, many stores will have a clear point of entry into the store and it will be very easy to make your way around the store to browse. The same goes for the website. Easy navigation will make the buying process easier and therefore more sales. Impressions count and if the navigation is easy, the customer will be a lot happier. Make all clickable links large, and easy to be seen. You don’t want to make the user think too much.

What you need to remember is that people are on your website because of your brand and not your product. Therefore, you don’t want to overkill the user experience with too many products on the home page. Teasers are great and small snippets of products are a good way to entice users. But, overall keep the home page generic and let the user make their decision whether they are interested in progress to the product pages. So if you have a clothing site, for example, you might have featured images and below you may have wools, knits, hats, jackets, socks, to show your variety. But remember, keep it clutter-free and use white space without too much animation. The focus should be a balance between your branding and your products.

So to recap:

The storefront is your home page and it should have:

  • balanced branding
  • the style for your audience
  • take care with what you feature
  • easy to navigate
  • show your wide range
  • clutter-free.

THE AISLES: This is similar to your site structure. You need to find the main categories and put these in their respective URLs. This is because a cleaner site structure and layout, like the aisles in a store if presented cleanly, will lead to a better shopper experience. One point to note is the checkout process. Like any store, it is easy to find where to checkout. The same goes with the shopping cart. Make this button as easy to find as you can and limit the hurdles in the way of this check out process. This is where you make your money so it has to be accessible from all site pages. Read more from PayPal at 6 ways to reduce shopping cart abandonment.

Main points for you to consider:

  • categorise products neatly
  • checkout should always be in view – perhaps in the top right-hand corner with an icon ( a cart)
  • give the customer an overview
  • DON’T make them explore – you want them in and out as soon as possible.
  • Keep it as clean and simple as possible.

PRODUCT DISPLAY pages are similar to your product pages. Typically like to try your products before they buy ( think the Apple store) – essentially the shopping experience in a store like this is awesome – hence its success. Online, however, customers are unable to feel and test your product. So you need to recreate the in-store shop experience as much as possible. So imagine you are selling a new laptop. At the retail level, the customer can pick it up, turn it on and have a play around. Online, you need to offer a similar experience, except for the physical component. You need to be able to have 360-degree viewing, close-ups, zoom outs etc etc. make people feel as though they are really interacting with the product. The price if it is discounted should show it with a slash in the price and really highlight it. A good product description area is vital as well. Don’t make the consumer search online for this information as they may end up at a competitors website. Also, list product benefits and important features. Think about useful product information ( washing instructions for clothing, health benefits for food ) and highlight these on your product page.

As a summary for your product pages:

  • multiple product images
  • clearly display price/discount
  • clear and to the point description
  • additional details


Think of this as automated and fast, but if there is an issue then help is never far away. In the retails shop you have a person there who can help and online you should offer a live chat feed if there is an issue or a clear contact form to handle any check out sales issues. Put the customer’s mind at ease that if they are going to but from you then there is a real person at the other end who can help.

You will note in some shops they have candies or magazines for those impulse buys. Yes, we are all guilty of it. The same goes for your shopping cart process. Once they have made the purchase you may like to have alternative product options pop up for the online consumer before they exit the site.

So Remember for Check Out Pages:

  • Make it easy
  • Make it clutter-free
  • Upsell if appropriate – for your target market.
  • Trust is the key – third party logos are ideal.
Button: We'd love to work with you
Scroll to top