THE PROCESS OF DEVELOPING E-COMMERCE WEBSITE PART 1

In this article, you will learn about how to create a proper e-commerce website on examples of the largest online stores in the USA and China. We will describe, how marketing affects design, and show a detailed Mind Map of an online store and online hypermarket in the following part of this topic. Here you will find the description of 57 main online store modules for the external (customer) part and more than 50 modules for the internal (administrative) part of an e-commerce website. We will take a detailed look at store interfaces and other useful stuff.

If not considering the peculiarities, an online store — is just a type of website, intended for selling goods, and at first glance, it is not difficult to develop just another store with similar functionality, but different products. In fact, everything is much more complicated, and the more I learn about online shopping, the more I understand that it is impossible to know everything about this matter. Even one tiny thing in the interface can change the store’s profit by thousands of dollars, and for big players, this “tiny thing” can cost millions. This is a feature of e-commerce that makes the requirements for websites and specialists insanely high. Below, you can see an approximate scheme of typical e-commerce that will prove our statement. Do download the full-scale file — click here.

We will need a team of specialists to design such a large and specific scheme. In particular: business analysts, strategists, marketers, e-commerce specialists, UX / UI designers, as well as third-party expert consultants for individual stages, such as design requirements or technical requirements of the store’s industry specifics.

Briefing — collecting the requirements

Traditionally, design starts with gathering requirements for a future project. The main goal of the project is immediately clear — sales, as high as possible. However, in the online store, there is one very important feature that you need to find out at the very beginning: how all business processes will be organized. There are two globally different options, which will then greatly affect the design:

1. The online store is designed as an addition to an existing offline business. Therefore, the customer already has some accounting system and will either have to integrate it into the website directly or update it.
2. The online store operates as an independent business, so all business processes and software will need to be created from scratch.

Competitor research

Given the huge competition in the market, it’s a crucial step. Here, it’s more significant to know the business processes of competitors, but it will also be very useful to analyze the websites of companies with which you will have to compete in the online trading market. Since we are talking about design here, I won’t go deep into the field of industrial espionage but will focus on website research and details that we need for subsequent design.

First, you need to understand that there are direct and indirect competitors. For example, we build a regional online store, for one country. Then direct competitors will be those online stores that sell the same goods and are also “national” like us. The indirect competitors, in that case, will be a number of global giants. In recent years, the trend of blurring borders in online sales has been developing: Americans order in China, Ukrainians in the United States, and Europeans from both places. Despite wars and crises, this trend will only continue to gain momentum. So it’s not the first year when developing a high-quality online store, national players, the largest players in the near abroad, and global giants are analyzed. In my example, I consider the design of a large hypermarket, so marketplaces will also be considered competitors.

For designing the interfaces of the main pages (home, product page, shopping cart, etc.), we are interested in the functionality and marketing component of competitors’ stores. Let’s take the largest online stores from the “Forbes” magazine ratings — by the way, there are not just American online stores in it, but also world leaders.

Americans:

Amazon.com — the flagman of e-commerce in the world, has implemented a lot of innovations in this area. A nice two-level menu, opened by click, on the left can accommodate many product categories and even advertising on the second level. Large search in the very center of the screen. A large promo block that encourages sales of the most profitable products for the store. The main page shows popular products, loyalty programs, and bonus features.

Apple.com — an Apple Store. It is not very interesting for us, because of its specifics, except that we are usually fascinated with the simplicity and logic of the interface.

Ebay.com — this is not exactly a classic online store, but an auction. Anyway, it sells, so you should see how exactly. The interface is modern, with tiled products under the promo block. A large horizontal navigation menu with the main popular categories and drop-down sub-categories, and a large field for graphic elements and advertising. Just a brilliant tool “Shop by category” right next to the logo: there are a lot of products, and they sell everything that can be sold, so we don’t know what exactly the user is interested in, what category of products. This tool allows you to customize the store’s website for a specific product category.

Officedepot.com — another large online store. Three detailed dropdown menus, a big search, and a contacts block. Simple, but noticeable ad line above it. The design as a whole is already a bit outdated, so I will not dwell on it.

Chinese competitors:

Taobao.com — the largest Chinese player with a well-built C2C model. This means the site is only an intermediary in sales. The interface is in Chinese, and it has a lot of specifics, dictated by the local market: animation, a large abundance of information, etc. The center traditionally has a large search, with several promo blocks below. The principle is generally the same as everyone else’s, with only a ton of text information.

Alibaba.com — the largest B2B marketplace. The design is more western. The main page traditionally has a two-level menu on the left, a large search in the center, a promo block under it, and promotional products below — most popular, trending, new arrivals, etc.

