What to consider in UX/UI

What to consider in UX/UI when developing a B2B Frontend | Crealeon 2022

This article from the Crealeon development team looks at the differences between the frontend B2B and B2C approaches on typical pages. In addition to the technical side of the issue, let’s go over the main points of our analytics. Let’s review the approach used in the Virto Commerce Storefront Mercury Theme: SPA solution based on the Vue 3 framework and TailwindCSS. Let’s list the features that the Crealeon Commerce platform uses to represent a modern B2B e-commerce solution.

A typical online platform solution for selling B2B and B2C eCommerce products has a set of defined pages, each with the goal of building a customer experience (Customer eXperience, CX). In many ways, the structure of B2B and B2C pages is similar, but there are a number of significant differences, which we’ll talk about.

  • Home Page (eCommerce Home Page).
  • Registration.
  • Product categories and listings pages.
  • Product pages.
  • Cart and checkout page.
  • Account management and portal approach to the Personal Area.
  • Search and filtering.
  • SEO Optimization.
  • Customer Performance.
  • PWA as a driver of innovation in B2B.
  • Common technical approaches and Bottom line.

The eCommerce Home Page

Since the home page creates the first and most memorable impression of the brand, it receives a lot of attention.

In the traditional B2C approach, such a page usually contains many additional cross-sell and up-sell elements, such as banners with discounts and promotions, a product block of the current promotional campaign, promoted product categories, catalog search, popular offers and brands, etc.

The B2B home page is much more conservative in this regard: it is mainly designed to form a visual (sometimes abstract) idea of the brand and the B2B portal as a whole. Since very often B2B portals are closed from unregistered users, the main call to action (Call To Action, CTA) here is the login to the corporate account on this resource.

Typical B2B Home page

As an example, in the Mercury Theme we provide an authorization form as a key element of the main B2B page. After authorization, the form display becomes unnecessary, so authorized portal users are redirected to the personal dashboard, i.e., the start page of the Personal account when they follow the link to the home page.

This approach allows you to focus the attention of authorized users on their key purchasing activities for corporate needs. Often B2B users have several roles and corresponding accounts within the company: senior manager (coordination), purchasing manager, accountant, etc.

The specifics of B2C is to hold the user’s attention so that the visitor spends as much time with the site as possible and visits many pages with promotional products. Then there is a higher probability of spontaneous purchases and a higher average order check.

For the B2B sector, on the contrary, everything in the UX/UI frontend needs to be done so that the customer spends as little time on the site as possible to increase his productivity. For example, a B2B site might offer various shopping list converters from Excel directly into a module to check the availability of those items in stock – and on to the order cart.

In the B2B sector, account functionality can be shared by role, and the solution must support that. Switching to the dashboard in this case allows the user to access exactly the functionality that is the highest priority for the current role.

Visually, we get two radically different home pages:

  • A presentable branded home page for unauthorized users and search engines,
  • functional page personal account for authorized users.

At the same time, the first home page is the most optimized in terms of client performance and with the addition of SEO-blocks and tags, and the second – optimized in terms of the link structure for easy navigation on the key functional blocks.

Dashboard B2B Home page for authorized users

As an example, in the Mercury Theme we provide an authorization form as a key element of the main B2B page. After authorization, the form display becomes unnecessary, so authorized portal users are redirected to the personal dashboard, i.e., the start page of the Personal account when they follow the link to the home page.

This approach allows you to focus the attention of authorized users on their key purchasing activities for corporate needs. Often B2B users have several roles and corresponding accounts within the company: senior manager (coordination), purchasing manager, accountant, etc.

The specifics of B2C is to hold the user’s attention so that the visitor spends as much time with the site as possible and visits many pages with promotional products. Then there is a higher probability of spontaneous purchases and a higher average order check.

For the B2B sector, on the contrary, everything in the UX/UI frontend needs to be done so that the customer spends as little time on the site as possible to increase his productivity. For example, a B2B site might offer various shopping list converters from Excel directly into a module to check the availability of those items in stock – and on to the order cart.

In the B2B sector, account functionality can be shared by role, and the solution must support that. Switching to the dashboard in this case allows the user to access exactly the functionality that is the highest priority for the current role.

From the visual point of view, we get two drastically different main pages:aSpeaking of the start page in myAlpari, it’s worth mentioning the additional visual component. In this page, which is a typical dashboard-interface, the graphs and tables occupy a special place. Our tabular representation has been implemented with adaptive design in mind. We have worked out both desktop and mobile representation, with an emphasis on UX. Graphics can be plugged in as needed, extending the theme to existing popular Vue components.

