E-commerce Website Development Part 2: Main Page & Navigation

In this article and subsequent ones, we will describe functional modules, inherent to the world’s top online stores, as well as analyze the interface in detail.

The online store as a structure can be divided into two parts: front end and back end. The front end – the external part is seen by everyone, this is the place where the users dwell and the purchases are made. And the back end – the internal part, where these purchases are processed, except for established owners of online stores. Even developers very rarely know what should be there. But no major online store can exist without a serious internal accounting system.

Front-end

For a proper design, you need to start by defining the goal. So, the main goal of the external part of any online store is to maximize conversion. Why  “conversion” and not “sales”? The sale, in this case, consists of several important components: 

  1. Marketing; 
  2. Front-end – the essence of this article, the part, that strongly affects conversion; 
  3. Back-end – the correct organization of business processes. 

Thus, the external part strongly affects the conversion rate, but sales depend not only on the quality of the website. If you are ever going to make your own online store, we recommend taking into account all 3 points above.

In general, the external parts of all major online stores are look-alike, at least in terms of the visual composition and purpose of certain parts. There are quite a few different ways to increase conversions and other tools for related purposes. Stores often choose only between the options for implementing these methods. But, even taking into account the fact that there are a lot of standard things here, it was still possible to systematize it in units. We break all this information down into logical blocks below and present it systemically. At the moment, we have counted more than 50 functional modules that strongly affect the conversion rate. In general, there are a thousand smaller ways to increase this important indicator, and every year, with each new study, this figure is growing rapidly.

Product Catalog

One of the most significant functions of any e-commerce website is a catalog. This is the first place most users visit before making a purchase decision. We will talk about such things as emotional purchases separately, so now our main aim is to create a convenient catalog for those who are not ready to make instant purchases and want to walk around the store.

Each store’s catalog is unique, both product groups and the products themselves. Therefore, any design team immediately puts up a question – how exactly to group products correctly? It is usually a near-impossible task to simply put a supplier’s catalog on the website as it is. Most often, these catalogs are complex and incomprehensible for the uninitiated. So we need to make sure that any user intuitively understands where certain products can be located.

First, you need to find out how many items are in the catalog and get the existing grouping of these products. Most often, in small and medium-sized stores, the catalog does not exceed 10 thousand items, but if the client has more than that, this is a large store already and this will affect the choice of a platform in the future. After finding out the quantity, you need to understand how and where the goods as information are stored. Typically there are 3 options:

  • If some external CMS is used, we will need to integrate this accounting system with a store and automate the information updating.
  • If the products are stored in an Excel file, you will need to study it through and bring them to the unified view – headers, characteristics, data format, etc. And then set the functions for automatic processing of the price list and parsing data from it. So if the store owner updates the price list, information on the site will be instantly updated after that.
  • In particular cases, there is no accounting system or price list, and the only option that remains is the manual processing of information. But this is acceptable when there are up to 100 products and the information does not change often. In other cases, it is better to focus on storing information in a good accounting system.

Of the three options for storing info about goods, the most effective for further work is a full-fledged accounting system, so if possible, you need to bring your client to it. After receiving information from the client, all products should be divided into logical groups that people are used to. It is very important not to force users to think where what products are! Ideally, take product groupings from some popular price aggregator or large online stores as a basis. They have already  “invented a bicycle”. Separately, we recommend thinking about simple names for product groups. Designing is largely copywriting. 

And don’t forget about dynamic product groups which appear and disappear throughout the year. For example, special groups can be created for holidays: products for Halloween, Christmas, New Year, St. Valentine’s, International Women’s Day, and so on. Ideally, they should also be displayed in the catalog and highlighted to increase sales of certain products for the holidays, so you need to provide a place for this in the interface. 

Then you need to embed these product groups in the site interface. If we don’t have a lot of categories, then you can make a horizontal menu. Despite the nowadays tendency to create a vertical nav menu on the left, a short and well-placed horizontal menu will look good. Short means, in particular, no more than 7 pieces. More pieces can negatively affect the user’s perception – the user pays much less attention to the last product categories on the right and this negatively affects the conversion rate. If there are more items, then it is better to make a vertical menu on the left, as Amazon does. In any case, the menu will be drop-down, ideally two-level, and in rare cases three-level. More than 3 levels of the catalog is a bad idea because it’s too hard to design, develop and navigate as the result.

The appearance of each product in the catalog should be unified. However, each product has its own set of parameters. The following question immediately arises – “What should we show in a short preview of the product in the catalog?”. There may be several options. The simplest one is to show a photo, name, price, and buy button, which should be easily replaced by the “Add to watch list” or “Notify when available” button if the product is not in stock. But today this may not be enough, there could be a lot of products, and the users should make a notional conclusion about which products they might be interested in when viewing the catalog. Simply put, the catalog should be intuitive and hint to the user. Therefore, the product catalog often additionally displays the rating, the number of reviews, and the main product parameters in order not to overload the interface. You can show more information when you hover over the product preview. It is very important not to overload the interface with information. It should be enough to get customers interested, but it is not necessary to show everything about the product. The interested person will go to the product card or, at least, add the product for comparison.