American online stores are particularly pleasing — they are most well-developed in terms of interfaces and functionality. When designing, it is better to focus on them. In general, the analysis of the most popular modern e-commerce websites shows a huge similarity between all successful online stores. Users are already used to many things and expect to see the same everywhere. In particular, a large convenient menu, a large search, a promo block, and promotional products are common for 90% of cases on the main pages. The internal functionality is also often similar, and any successful online store uses a number of important functions, which I will describe below and in the next parts of this article. But for now, to understand what similarity I’m talking about, take a look at the simplified scheme of the common e-commerce website’s main page below.

Target audience and buyer persona

After studying the target audience, we compose a Buyer Persona for a better understanding of the goals of our online store. Thus, we can understand what tasks customers face, what problems they need to solve, and most importantly, what solutions we can offer in our online store.

[Ed.: Usually, there should be at least one BP for each group of potential customers to represent. There are a number of the in the original article. But to not transform this article into a monograph, let’s take one BP for the sake of an example. Also, we described the Buyer Persona issue in our separate article]

Tasks-problems-solutions

Tasks: buy a laptop and pay for it with a credit card.

Problems: “I didn’t decide on the brand and model.”

Decisions:

• Make filtering tools by brand and price.
• Enable online payment.

General strategy

This part is, by all means, fundamental. On the one hand, we are just starting to create a product, and on the other, we need to see very clearly the strategy of its development and final goals in order to take this into account in the design.

As we have information on the target audience and competitors, we can develop a strategy for developing our own project. At this stage, you do not need a large document of 100 pages prescribing every tactical detail. A general view of the task will be enough. It should be tailored for our target audience and take into account the niches in which competitors operate. You can use the well-known “blue ocean strategy” and “insight search” methods.

The strategy will show us exactly what needs to be emphasized in the design process. For example, if a future online store will compete with a low price — you need to emphasize directly on the site that you have the lowest price, make the “find cheaper” module, and constantly remind customers about the best price. The price is, of course, the most trivial example, I would not recommend using it at all, although it is the most common. This article is not about strategies, so I will not dwell on this in detail.

Thinking through a marketing aspect

Since we are building a store, we will have a lot of different marketing options. I will describe the part of it that concerns the design, that is, marketing, which should be taken into account in further development.

Branding and positioning

This is also one of the fundamental things that will determine the perception of the entire store as a whole. In many ways, branding is intertwined with the strategy I mentioned above. By understanding the positioning of competitors on the Internet, you can develop your own unique positioning and run it through the entire store. Every detail should reflect the positioning of the online store. This is again the correct emphasis, especially in interfaces.

AIDA

To begin with, let’s recall a great marketing model — AIDA(S). The model is very simple, its meaning is to force the user to go through 5 basic steps that will lead him to the goal we need. The model is based on the psychology of human behavior and is applicable in our case to the site interface. The interface should “guide” the user and motivate them to perform the actions we require. The model is divided into 4 main steps and one additional one: Attention, Interest, Desire, Action, and Satisfaction. The model can be applied to the site as a whole, or to individual pages. Example of using the AIDA model on the website:

1. Attention.
   On the main page, we attract attention. This can be done with some slogans, large banners, a discount proposal, a block with popular products, etc. As a result, a person goes to some internal page, most often to the product catalog.
2. Interest.
   When a person goes to a catalog or promotion, we need to arouse their interest. In this case, you can demonstrate the best view of the product or show social interest in the product, for example, with a lot of reviews). You can drive attention to an attractive price or special conditions. For example, an additional product as a gift. As a result, the user goes to the product card.
3. Desire.
   The product profile always contains a lot of different information and marketing tricks. It should all “scream” defiant desire. The desire can be aroused by providing high-quality information about the product, a promotion, a set of products with a discount, etc. There are a lot of tools here. As a result, the person should want to buy the product.
4. Action.
   Having a desire, you need to show the client a large contrasting “Buy” button or phone in a prominent place, as well as make a call to action. How to implement this step: a contrasting buy button and after clicking a pop-up window should offer to “make a purchase”, as if pressing the client, telling him what exactly he should do now.
5. Satisfaction.
   The additional step to the classic model. Don’t you think the job is done after clicking the “Buy” button? If you look at the statistics, many customers do not reach the payment or even return the product after the purchase. The client needs to be fully satisfied. First, you need to make a simple checkout, ideally in a few clicks and with a minimum of fields to fill in. Secondly, after ordering, the customer needs to call. If it’s a man — a call with a pleasant female voice, and if the customer is a woman — a man’s voice, with a smile, you can feel it from the intonation. Very politely check all the details with the buyer, and find out if he/she liked everything and if the customer has any questions or suggestions. And until the customer receives the product, checks it, and pays for it, they need to be loved and satisfied!