And again about UX/UI frontend productivity in B2B. For example, a B2B site might suggest using hotkeys on site navigation elements to arrange quick transitions. For example, press Alt+O to see the latest order.

Summarizing about the home page in B2B ecommerce – it is recommended to take a conservative approach, providing users with sufficient functionality and a simple visual design in accordance with their role in the system.

A presentable branded home page for unauthorized users and search engines,

functional page personal account for authorized users.

At the same time, the first home page is the most optimized in terms of client performance and with the addition of SEO-blocks and tags, and the second – optimized in terms of the link structure for easy navigation on the key functional blocks.

Registration process

The typical B2C approach involves registering users as quickly, easily, and transparently as possible so as not to distract them from the target action of making a purchase.

In the B2B sector everything is different. Very often it is impossible for a user to register independently on a B2B portal: the creation of a company’s account is done manually based on the request received by the portal administrator. Similarly, once the company account is created users are added to this account by the account administrator (for example the purchasing manager).

In addition to online registration, setting up an account for a B2B customer may be accompanied by a requirement for additional documents on the customer’s right to work with any goods, the purchase and sale of which are restricted by licenses. Actions may also be required to sign contracts, agreements. As an example of such goods could be alcohol, motor fuel, chemicals and others. Thus, the functionality of registration can be divided into two parts.

The first part is a typical account registration. In Mercury Theme we provide a choice of personal and corporate account registration. This format is suitable for companies that allow the creation of accounts for employees. Here it is possible to expand the workflow by subsequent confirmation of the account by the portal. Nevertheless, users are given the option of registering themselves.

In order to comply with the internal underlying requirements of B2B solutions here, the registration form is comprehensive. At this stage, the user creates an account, specifying sufficiently complete information about himself: e-mail address, login to the system, password, first name and last name. And for the corporate account the name of the company is added additionally. This form can be additionally extended by the functionality of entering the legal address and other necessary details if desired.

Typical B2B registration form

For user convenience, this form supports client and server validation. Typical errors (e-mail format, required fields, permissible value lengths) are checked on the fly, allowing the user to get an instant indication of errors. For the browser-based checking, we use the functionality of the vee-validate and yup modules, which can handle most of the checks with a nice syntax, allowing you to expand the set of checks as needed.

More complex errors (password complexity, duplicate login or email) are already checked on the server side and displayed on the page in case of unsuccessful registration. In any case, all of the fields are checked both in the browser and on the backend. This approach allows to avoid many typical input errors. Separately it should be noted that in SPA approach the checks are performed without reloading the page, providing good client performance and responsiveness of the interface.

The second component – a form of request for account creation. This form is created individually depending on the needs of a particular company (customer) and allows you to generate a request for registration to the portal administrator for further manual processing.

Summarizing the registration process – the B2B solution implements the user registration approaches required for the creation of a comprehensive personal or company account, taking into account the needs of specific target groups.

 

Product category and listing pages


Displaying a product catalog as listings is a core functionality of any eCommerce solution, whether it’s B2C or B2B. And there’s virtually no difference here. In Mercury Theme, we’ve assembled meaningful features required for most B2B solutions.

The product listing in our approach is presented in two traditional display options for the user’s perception: a tile and a list, with the ability to switch between them. This approach allows users to get the most out of browsing categories and focus on the information that is meaningful to them. We display key product data: image, name, SKU, quantity in stock, price, as well as quick add-to-cart and comparison list widgets.

Product category in B2B ecommerce - example

Separately, it’s worth noting that products in the product catalog can be either a single variation (let’s call them mono-products) or present the buyer with a set of options (different color, size, etc.). Mono-products can be ordered quickly; to select a variation, you need to go to the product page to view the available options and then order.

When ordering with the widget, we have thought of a mechanism for limiting the order. You can show the available quantity, as well as the minimum and maximum quantities available for ordering for each individual product. This approach allows you to give users an idea of the possibility of ordering the amount of the product they are interested in. Additionally, we display the quantity already in the cart for each product. The user can assemble the order avoiding duplicates and have an idea of the composition of the cart without going directly to it.

List mode for fast updating of the cart

Special mention should be made of List mode, it should be like Microsoft Excel. This mode turns List into a group mode for adding items to cart, the user can select several items, set the quantity and add them in one click. Here again, it’s about productivity and its implementation in the portal. For example, the TAB key switch between items makes it easy to use the keyboard.

