How to design a shopping website for easy content discovery

Sankalp Waingankar lists some best practices for designing shopping websites that are user-friendly and make it easy to find exactly what a buyer is looking for.

Many web designers that I have come across in my career have a habit of focusing too much upon aesthetics. Most of the web designing community forums are replete with discussions around tools, color palettes, Photoshop, icons, etc. One must not lose sight of the fact that the role of a website has changed over the past few years.

Websites are no longer put up for merely disseminating information. They are no longer supposed to act as mere digital ambassadors for a firm providing information on its products. They are required to invite, incite, and seduce the user into using his credit card to purchase something. Along with this change, the role of a Web Designer too has evolved. When I interview Web Designers for freelance consulting assignments or for full time employment, I always center my questions less around aesthetics and more around how they help the casual surfer to make a purchase decision,

Of course, it all depends upon what the website is meant for. What I am writing here is not relevant to those designers who are merely creating a website for a firm. It is more relevant to those designers who are creating websites or portals that have a business model behind them. More often than not, such websites survive by increasing their page views or registered users or by selling commodities or services off their web pages. For such portals, content (Content / Products / Services) becomes very important. What becomes even more important is how the surfer ends up discovering this content.

Best practices for designing shopping websites

Multiple templates

We generally make multiple templates of the homepage. When a surfer reaches the homepage, we use the querystring or some other mechanism to trace where the user is coming from. If he is coming from an ad banner that you had placed on some site like TechRepublic, then it makes sense to show the IT themed home page that will highlight the IT products like laptops, mice, etc., at the top.

Banner Space

Most web stores would like to keep a broad banner space on the home page reserved to highlight either their best deals or to lease it to a paying manufacturer who is selling goods off their website. This has to be arranged somewhere right at the top.


A good menu system is essential. We have learned the hard way that classifying your products into a complex hierarchy of categories and subcategories is never a good idea. The user should be able to get to a broad category in a single click. The traditional drop down menu serves this purpose much better than a tree-based control or an accordion control. The reason for this is that the traditional drop down menu can be made to easily work on the mouseover event. The tree and accordion control generally require clicks to open the list of submenus.


Pop-up windows are not a good idea on a website. Most surfers today do have pop-up blockers enabled and hence your pop-up would anyway get suppressed.


Maintain a consistent layout across all your inner pages. This will train the user's eye. So when he opens any page his eye gets trained to look at certain corners of the page for associated accessories, related categories etc. This helps us to increase the success rate of the store's cross promotions.


Always remember that if a user can afford to buy a $100 item, he might just stretch to $110. And once he has stretched to $110 then there is definitely a chance that he will stretch further to $125. Hence, we always plot an upsell box right besides the main product whose details the user is currently viewing. The upsell box features a related item that costs just a bit more than the item he is currently studying. The designer has to ensure in his layout that the upsell box is clearly and easily visible without requiring the user to scroll.

Adhere to norms

It makes sense to sacrifice a bit of your "creative freedom" to comply with unwritten global norms. This makes the application more user friendly. For example, most shopping portals in the world always have the shopping cart icon in the top right corner of the website. It makes sense to adhere to this convention to make it easier for the user to find it.

Details page

When the user clicks on a product link to look at the details, he has expressed interest in buying it. This product details page has to be carefully designed to avoid unnecessary distractions and irritating postbacks. No pop-ups should be placed on these pages. Also, all possible information that the user would need to know about the product should be ideally presented on that single page. If the information is too much, do consider organizing it into tabs. But these tabs should be javascript driven such that when the user switches tabs, it should be without a postback.

Background colors and images

Avoid using background colors or embedding background images in your web pages. A shopping portal has to showcase a multitude of products of different colors and hence you never know which background image or color might just form an unintentionally funny pattern or have an intrusive effect on your webpage.

The presentation, organization and layout of content is extremely important in a shopping portal. The web designer has to carefully design the pages to aid content discovery. This will help you maximize the sale on the shopping portal that you are designing. I hope the tips out here are of help to you.