8 Things to Keep in Mind When Designing an E-Commerce Website

Design decisions made during e-commerce website development, which is supposed to guarantee the best possible experience for its future users, depend on many factors. In the design process, especially when UX specialists are involved, the preparation of the first mock-ups is preceded by an analysis that includes, among others:

• the range of offers presented — whether the site should offer several versions of a single, unique product, a wide range of products of a particular brand, or maybe articles from different manufacturers with the possibility of selecting products best suited to the needs of customers;
• industry — other design solutions may be required by a site designed for specialists, and others by e-commerce with an offer addressed to a diverse group of users who are looking for commonly known everyday items in it;
• the type of assortment of the store and the associated frequency and repeatability of purchases — whether the products are purchased fairly regularly (e.g. cosmetics, groceries), or should one expect a one-time purchase of a given product over a longer period of time (e.g. household appliances, electronics, etc.).

However, there are a few basic elements that you will find on any e-commerce site, regardless of who and what kind of products the store offers, whether the offer is aimed at individual customers or in the form of B2B transactions. Both in the case of creating an e-commerce project from scratch and when redesign of an existing online store, the set of elements going to the designer workshop will be similar. Therefore, this article focuses on good practices that are worth considering when designing:

• home page,
• pages with a list of products,
• product subpage,
• basket,
• the consent module for the processing of user data.

The above list has been supplemented with topics, without taking into account which it is difficult to plan intuitive user interaction with the interface: information architecture, navigation and search, and the availability of content.

Attention!
In the case of e-commerce sites, the key element is the purchase process. It has been omitted in the following list, mainly due to the scope of this issue and possible variants of design decisions. Of course, you can point out some standard solutions (e.g. good practices for creating forms), but it is difficult to consider the entire purchasing process in isolation from the specifics of a particular project.

1. Information architecture

The well-thought-out structure of information on the basis of which the store's offer will be presented must first of all be consistent and consistently applied throughout the site. The user should be able to quickly navigate the offer of the store thanks to easily distinguishable categories that do not repeat and are not nested with each other. In the case of extensive categories, containing many products, they are usually divided into subcategories, the number of levels of such division should not exceed three. On the other hand, when the offer includes only a few (types) of products, it is often not even necessary to group them into categories.

Consistency should also be ensured between the version of the website prepared for different types of devices, differing in the size of the screens and the way the interface is handled (e.g. touchscreen, mouse). Differences in functionality or the way information is presented on mobile and desktop devices are sometimes unavoidable. However, they should be justified, e.g. by simplifying exploration or ensuring an appropriate level of accessibility.

Remember:

• Organize the categories in the simplest way possible, so that their structure is understandable to each user, regardless of their habits and experience in online shopping.
• Map the submitted offer in additional subcategories. However, do not create categories artificially or incrementally if the scope of the offer is not extensive.

• Give categories labels that make it easier for users to know what products they'll find under each category, even before they click through menu items.
• In category names, avoid jargon that is understandable only to a narrow group of experts in a given industry. However, if the offer consists (mainly) of specialized products, explain the differences between them, for example through illustrations or illustrative photos — less advanced users will benefit from this.

2. Product navigation and search

When analyzing recordings of user behavior on the site (e.g. with the help of Hotjar), we often observe signs of their loss due to thoughtless or improperly presented navigation. Properly designed interface elements should lead to the desired content in a simple, organized way. As standard, the user has at his disposal: main menu, search engine and internal linking between individual subpages of the store.

Remember

• Offer consistent navigation throughout the site — this will guarantee, for example, menus, search engine or headings consistently placed in the same place of subpages, regardless of their purpose.
• Also ensure consistency between versions designed for different devices — the mobile version of the store should provide users with the same set of key features as the desktop.
• Design the ability to navigate to category subpages in several ways, such as through search results, filters or links placed on category pages related to the given category.
• Tell the user what they can type in the search box — consider entering a search history and pointing to popular phrases.
• In the absence of search results, do not leave the user alone — further exploration can be inspired by the suggestion of keywords, and ultimately by the presentation of the elements of the offer (e.g. bestsellers or products similar to those viewed).

3. Home

Customers who come to the online store are often redirected directly to the subpage of the category they are looking for or the product they are promoting. Some visits are made by this bypassing the home page. However, it is worth taking care of the information presented on it, frequent content updates and the introduction of elements that build user trust and brand awareness (e.g. logos of partners, manufacturers, brand differentiators, certificates of services with opinions, etc.). It is here that the company usually presents the key part of the offer and the most popular categories. Here, too, the user is guided, who wants to learn more about the brand, orient in the overall offer of the store or simply in search of inspiration. The design of the homepage should therefore be the business card of the store.

Remember:

• Present a brand value proposition on the homepage — it can be a banner or a section with USP (unique features of the offer).
• Include on the homepage examples of products representing key categories, allowing the user to evaluate the scope of the offer.
• Provide users with features that allow them to follow the updates of the offer and encourage them to return to the site (e.g. subscription to the newsletter, information about the loyalty program). Do not forget to update the content on the store's business card.
• Take care of returning users and looking for inspiration — on the homepage, plan a place for a module with products similar to those last viewed by the customer.
• Make the page readable with a well-thought-out hierarchy of its elements — analyze which information is most important from the user's point of view and emphasize it accordingly. Additionally, sections and individual elements should be presented in a way that allows users to focus on a given piece of content.

4. Product list, filters and sorting

The way the listing is presented depends mainly on the assumptions of the project. Both a view with a grid of tiles and a list of modules arranged one below the other (most often with the ability to switch them) are used. To ensure fast loading of the site, it is worth dividing the list into smaller “portions”. At the same time, it is necessary to add more products - by button or by automatically expanding the list when scrolling the page (the so-called infinite scroll).