As for the visual display of the catalog, we use the Infinite Scrolling approach. This allows users to focus on product selection, bypassing page transitions and the corresponding loss of focus. At the same time, in the basic delivery of the theme there is also an opportunity to use the classic page approach, which can be customized depending on the needs of a particular client.

Separately worth mentioning is the search and the use of filters within categories. Each category allows you to perform a full-text search of the products within the category. Each category also contains a set of filters specific to it. These filters are configurable dynamically and allow users to limit selections only to the parameters of interest. All results within a category can also be sorted by name, price, or relevance. Again, all actions are done asynchronously without a page reload, which increases the responsiveness of the interface and user-friendliness of the catalog.

A specific feature of B2B filtering is the presence of blocks that show products the customer has purchased before. Filtering by product availability at a particular warehouse will also be useful, as many companies prefer to purchase from the warehouse with the least amount of shipping leverage. For a B2B customer, it’s important that all parts for production lines arrive from the supplier not only on time, but also in a complete package.

Also among the important requirements for B2B portals are often access restrictions, such as prohibiting anonymous users from accessing the catalog as a whole or the display of prices. We limit the ability of search engine crawlers to index pages that require authorization. We also support the ability to restrict access to the catalog on the basis of authorization, and at the request of the customer – to any displayed information. Additionally worth mentioning is the possibility of displaying personalized prices. As part of the Virto Commerce platform, it is possible for each user to create individual price lists, thereby providing up-to-date personalized prices for products.

To summarize about categories – the catalog listing should be aimed at increasing the CX of customers when dealing with product ordering, taking into account the typical needs of B2B users. An example is the implementation of showing products from the catalog in Mercury Theme.

Product pages

B2B and B2C product pages are usually quite similar in the display of product data. However, the B2C page presents much more emotionally colored information: reviews, recommendations, user ratings, and more.

The B2B product page is more ascetic and displays concise product information, although the page can be enriched here with drawings, user manuals, assembly and repair videos. Typically, product information contains a photo gallery, product name, product specifications, description, price block, and a list of related products for quick ordering.

Detailed product information pages in Mercury Theme can be divided into two groups: mono-products and products with options. There is only one difference between them: the page with options allows you to view the available product modifications and place an order for a specific one.

B2B product page example

Product features in Virto Commerce are dynamic properties that are configurable for a specific category or even the product itself. All available characteristics are displayed on the page, allowing users to form a comprehensive view of a particular product.

The Add to Cart widget also takes into account available product quantities and individual minimum and maximum quantity limits available for an order to a user from a given company. The widget also displays the quantity of products already added to cart, allowing on-the-fly evaluation of the order being formed.

Unlike B2C sites, product display on a B2B portal is often customizable to inform the user of all variations on a page with the ability to add to cart in groups. For example, it’s handy to add bolts with a certain thread size but different lengths to the cart. Of course, this behavior of B2B portal is customizable and can be changed.

Of additional features – adding a product to one of the user’s wish lists. This option allows you to create deferred shopping lists.

Summarizing the above about the product pages – the example of Mercury Theme shows that the B2B product pages are minimalistic. But the information is enough to give the user the necessary idea about each product.

Cart and checkout page

The approach to ordering in B2C and B2B is radically different, and there is a reasonable explanation. In B2C, the main goal is to get the user to complete the order as quickly and easily as possible, bypassing unnecessary steps. In B2B, the checkout process is multi-step and can be significantly time-consuming.

Typically, B2B user checkout is not limited to simply clicking the “Order” button. Moreover, product selection and its direct order can be performed by users with different roles according to the company’s organizational structure and access rights. This approach imposes serious limitations on the frontend part of the page.

There are two popular UX/UI ordering approaches: the single-page format and the step-by-step approach. In Mercury Theme we’ve implemented the single-page approach. This approach is good because on one page consolidated information about products and their quantity, addresses and methods of delivery and payment, as well as additional information about the order.

In the used solution we display information by blocks: product items, gifts and bonuses available for ordering, delivery information, payment information, comments to the order, individual order number for internal use by the customer, discount coupons and the financial part of the order (amount due for payment).

B2B checkout page example

The item management block allows you to change the composition and quantity of products in the order. This block takes into account, among other things, the current availability of products, as well as limits on the possible quantity. Since there can be a large number of products (and in the B2B approach, an order can sometimes contain hundreds or thousands of SKUs), this block needs to be paginated so the page isn’t unnecessarily long.

Shipping and payment information allows you to specify an address by selecting from an existing address in your account or creating a new one, as well as a shipping or payment method. Shipping method and address can affect the final cost of the entire order, so they are a prerequisite for placing an order. At that, delivery addresses are taken from the organization profile and can’t be arbitrarily assigned by the user.

