Designing e-Commerce service is one of the largest challenges of a web designer or the person who is responsible for UX / UI. During designing portfolio, the site dedicated to some event or luxurious product we have much more freedom. In designing an online shop, the support its after-sale service is the most important. This is the profit which is the basis to maintain the e-commerce service, therefore the shop „is to sell in the first place”.

Before you start designing an internet shop

Einstein is thought to have said that:

This quotation suits one of the key issues in designing the e-commerce service or the necessity to define the needs and problems. On this stage the client himself pays a big role, who knows his products best and his target group. We should take into account the suggestions and remarks of the shop owner but always through the prism of the final client – the service user. This is he who must feel freely on our site in the first place.

Many internet clients entering the site only checks whether they will get interested with something, whether a given shop has something for them to offer. The decision whether to stay on the site is made sometimes within a blink of an eye. The challenge for the web designer is to design the service in this way so that the visiting clients:

• devote time to familiarize with the offer
• make a purchase
• return to shop in the future.

How to design a converting home page of the shop. Home page is the image of our service. Hence, special attention is devoted to the best design thereof. Depending on the nature of the goods, it will look different.

In shop with clothes we will stand up, first of all, on exposing the assortment, large photos, interesting arrangements. The shop selling small spare parts for white goods will focus, first of all, on functional possibility to search for a proper replacement.

Certainly, there is no one general template of a shop which would suit each case equally well. There are certainly a few good practices which we can be treated universally.

Logo, panel of the client, cart, namely the basics

At the beginning – logo. In a way obvious, but frequently neglected. Entering a shop site, the user must know at once where he is. A logo is an element which identifies the shop, therefore it should be visible and in proper resolution. Fuzzy, out of focus, „blurred” or placed against the background, look unprofessional.

A visible panel of logging and a cart, these are the next “must have” of the internet shop. A good practice is marking (by means of a color, digit, value of the cart) or the cart is empty or not. It is worth remembering about exposed search engine which may be one of the key elements of viewing the shop offer, depending on the nature of the product.

Vertical menu vs. horizontal menu

Navigation in the service is also a strongly individual issue. Basically, there are two conventions accepted:

• horizontal menu
• vertical menu

An advantage of the horizontal menu is its visibility just after entering the site. It does not occupy much space, appears in majority of services, so the user will get used to it. On the other hand, however, its system forces a limited number of categories, and their names should be short and coherent.

In the vertical menu, we have at our disposal much more space, due to which we can create next levels of navigation. Lack of carefully thought structure may however result in a chaos, which is followed by, less intuitive navigation for the user. With a large number of category in the vertical menu, it is much more difficult also to distinguish certain significant links.

Take care for proper reception of your shop

While viewing the shop, especially if it is extended, breadcrumbs can be of help. The so called “breadcrumbs” create a path of navigation which in a simple manner allows to define for the user where he is and take him back to the site which interests him.

Another significant issue, from the point of view of designing both the shop and other internet services, is a selection of proper fonts and colors. We should take care not to have too many fonts in our shop. A good practice is a selection of two leading types – a simple one, legible for texts and the other one with which we will distinguish headings, significant slogans or prices, for example. However let us remember that both fonts should be legible, first of all, To emphasise significant issues, we can use different thicknesses of a font, but also here we should not exaggerate. Many fonts offer a few thicknesses. However, let us remember that each thickness, event of the same font, is a separately downloaded element on the site. Their number affects not only general perception of the site but also its effectiveness.

The issue of colors in an internet shop is a result of many factors. Some brands possess brand books or even a basic book of a mark. A leading color on the site may be sometimes imposed „from above”, due to the necessity of preserving coherence of the shop with visual identity of the brand. Nonetheless let us remember that certain issues such as „To the car” button, promotional prices, significant slogans, e.g. menu should be distinguished with another color. With a proper color set we can effectively draw attention of the recipient.

Colors are not the only way to attract the eyes of the user. In stationary shops, the most interesting products (or rather those which the sellers want to suggest to us) are often at the height of our sight, in easily accessible places or near cash registers. Similar procedures are used in e-Commerce sites.