If there are more than 20-25 products in the catalog, make a page switching (pagination) at the bottom of the list and put the function of controlling the number of products on one page in the interface (10, 20, 50, 100). It is better not to show more than 100 products on one page, as it will take a long time to load up. Each page should have a static URL, which will benefit indexing. In addition, it is good to give the user the ability to choose how many elements to show on a single page. Alternatively – you can dynamically load data when scrolling down, but this can overload the user’s browser and is bad for indexing by search engines.

In addition, the catalog should have auxiliary navigation tools: faceted navigation, related product groups, promo materials, navigation through brands, help in the form of tips, reviews and articles, popular products, the ability to view the catalog in tiles or a list with extended information, and other important elements. In the catalog, the user should understand everything straight away. The catalog should push users to either buy immediately or go farther into the product page. Using custom sales promotion tools we can and should manage customer attention to sell the most profitable products.

The basis of online store navigation is the primary menu, catalog, and search bar. First, you have to define what will be on the main menu. Typically, the main menu consists of the main product categories of the catalog. As said earlier, if it’s possible to group all products into nearly 5 main groups, then it is better to make a horizontal menu.

But if there are more groups, then it is better to make a vertical menu, on the left side of the page. Almost any product catalog has main groups and subgroups, so our menu will be a drop-down menu. But, again, don’t make more than 3 levels of the drop-down menu. And even then try to limit it to two levels.

In addition to the main menu, stores almost always have an auxiliary menu up top – links to informational pages, like “About”, “Delivery”, “Payment options” and “Blog”. It is usually located above the search bar, at the very top of the site page.

Another important element that simplifies interaction with the site is “breadcrumbs”. The customer, while browsing, should always be able to see where he/she is now relative to the website structure. The “breadcrumbs” perfectly solve this problem. In the interface, the path is usually located under the main menu with a left alignment. 

In many online stores, product cards have tags. They can play the role of auxiliary navigation and can also be used for SEO purposes. Typically, tags are written in a string, separated by commas, and it’s recommended to have no more than 5-7 of them.

And don’t forget about the site map. This section is primarily needed for indexing by search engines. Users hardly use it anymore. In the interface, Usually, it’s placed as an inconspicuous link in the site’s footer. The page itself is a structured list of links to all pages on the site, up to 300 links by page. Typically, the section is generated automatically.

Faceted navigation and filters

A fairly important tool that allows users to navigate large catalogs. Nowadays, one e-commerce website can have thousands of products with a huge number of parameters for each. Browsing even through one single product group, that contains 1000 products, the customer can get confused. However, each customer has certain expectations, their own set of parameters that they want to see in the product. Faceted navigation allows the customer to filter out all products according to the parameters that they want.

All product groups from the catalog need to be divided into different subgroups by parameters. For each product group, they will be different, and for some groups, for example, household appliances, there may be dozens of them. So, it’s important to pick up the most useful ones. The simplest and the most common filtering is: by price, brand, size, weight, color, material, and so on. These are general parameters that apply to different product groups, but individual groups often require unique parameters.

In the interface, faceted navigation usually occupies one-fourth or one-third of the screen and is located on the left side. All common parameters are visually grouped. For example, screen sizes are grouped in one paragraph, and each parameter has a number of the products next to it. If there are no products of some parameter available now, this parameter should be made non-clickable.

The interface itself needs to be made dynamically loading. The page should not reload when the user selects or deselect some new parameter. Such a feature is convenient for the user, but there is also a disadvantage: SEO is not taken into account. You can go an alternative way and make a page reload for each parameter while creating a unique URL and title. Then this page can be indexed by search engines and appear in search results such as “Sony TVs, 50”-55”, 3D, Dolby 5.1”.

This is another mechanism, that is based on the psychological characteristics of customer behavior. People care about what others buy, and people care about trends. Consumers are always more confident about purchasing popular products, those, which are approved by the majority. To use this feature, special tags and entire blocks of “Popular products” are implemented. Almost all the largest e-commerce websites have popular products and new products on the main page.

Firstly, products don’t just become popular. The most viewed or purchased products from the database are filtered into a separate group. Or these products can be chosen for special advertisement. In one way or another, these products deserve the attention of the audience. The group of these products is shown in a separate block on the main page or at the bottom of catalog pages. In this block, you can place from 5 to 20 products. More products will be hard to place harmonically, or the scroll will be too long. This blog should be easily customizable, to add some special settings, e.g., a plugin for displaying personalized recommendations for every customer.

Technically the same function is performed for all the new products – sorted by adding date, the freshest products with a special label are shown to the regular customers. Labels have different shapes and colors so that users can easily distinguish them visually. They are usually located in the upper-right corner of the product preview or the main photo on the product card. Naturally, this happens automatically after the manager has entered the appropriate settings in the store’s CMS.

Digital Merchandising (product ranking)

Today, almost any offline store thinks about how to properly lay out goods to maximize sales: products for children on the bottom shelf, at kids’ eye level, popular brands in the center to stimulate sales, separate branded stands, etc. All these tools are now available in online stores too. To be more precise, there are even more diverse and detailed than in offline stores.