Delivery page in B2B ecommerce

It’s especially worth noting that for B2B users there are differences in payment methods. If for B2C here in the first place popular payment methods are shown (plastic card, Apple Pay, Google Pay, PayPal and others), then for B2B in addition to the corporate credit card bank transfer based on the invoice (Invoice) is used.

Also speaking of the checkout process, it is worth mentioning the final confirmation page. After the order has been placed the user is shown the information about the placed order, which contains all the information from the cart plus a unique number of the created order.

Summarizing about the payment page – we stick to the One-page Checkout approach, and in Mercury Theme it is implemented with adaptation for the needs of the B2B segment of the market.

Account management and portal approach to my personal account

A user account in any eCommerce solution is designed to aggregate all user information: profile data, orders, favorites lists, address management and payment methods, and more. The B2B segment is no exception, but it has its own peculiarities. At Mercury Theme, we implement a portal approach to consolidating such data.

What is the portal approach and how is it different from others? The part of the solution relating to the User’s Personal Cabinet is a site within a site: it has its own structure, navigation, stylistic features. Unlike many B2C solutions, where the user account is organically integrated into the overall structure of the site, our approach allows you to extend the functionality in a fairly simple way by adding new sections.

We have defined several important sections of User’s Personal Cabinet: main page (dashboard), personal user data, address management, order history, purchase lists and default settings. Any other information specific to a particular product implementation can be added to this list.

User data management allows you to edit your first name, last name, organization name, contact phone numbers, profile picture and other personal information. We implement the minimum information, which can be enriched with additional information (user photo, etc.) if desired.

Address management is a list of created addresses you can use when placing an order, as well as a form for creating a new address. Each address can be edited or deleted. Sorting and page navigation are provided for easy viewing of a large number of addresses.

Order page example in B2B ecommerce

The order history for B2B is implemented in detail. The user can view previously created orders, sort them, search and filter them by a number of criteria. Page navigation is also supported to handle large lists. Each order can be opened and its detailed information can be viewed. One of the important fields in the order is the Purchase order number, i.e. the individual order number in the user’s accounting system. This allows you to search for orders in a more flexible way.

One of the key features in the order detail view is the ability to quickly place a repeat order. This action will check the availability of products. For each item, the quantity available for ordering will also be checked. If there is less than the desired availability, the order will be recalculated. Before proceeding to the actual ordering, the user will be offered to review all suggested changes.

Shopping lists provide the ability to form pending purchases. The user can create up to 10 personal shopping lists and fill them as needed. Each list can then be quickly transformed into an order with a single click.

Default settings allow you to specify desired methods of payment and delivery for faster processing of typical orders.

Summarizing about the Personal account management page – it should be configured as much as possible for the typical tasks of the B2B segment. In Mercury Theme we have implemented a portal extensible approach to user account management.

Search and filtering

Search functionality is a critical part of any eCommerce solution. The difference between B2C and B2B can be the need for cognitive search for B2B (such as Azure Search), since a product card can contain different types of documents, including handwritten documents.

In Mercury Theme, we’ve implemented two independent search mechanisms: global search by category and product, and detailed search by product within a selected category. This approach allows users to search for products based on need. If a user knows which category contains the products they’re interested in, they can use the search and filters within the category. If they don’t know, they can use a full-text search of the entire catalog.

The global catalog search is a drop-down list of found categories and products with the ability to switch to advanced product display mode. The advanced mode is visually the same as the category view, except there are no filters. The search results page also allows you to switch the display type between tile and list, and then quickly order products based on the available quantity.

Search filtering page example in B2B ecommerce

The search within a category is further enriched with filters. Each category provides its own set of filters, divided by groups. The set of filters calculates the number of relevant products available in the catalog, allowing you to visually assess the completeness of the results. B2B portal administrator can customize the filter sets for each category individually, using the available presets. This option is built into the functionality of the Virto Commerce platform.

Summarizing the search functionality – the solution should allow users to search for products of interest comprehensively, using both full-text search and advanced filters.

SEO Optimization

Although we have already said that product pages for authorized users should be closed to search bots, this does not mean that for B2B portals you should neglect SEO. For better visibility on the Internet, you can and should create pages that are open for indexing and show the benefits of the products offered.

Typically, the task of SEO is assigned to the main website of the supplier company, which attracts search traffic from the target audience and thus generates new leads. Already from the main site, new visitors can go to the B2B ecommerce portal to register an account and make purchases.