The absolute standard in the list of products, on the other hand, are filters. Among their basic attributes you will often find: price range, manufacturers, characteristics of the product (e.g. its color or size), but also the marking of the promotion. Each project requires an individual analysis of the range of filters, so as to optimally match their options to the store's assortment.

Remember:

• Inform the user where the site is currently located - above the list should be placed a header with an unambiguous name of the category and the so-called crumbs. The return path is especially useful when the architecture is based on nested categories, allowing the user to move to the parent category with a single click/tap.
• Provide the ability to organize and narrow the list of products according to your preferences by providing sorting options and filters.
• Make sure that the number and range of filters are adapted to the assortment presented — it is not worth over-shredding filters creating very detailed options. It may also happen that individual categories will require a different set of filters.
• Decide which information about the product is necessary for its precise identification and list only what is important from the user's point of view in the offer descriptions. Improve product recognition by presenting (legible) thumbnails of photos.
• Consider providing the option to add to the cart from the list - this will allow efficient completion of purchases, for example, when the user knows the offer well and entered the store page for a specific product

5. Product card

The user entering the product card should receive information that will allow him to verify whether he is interested in a given offer. Therefore, the description presented should contain a complete, detailed specification of the product, taking into account relevant data from the user's point of view. Usually the description includes the characteristics of the product (e.g. dimensions, type of material), the name of the manufacturer and possible variants (e.g. color, size).

It is worth supplementing these data with illustrative photos, allowing you to evaluate, for example, the proportions and size of the article, but also to view its details.

Remember

• Include the full name and code (if any) on the product card — this will be helpful when products do not have unique characteristics that allow them to be clearly identified.
• Show the final price of the product, and in case of a discount, supplement it with information about the starting price and the amount of the discount.
• Consider including recommendations for similar or complementary products on the site.
• In the event of a temporary absence of the product, it gives the user the opportunity to receive a notification about the return of the product to the offer.

6. Cart

The presentation of the contents of the cart, especially with skillfully provided additional information (for example, about the value of the basket providing free delivery), can inspire some users to complete their purchases. However, it is worth keeping moderation, e.g. by placing additional modules on the shopping cart page, e.g. with product recommendations

The placing of products in the shopping cart by the user is not always synonymous with the completion of the purchase. Abandoned carts are a common occurrence, but the reason for the interruption of the purchase process is not always obvious errors within it or objective difficulties in navigating through complex forms (especially if the clipboard function is not included on a given e-commerce site). It is worth identifying the problem with the help of web analytics tools and tracking user behavior.

Remember:

• Provide a mechanism for remembering the contents of the shirt between user visits to the site or clearly inform about automatic cleaning of it after the end of the session.
• Allow the user to make the final purchase decision already in the cart — provide the ability to remove or change the number of products, possibly product parameters (e.g. color or size).
• Show the value of the order in a clear way, taking into account the discounts granted and all costs. Also inform about possible forms of payment.
• Provide the user with both an easy return to the store and the transition to the completion of the transaction.
• Allow the user to move products from the cart to the clipboard and vice versa..

7. Consent to the collection and processing of data

No one is currently surprised by the mechanisms for collecting user data implemented on websites. A website that uses only cookies necessary for its functioning (resulting from the so-called legitimate interest) theoretically does not need a consent module. However, the relevant banner with the aforementioned data processing consents will probably greet you several times a day while surfing the Internet. Despite the widespread use of consent management systems for the collection of user information, the accuracy of these is often overlooked. It is common, for example, to accept the user's default consent to the use of cookies and similar technologies.

Remember:

• The module with information about the privacy policy or cookies should be easy to notice and close.
• The request for consent should be displayed to the user until it is closed and not shown when going to subsequent subpages or during subsequent visits to the site.
• The settings should guarantee the default inactivity of consents. An exception may be a “legitimate interest”, however, even in this case, the user must be clearly and unambiguously informed of such an option.
• Withdrawal of consent should be as simple as possible, for example by applying the rejection of all options in bulk.

8. Accessibility of website content

The digital accessibility of the presented content is an issue that is increasingly taken into account when designing websites. According to the February 2019 Act, only public entities are required to ensure accessibility in accordance with the standard Web Content Accessibility Guidelines (The current version is WCAG 2.1). The aforementioned standard distinguishes three levels of compliance of the content of the site with the guidelines:

• Group A contains recommendations that should be implemented if we want to ensure minimum level of availability all users of a given interface;
• The recommendations of the AA group guarantee Acceptable availability;
• Optimal level of accessibility It requires the use of AAA recommendations.

A detailed description of the rules can be found in Polish translation of the WCAG document.

It is worth remembering that despite the absence of an obligation to ensure the availability of content on e-commerce sites, the WCAG guidelines provide a set of valuable tips for designers who want to facilitate the use of the online store to the widest possible group of users. For many design decisions, simple tools available online can be helpful. For example, you can easily verify the correctness of the contrast of the elements of the designed interface by visiting the page WebAim whether WhoCanUse.

Work with data

The above list is not exhaustive of an extensive set of issues that should be considered when designing an e-commerce website. However, you can use it as an organizing base for starting work on the store's website. At each stage of the project, it is worth returning to the information collected during its duration, but also to verify the initial assumptions by deepening knowledge about the motivations, needs and purchasing habits of actual (and potential) users of the designed website. You will achieve the best results by ensuring the diversification of the sources of this information — look for the necessary data both in statistics provided by web analytics tools or programs that allow tracking user behavior, but also confront the proposed solutions with users during several usability testing sessions.

— — —

The article was prepared based on IDEACTO checklists — if you are interested in a complete list of best practices in the design and optimization of online stores, download Best Practices for E-commerce.

The article was originally published in Online Marketing Magazine.