For starters, you need to collect and store statistics for all products. Typically, this data can be collected and analyzed automatically. One of the most popular and obvious tools for collecting is Google Analytics. The store cares about: profit margin, popularity, conversion rate, and so on. Based on the received data, you can dynamically adjust the catalog to the user. For example, if a user has selected the category “Monitors” in the catalog, he/she should see the products with the highest profit margin for the store first, which also have high conversion rates. This way, the store will be able to maximize sales and net profit.

You can decorate individual product cards or even entire categories to encourage sales of a particular brand. In some cases, the entire site background is branded. In merchandising, you can go further and adjust product groups based on information about the user’s gender and age, if you have such data, and the store knows exactly what to show to a particular age group. Here, again, you can divide people into different groups and think through certain rules for each of them.

Online store sites are becoming more complex, the number of products is increasing, and people are becoming lazier and lazier. Being set up properly, this feature alone can significantly increase your conversion rate.

In the interface, the search bar should be noticeable, visually highlighted, and placed on the site’s top place. The study of numerous successful online stores shows that typically the search bar takes one of the central places on the main page. It looks very simple: the input line and the “Search” button, a less common – dropdown with the selection of a category or a hint with an example request under the form, and a virtual keyboard.

When you enter a query, suggestions from the product database should be loaded automatically. Maybe even include small brand icons or small product photos, so they will help the user to comprehend. There should be no more than 5 drop-down suggestions if lines are medium-sized, or 10 if small-sized lines in total. The hints themselves should not contain any other information other than products, and you should not distract the user’s attention.

Also, it’s a good idea to add prompts for the user’s query on top of the product hints to show what other customers have searched. And if the user types in something, that could be attributed to various categories, it’s good to show which categories the products on this query can be found in. For example, the customer types “Asus” in the search bar and as a result, gets such a dropdown:

  • prompts with popular queries – “Asus laptop”, “Asus monitor”, etc.;
  • hint with categories – “Asus in Laptops”, “Asus in PCs”, “Asus in Computer parts”;
  • hints with links directly to the products with little photo previews.

On the page with the search results, products should be displayed in the same way as in the catalog, with the characteristics, photos, labels, and buttons for quick purchase. Sometimes there may be a lot of search results, then the catalog tree can be displayed on the left, as a whole column. Next to each category and subcategory name, in parentheses specify precisely how many products in this category can be attributed to the user’s request. Under the catalog on the left, you can display other common parameters of the products the user is looking for. In addition, the search results should be able to be sorted by price, popularity, adding date, by year of release, and so on. 

At the very end, you can ask users if they are satisfied with the search results. If not, offer to chat with a consultant or use the “FAQ” section, which should describe precisely how to use search for inexperienced people.

Contacts

This section of website development has little to do with the interface or business logic, but is extremely important for sales and conversion, and, therefore, we must take it into account. To win customers’ trust in the online store, there should be a lot of different ways to connect with you. The main contacts used for the sale – phone or several phones, as well as an online chat – should be on each page, ideally in the site header.

To avoid overloading the page with information, the header should show the main phone number for the buyer’s city, if you have several, or the universal one. It could be implemented in the interface as a drop-down list, when a user clicks on it, they can still see the phone numbers within different networks. When a phone number is selected the first time, the site automatically remembers it for this user. In addition to phones, you could add emails, link to online chat, feedback form, and possibly links to popular messengers in the dropdown. If you have only one address, you can place it in the upper line of the header near the phone. If you have an office, showroom, shop, or warehouse address, you can make another drop-down if you have a free space in the header. But, a concise choice is to place a list of addresses on the “Contacts” page. Ideally, on the contact page, you should describe individual phone numbers of departments: sales, warehouse, management, HR, etc. Also, your main address must be placed in the footer of the site, it inspires confidence. 

Online chat

While shopping, we usually ask for help from store consultants. We want to know where to find one or another product, or if some particular product is available. Speaking of e-commerce websites with a wide variety of products, any customer could use some help as well time to time. Hence, you should consider adding an online chat. Many online stores use third-party services for this purpose, which is cheap, but not always the best option. If you are building a custom website, we would advise you to create your own online chat to be able to link the message history to specific users and directly to their profiles in the CRM. It seems to be a common thing for everyone – when you log in to the chat, you’ve been asked to fill name and email address. The chat itself should open in a box on the right, has a text input form, and a “Send” button in its simplest form. After completing the chat, the buyer must be asked to rate how useful was the consultant from the store. 

Call from the site

In the interface, this feature is usually represented by a button, along with the “Online chat” button, which opens some service for calls or a form, where you input the phone number and the store manager will call you back. It is better to place the button somewhere in the site header. To use the function, the user only needs a browser and a microphone. From a software point of view, making this function from scratch will be quite long and expensive, so here we recommend using a third-party service. 

At this point, we end the discussion of the online store’s main page. In the next article, we’ll talk about the product picture, product demonstration, “follow the product” and availability, one-click purchase, purchase on credit, reviews, product ratings, modifications, wishes, and many other useful modules. Stay tuned!

 

This article is an adaptation of the huge article series about e-commerce website development by M.Semenov and SECL Group.