The user’s paths may be different, but in the end, they must do the necessary action. Moreover, even on one page, there can be several AIDA schemes: for some, the second step will be the price, and for others, the special characteristics of the product. Alternatively, a single step can be extended over several pages. But ideally, of course, focus the user’s attention and apply one step per page or one scenario per page, if the model is applied to a separate page.

I described a simple mechanism that works very well. Therefore, the same principle applies to the design logic of individual pages, especially product pages. But even this will not be enough. Before the desire to buy and the necessary action, we “along the process” must create the right emotional background for the client, inspire confidence in the store, and overcome their doubts. This should be worked out separately during the design stages.

Loyalty Program

The next thing we need to think about in marketing — is a loyalty program. There is a well-known rule of commerce: 80% of the profit is brought by 20% of regular customers. The goal of the loyalty program is to make as many loyal customers as possible so that they buy only in our store and ignore competitors, even if they have a better price.

Loyalty programs for online stores in general are almost the same as offline ones, so you don’t need to reinvent anything: just choose the right loyalty program from offline, optimize it for the Internet, and implement it on your site. If we are building an online store for an offline business, it probably already has a working loyalty program, and we just need to think about how we will implement it on the site.

Let’s talk about how the loyalty program will affect the site and, in particular, its design. The most common thing is discounts for regular customers, just like in chain stores: the customer gets a card and when buying something, the customer is identified by full name, phone number, or barcode. In the online store, we can identify the client after login, physical cards can be thrown out of the scheme, and this is a small optimization of the offline program for online. After logging in, the user should see information about their discount or accumulated bonuses in their personal profile. If the loyalty program involves a cumulative increase in the discount, it would be good to show him a simple graph where he can clearly see how much the customer has left until the next step.

Another option is to give virtual bonuses for purchases, which the client can spend on the following purchases. This option is designed to motivate the customer to purchase more and accumulate this virtual currency. Periodically, you need to make sales for regular customers, which are only available to them after logging in to the site. Send this information using the mailing list. All this can be designed to be automated.

Another interesting technique is to create a separate group of exclusive products only for the “members of a closed shopping club” — the same regular customers. And the newsletter, that you send to the entire customer base, shows, that one product is available only for “members of the club”. Show the same thing on the site, and mark products with special labels. This will create a sense of exclusivity for those who are in the club, and the rest will want to get there.

The big difficulty you can face with loyalty programs in online stores is their inconspicuousness.

When a customer pays in offline stores, the cashier always asks if they have a “regular customer card”, thus reminding the customer about their special status each time. In an online store, such reminders are absent, and a person may not even know that he/she has special discounts or other bonuses. Therefore, you need to think through the mechanism of how to convey information to the consumer. So that in the personal accounts, at the purchase stage and when placing an order, customers will be constantly reminded of their special status, and after the purchase, they will become more encouraged to remain a regular customer.

KPI

I think in terms of marketing, so although this applies indirectly to design, I will still touch on the topic of KPIs. They need to be identified in advance and preferably predicted in order to understand what exactly to focus on in design and how to maximize them.

The following KPIs will be important for the online store:

• Traffic
• Conversion rate
• Average receipt
• Average margin
• Cost of attracting a user
• Cost of attracting a buyer
• The average number of pages viewed
• Average session duration
• Repeat visits
• Repeat purchases
• Regular customers (3 + purchases)
• Bounce rate
• Average monthly user growth
• Average monthly customer growth
• The average number of steps to purchase

There can be numerous indicators. It is important to collect and analyze everything. And, in addition, it is essential to know the average indicators for the market and competitors in order to be able to compare with their success. These indicators can still be split up. For example, it is significant to know not only the average cost of attracting a buyer but also the division by attraction channels. Knowing your goal, having a huge amount of analytics and planned KPIs, you can start designing the functional modules of the future store directly.

Journey Map and behavior scenarios

For proper design, we need to understand exactly how users are behaving while visiting your site. Online shopping has been around for a long time, consumers already have certain patterns of behavior, and we don’t need to reinvent the wheel here. Behavior patterns can be either general or specific to individual topics. Below you can find an example of the notionally typical behavior of our buyer persona John Doe on the pass of purchasing a laptop online.

In the following parts of this article, I will begin to describe 57 functional modules of the online stores, analyze each one and tell you how to build an interface for each of them. This is a gradual process that consists of different parts, and we will continue to talk about them. All these functional modules are used by the largest online stores in the world, which I have described a little in this article.

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