I would like to remind you that a pretty effective technique in terms of improving the presentation of search results is the so-called Rich search results in Google. Rich search results are important tools to increase CTR and attract more visitors to your ecommerce portal.

Source- Google

To use the full potential of advanced search results for B2B businesses, you can add structured data to the page template code on the e-commerce portal. This task is usually performed by the development team (or implementation partner) on the client side, taking into account the specifics of the client’s products and their presentation on the site.

Client performance

B2B portal speed and responsiveness are some of the main metrics that will differentiate your resource from the competition. Keeping track of performance is very important, both in B2C and B2B variants. But there are differences here as well.

B2C users are focused on the “here and now” checkout; for them, any delay in response will form a negative impression. Requirements in the B2B sector are even stricter, and the “lightness and responsiveness” of the frontend is important – as an example, a customer can connect via a mobile network with a weak signal when working inside a metal-clad warehouse or, say, from a basement room. And besides, nothing on the screen should distract the customer from placing an order, i.e. no unnecessary banners, etc.

We at Virto DevLabs regularly monitor performance and strive to improve it. This is an important task of the vendor development team. At Mercury Theme in the current MVP version, we can demonstrate high performance.

B2B Performance evaluation page - example

By the time the MVP is finished, we have collected a certain set of wishes to improve performance speed. In future versions, performance will receive even more attention. Our goal is to achieve green metrics for the main metrics and keep them from release to release.

Summarizing about the performance of a B2B portal – we argue that apart from optimal UX/UI and code, the performance of an e-commerce portal over a certain period of time is also determined by the development of new technologies and the ability to implement them in the platform.

PWA as a driver of innovation in B2B

PWA or Progressive Web Application is a technology that allows customers to install your website on their smartphone as an app. The advantage for B2B eCommerce is that now you don’t have to develop an iOS app and an Android app in addition to the site. Another good news is that Progressive Web Apps are indexed and improve SEO performance: in Google, – if PWA technology is connected, the site will rank higher (no one will tell you how much better, though).

The Crealeon team is actively working on adding the ability to load an eCommerce portal as a PWA. This will allow many of the well-known benefits of PWAs to be used to make enterprise shoppers more productive. These include the ability to work offline, barcode scanner on the site, notification of the status of the order and its movement through the pipeline to delivery, etc.

Common technical approaches

Mercury Theme is part of the Crealeon Commerce platform using Crealeon Storefront. Both applications are built on .NET 6 and demonstrate excellent flexibility and performance.

The Mercury Theme itself is implemented as a Single-Page Application using the Vue 3 framework. The choice of this fresh framework is not accidental: Vue 3 is a very powerful engine, which embodies a stunning performance and low entry threshold for developers. Sufficient number of debugging mechanisms, excellent IDE-level support, simple component approach. Vue 3 gives us the ability to realize our goals quickly.

It uses TypeScript as the main development language of the theme. In our approach it is justified: full typing allows us to use the resources of the IDE as much as possible and significantly reduce the number of errors in the development process.

For the visual design we use TailwindCSS. This framework is one of the most traceable and flexible. Its approach allows us to quickly implement visual solutions, using standard sets of styles. Thus, developers focus on the process of layout, minimizing the work with styles and reducing the number of non-standard classes and styles. This approach makes it fairly easy to extend the functionality of a theme and develop new components without mixing up the logic, the layout, and the styles.

The final solution builder is Crealeon. This turbojet assembler is not inferior in functionality to the classical WebPack, while possessing amazing speed and flexibility. Development is conducted using Hot Module Replacement, which allows you to see any changes in the code on the fly. Assembly is made with the necessary optimizations that reduce the amount of code delivered to the browser.

Vue starter theme diagram

The file structure of the theme itself is implemented with a good separation of areas of responsibility. Everything is laid out and organized: connectors to the API, logicless components, large logically connected blocks, page templates, and localization files. Each step is carefully aligned and allows us to get an intuitive theme structure that can be used flexibly in client projects.

The next steps for us will be the implementation of Server-Side Rendering and making Crealeon Storefront easier.

Results

Crealeon Storefront Mercury Theme is a fairly complete example of the implementation of the modern approach to the development of B2B solutions for eCommerce at any level. In the process of development we took into account a lot of requests from our partners, tried to implement a flexible and extensible version, which can be used in subsequent client projects with a minimum of costs for revision.

Many functions within the theme are reusable. The separation of the levels of logic and presentation allows us to change the visual design while maintaining a large amount of elaborated logic, and the technological base allows for fast and high-quality development with a low threshold of input.