The products which we want to distinguish usually will be placed by us high on the site so that there were noticeable just after entering the site or after small site scrolling the site. What attracts sight of people are… other people. The pictures which present people – the best with the sight directed forwards -attract more that the pictures of the products themselves. The application of icons and slogans is another good practice. “Promotion”, “Supply within 24h”, “Secured payments” attached with an icon, will reach the user faster than a few lines of text speaking about the same.

Remember about mobile 

It is worth remembering that presently the most popular resolution of screens in Poland is 1366 x 768. It is worth taking care that certain elements for example „To the cart” in the card of the product were visible on the said screens. Speaking about resolution of screens, it is worth mentioning that another most popular resolution refers to mobile devices. In January 2016 this parameter was 8% of share of all devices and a year later in January 2017 -already above 16%. Such a dynamic increase shows that a larger and larger number of users use mobile devices. While designing our services we must take into account the necessity to adjust the project to their needs.

Designing the purchase process

All the issues mentioned above are extremely important. In the end they will decide whether the user finds something for themselves in the offer. But what about the finalization of the transaction? Not each is completed with a success, and the main reason is usually badly constructed order form.

None of us likes filling in forms, therefore it is worth taking care for it to be as simplest as possible. A frequent practice is forcing the user to set up an account through an inability to finalize the order without registration. A majority of us like an imposed order, therefore allowing „purchases without registration” is a good idea. So called „fast shopping” allows for purchase with minimum formalities. If we decide, let us have a possibility to place an order without the necessity of registration, let us remember to enable to establish an account at the end of the transaction.

The purchase process itself may be designed by us in two ways. A system of next steps, namely passing on to the sub-sites in order to fill in data necessary for finalizing the transaction, this is one of the most popular solutions. It is worth remembering that these steps must be as few as possible so as not to extend the process artificially. The other option, namely one page, is based on such a construction of the sub-site so that all necessary data was visible at once.

Both in the first and the second case we should take care that all field of the form were definite and messages (e.g. on wrong data) obvious. We may not leave a space for doubts. Unfortunately, contrary to the stationary shop, where we have a direct contact with the client, here we are able at once to explain his doubts. The client will, in the first place, resign from the transaction and will search for another product in the offer of another shop than he shall be uncertain. A good practice is also adding a fast summary of the order at the end of the transaction – a value of a cart, costs of supply, any discounts.

Let us remember that each action of the user should have a reaction from the service. Therefore it is worth designing the site with thanks for placing an order, attach it with a possibility to add opinion. Such a feedback may be often very helpful. Maybe we omitted something, on some stage some element is not intuitive. Due to the opinions gathered we are able to correct functioning of the service and at the same time increase sale.

Work does not finish with designing

Improving an internet shop means facing the expectations of its clients. Its is important both improving the offer of the products and functionality of the service itself. The opinions mentioned and other type of feedback from the clients are not only sources of information which we can use to improve the service.

Also heat maps can be of help which are the tools registering behavior of the users on the site. They allow to understand in what way the clients move around the shop, what are the strongest indices of visitors’ motivation what are the weakest points. During introducing modification it is worth relying on something more than just intuition. “It seems to me that this will be better” is definitely too little to be able to say that a given solution will prove itself. Even if we are convinced about reasonability of introducing a change, it is worth asking (even a few persons from the closest surrounding) what they think about this.

The e-Commerce service is assumed to be directed to a wide group of recipients. Even with the very approximate target group of users, we may not assume in advance that a given solution is perfect. While introducing a specific change, the A/B tests can be helpful where we compare two alternative versions for one variable. As an example, in one of the shops we tested the location of filters on the site of listing. The A/B tests showed that placing them on the left from the products would be a better idea. Although in the beginning, the client thought that placing them above the products is a good idea, finally he left them on the left. The A/B tests allow for making decisions fast and they are easy in interpretation. In this specific case of filters, they allowed to avoid a low functional solution in the site architecture.

The online shop is a constant work of many persons. The designing and implementing themselves is not the end of our work. The first effectively placed order is nothing more than another stage of creating the e-Commerce service. When will this work finish? This is business – basically never, it only gets started :).