What to Consider in UX/UI When Developing a B2B Front End

In this article, we’ll talk about the differences in design between the typical B2B and B2C front-end web pages, and share the Virto DevLabs’ viewpoint. We’ll look at the approach used in the Virto Commerce storefront Mercury Theme as a SPA solution based on the Vue 3 framework and TailwindCSS. We’ll list the features used in the Virto Commerce platform, our modern B2B ecommerce portal.

So, a typical solution for an online platform selling B2B and B2C ecommerce products has a set of specific pages, each of which aims to form a perfect 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 here. We’ll also discuss some considerations related to the implementation of a custom front-end solution such as the Mercury Theme with the Virto Storefront.

1. ECOMMERCE HOME PAGE
2. SIGN-UP PROCESS
3. PRODUCT CATALOG PAGES
4. B2B PRODUCT PAGES
5. CART AND CHECKOUT PAGE
6. PORTAL APPROACH TO ACCOUNT MANAGEMENT
7. SEARCH AND FILTERING
8. SEO OPTIMIZATION IN B2B PORTAL
9. BOOSTING THE CLIENT PERFORMANCE
10. PWA AS A DRIVER OF INNOVATION IN B2B
11. GENERAL TECHNICAL OVERVIEW OF THE MERCURY THEME
12. SUMMARY

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

In a traditional B2C approach, the home page usually contains many additional cross-sell and upsell elements, such as banners with discounts and promotions, a product block of the running promo campaigns, best-selling product blocks, catalog search, popular offers, and brands, etc.

The B2B home page, on the other hand, is much more conservative. It is mainly intended to form a visual (sometimes abstract) idea of ​​the brand and the B2B portal as a whole. Since very often B2B portals are not available from unregistered users, the main call to action (CTA) here is a form for logging into a corporate account on this web resource.

I will use Virto’s Mercury Theme as an example to discuss B2B frontend features here and below. It provides a login form as a key element of the main B2B page. After authorization, displaying the form becomes unnecessary, so authorized users are redirected to a personal dashboard when clicking on the home page.

This approach allows company liaisons to focus on their key corporate procurement activities. Often, B2B users have several roles and corresponding accounts within the company, e.g., senior manager (general approval), buyer, finance approval person.

The specificity of B2C is to keep the customer's attention so the buyer spends as much time on the site as possible and visits a lot of pages with promotional products. This increases the probability of spontaneous purchases and a higher average value of the order.

By contrast, in the B2B sector, everything in the UX/UI front end needs to be done so the client spends as little time on the site as possible to increase their work productivity. For example, a B2B site may offer Excel shopping list converter. When uploading, it goes directly to the availability check of those items in the stock and then adds the units to the cart.

In the B2B sector, account functionality can be divided into roles, and the ecommerce solution must support this. Switching to the dashboard in this case allows the company to provide an authorized user with access to exactly the functionality that is the highest priority for the current role.

From a visual point of view, we get two radically different main pages:

• A branded start page for unauthorized users with some text and HTML tags for search engines; or
• A functional page for authorized users.

With this approach, the initial home page is optimized in terms of client performance with SEO blocks and tags, and the internal home page is optimized in terms of link structure for ease of navigation through functional blocks.

When planning the home page for a recognized user, there is an additional visual component that can be added. For a page like this, which is a typical dashboard interface, charts and tables can be incorporated. The table view is implemented, taking into account the adaptive design. Graphs can be included as needed by extending the theme with existing, popular Vue components. At Virto, we’ve worked on both the desktop and mobile views, with an emphasis on UX.

Another productivity feature of the UX/UI front end in B2B is the capability to assign hot keys to optimize user functionality. A B2B site may offer hot keys on the site's navigation to provide better user experience, such as “press Alt+O to view the last order.”

Summarizing, when it comes to the main page in B2B ecommerce, we recommend taking a conservative approach—providing users with a sufficient amount of functionality and simple visual design in accordance with their user role in the B2B portal.

The typical B2C approach to the sign-up process means providing the fastest, simplest, and most transparent registration of users so as not to distract them from their targeted purpose for visiting the site.

In the B2B sector, things are different. Very often, it is impossible for users to register on a B2B portal on their own. A company account is created manually by initiated request to the portal administrator. Similarly, after creating a company account, users are added to this account by the account administrator, often the manager of the purchasing department. Thus, in many companies, the registration functionality is divided into two components.

The first part is a typical account registration. In our Mercury Theme, we provide a choice of registering a personal or a corporate account. This format is suitable for companies that allow employees to create personal accounts. We can expand the workflow to require the subsequent confirmation of the account from the portal administrator. However, users have the option of self-registration.

To meet the requirements of different B2B solutions, the registration form might be fairly simple and straightforward, or it could be rather complex. At this stage, the user creates an account, enters sufficiently complete information, including an email address, login and password, first and last name. And for a corporate account, an additional company name is usually added. This form can be further extended with the functionality of entering a legal address and other necessary details as required.

In addition to online registration, setting up an account for a B2B client may be accompanied by a requirement for additional documents related to the client's right to work with certain goods, since the purchase and sale of some products are limited by regulation, license, or internal corporate permissions. There may be additional requirements such as signing contracts and agreements for the purchase of alcohol, automobile fuel, chemicals, and other restricted items.

For the convenience of users, this form supports a client-side and server-side validation. Common errors in email formats, required fields, and allowed value lengths, among other things, are checked on the fly, returning an instant indication of any mistakes made. For browser validation, we use the functionality of the vee-validate and yup modules. This allows us to handle most validations with a convenient syntax, while providing the ability to expand the set of validations if necessary.

More complex errors (e.g., password complexity, duplicate login, or email) are already checked on the server side and displayed on the page in case of unsuccessful registration. In every case, all fields are checked in both the browser and on the back end. This approach avoids many common input errors. In the SPA approach, checks are performed without reloading the page, providing good client performance and interface responsiveness.

The second component is the account setup request. This form is created individually depending on the needs of a particular company or portal client and initiates a request for registration to the portal administrator for subsequent manual processing.

Summarizing sign up, our B2B solution implements user registration approaches necessary to create complex personal or company accounts, according to the specific needs of the client.

Displaying a product catalog as a listing is a core functionality of any ecommerce solution, be it B2C or B2B. And here there are not too many differences. In the Mercury Theme, we've put together the essential features most clients need for B2B solutions.

The listing of products in our approach is presented in two traditional display options for user perception: in the form of a tile or a list, with the ability to switch between them. This approach allows users to get the best experience when browsing categories and focus on the information that matters most to them. We display key product data including images, name, SKU, quantity in stock, price, as well as quick 'add to cart' and 'compare list' widgets.

Of particular note is the list mode, which is similar to Microsoft Excel. This mode switches from list mode to group mode, enabling the adding of goods to the basket. This way, the user can easily select several goods, set the quantity, and add them in one click. Here again, the focus is on productivity and its implementation on the portal. Another facilitation tool is navigating with the TAB key between elements, which makes it easier to work with the keyboard.

The products in the catalog can be either as they are: “mono” product or “as is,” which means a product with a set of options (e.g., color, size, speed, power) to be chosen by the buyer. A mono product can be ordered quickly, while to select a variable product, your client needs to visit the product page, view the available options, then make a selection, and place the order.

When ordering using the widget, we incorporated a mechanism for filtering the order. You can show the available quantity of a product in stock, as well as the minimum and maximum quantities available to order for each individual product by the client. 

This approach allows users to order the quantity of the product they are interested in. Additionally, for each product, we display the quantity already in the basket. This enables the user to manipulate the order, avoiding duplicates and keeping an eye on the basket totals without directly switching to the cart.

As for the display of the catalog, we use the “infinite scrolling” approach. This allows users to focus on product selection without having to navigate through additional pages and potentially lose focus. At the same time, it is possible to use the classic page-by-page approach, so this is an attribute that can be customized depending on the needs of a particular client.

Another prime feature is the search function and use of filters within the category. Each component allows users to perform a full text search for products within that section. Also, each sector contains a set of filters specific to it. These filters are configured dynamically and allow users to limit the selection to only the parameters of interest. 

All results in a category can also be sorted by name, price, or relevance. Again, all actions are performed asynchronously without reloading the page, which increases the responsiveness of the interface and the usability of the catalog.

One specificity of B2B filtering is the display of visual blocks that show products the client has purchased before. Another useful filter is the availability of goods from a particular warehouse, since many companies prefer to select goods with the smallest transport distance. Or for a B2B client, for instance, it may be important that all components for production lines arrive from a supplier—not only on time, but also in a complete set.

An important requirement for B2B portals is the restriction of access from anonymous users, both to the catalog as a whole and to the display of prices. This also limits the ability of search robots to index those pages that require authorization. 

At Virto, we support the ability to restrict access to any specific information at the request of the customer. Additionally, businesses can display personalized prices based on multiple unique catalogs. So within the Virto Commerce platform, each user can have individual price lists displaying up-to-date, customized prices for products.

Summing up categories, the catalog listing is aimed to increase CX when dealing with checkout of products, taking into account the typical needs of B2B users. This is especially evident when displaying products from the catalog in the Virto Mercury Theme.

B2B and B2C are usually quite similar in displaying product data. However, in B2C, the page provides additional consumer-related information: reviews, recommendations, user ratings, and more. The B2B product page is more austere and displays concise product information, although here you can enrich the page with drawings, user manuals, assembly and repair videos, etc. In general, B2B product information contains a photo gallery, product name, characteristics, description, price block, and a list of related products for quick ordering.

Product detail pages in the Mercury Theme can be divided into two groups: mono products and products with options. The only difference is that the page with options allows users to view the available offerings of the product and place an order for a specific one.

Product features in a Virto Commerce solution are dynamic properties that are customizable for a particular category or even the product itself. All available specifications are displayed on the page, allowing the user to form a comprehensive understanding of a particular product.

 

The "add to cart" widget takes into account the available quantity of the product and the individual minimum and maximum quantity limits a user can order. The widget also displays the number of products already added to the cart, allowing the user to easily evaluate the order as it's being placed.

Unlike B2C sites, the display of a product on a B2B portal is often customizable to inform the user of all variations on the page, with the ability to bulk add to cart. For instance, it is convenient to add bolts with a specific thread size, but with different lengths. Of course, this function of the B2B portal is configurable and customizable.

Additional features include adding products to one of the user's wish lists. This feature allows users to create shopping lists for future purchases.

So to summarize product pages, whether using the Mercury Theme or something else, B2B product pages are minimalistic in general. But the information there has to be enough to inform the user's understanding about each product in order to complete the purchase.

The approach to checkout in B2C and B2B is fundamentally different, and there is a reasonable explanation for this. In B2C, the main task is to bring the user to the completion of the order as simply and quickly as possible, bypassing unnecessary steps. In B2B, by contrast, the process of placing an order is a multi-stage one and can be significantly extended in time.

Usually, placing an order for B2B users is not limited to simply clicking the "Order" button. Moreover, the selection of products and their direct order can be performed by users with different roles according to the organizational structure of the client or company. This approach imposes restrictions on the front end.

There are two popular UX/UI checkout approaches: single-page and step-by-step. In Mercury Theme, we implemented the single-page one. This approach is desirable because the one-page view consolidates information about products and the quantity, address, methods of delivery, and payment, as well as additional information about the order.

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

The item block allows a user to change the composition and quantity of products in the order. This block, among other things, takes into account the availability of products, as well as limits for the possible quantity to buy. Since there can be a lot of products (in a B2B approach, sometimes the number of products in an order can be measured in hundreds or thousands of SKUs), it is necessary to implement pagination in this block to have the page not too long.

Delivery and payment information provides the ability to specify an address by selecting from those available in your account or creating a new one, as well as a delivery or payment method. The shipping method and delivery address may affect the final cost of the entire order, so they are a prerequisite for placing an order. Delivery addresses in B2B, by comparison, must be selected from the organization's profile and cannot be any other, like the user’s home address.

There are differences in payment methods for B2B users. For B2C, popular payment methods are via credit card, Apple Pay, Google Pay, PayPal, and others. Then for B2B, in addition to corporate credit cards, bank transfers based on invoices and purchase orders are also options.

When it comes to the checkout process, the final item worth noting is the confirmation page. After placing an order, the user is shown information about the completed order, which contains all the information from the basket plus a unique number for the created order.

Summarizing the payment page, we adhere to the single-page checkout approach, and in the Mercury Theme, this is implemented with adaptation to the needs of the B2B market segment.

A user account in an ecommerce solution is designed to aggregate all user information: profile data, orders, favorites' list, addresses, payment methods, and more. The B2B segment is no exception, but it has its own characteristics. For the Mercury Theme, we implemented a portal approach to consolidate the data.

What is a portal approach and how does it differ from others? Part of the solution related to the user account is a site within the site: it has its own structure, navigation, and stylistic features. Unlike many B2C solutions, where the user account is organically integrated into the overall structure of the site, our approach allows users to expand the functionality in a fairly simple way, by adding new sections.

We have identified several important sections of the user account: the main page (dashboard), user data (profile), company details, delivery address, order history, shopping lists, and default settings. Any other information specific to a particular product implementation can be added to the list as well.

A user data block allows a user to edit the first name, last name, company name, contact numbers, profile picture, and other personal data. We implemented the minimum information, which, if desired, can be enriched with additional data components (user photo, etc.)

Address management is a list of created addresses that can be used when placing an order, as well as a form for creating a new address. Each address can be edited or deleted. For the convenience of viewing a large number of addresses, sorting and pagination are provided here.

The order history for B2B is implemented in detail. The user can view previously created orders, sort them, and search and filter by a number of criteria. Pagination 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 makes it possible to search for orders more flexibly.

A key feature in the order detail view is the ability to quickly reorder. This action will check again for the product availability. For each item, the available order quantity will also be checked. If there is less than desired, the order will be recalculated. Before proceeding to the actual checkout, the user will be alerted to any proposed changes.

Wish lists provide an opportunity to form pending purchases. The user can create up to 10 personal wish lists and fill them as needed. Each wish list can then be quickly transformed into an order with just a couple of clicks. At this step, establishing default settings allows the user to specify the desired payment and delivery methods for faster processing of standard orders.

Summing up the account management page, it should be maximally configured for typical tasks of the B2B segment. In the Mercury Theme, we incorporated a portal approach to user account management.

Search functionality is an essential part of any ecommerce solution. The difference between B2C and B2B may be the need for B2B cognitive search (such as Azure Search), since product data can contain various types of hard-to-index documents, even handwritten ones.

In the Mercury Theme, we implemented two independent search mechanisms: a global search for categories and products, as well as a detailed search capability for products within the selected category. This approach allows clients to search for products based on their needs.

If the buyer knows which category their products of interest are in, they can use the search filters within the category. If the user does not know the product category, then a full-text search of the entire directory can be used.

The global catalog search is a drop-down list of results including found categories and products, with the ability to switch to an extended mode of displaying products. Visually, advanced mode is the same as viewing category content, except for the lack of filters. The search results page also allows customers to switch between a tile and list view, and then quickly order products based on the available quantity.

Searching within a category is additionally enriched with filters. Each category provides its own set of filters divided into groups. When filtering, the number of relevant products in the catalog is calculated, allowing users to visually assess the completeness of the results. 

The B2B portal administrator can set up filters for each category individually using the available presets. This feature is included in the basic functionality of the Virto Commerce platform.

Summarizing search functionality, our ecommerce solution allows users to search for products of interest in a complex way, using both full-text search and advanced filters.
Read more about search in B2B ecommerce:

• Why Catalog Search is Critical to B2B eCommerce
• VirtoCommerce / vc-module-algolia-search
• Using Azure Cognitive Search Capabilities for B2B eCommerce Catalog

Let’s go over what structured data code we added to obtain rich search results in product pages of the Virto Commerce B2B platform. Although we have already said that product pages for authorized users should be closed to search crawlers, this does not mean that SEO should be neglected for B2B portals. For better visibility of the portal on the Internet, it is possible and necessary to create pages that open for indexing to reveal the benefits of the products offered.

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

Rich search results are important tools to increase CTR and get more visitors to the ecommerce portal. To exploit the full potential of rich search results for your business, add structured data to your B2B ecommerce product page template code. A task like this is usually carried out by a development team (or by an implementation partner) on the client's side, considering the specifics of the client’s products and their presentation on the website.

The speed and responsiveness of a B2B portal are two of the principal metrics that distinguish the best online stores from their competitors. Monitoring performance is very important, both in B2C and B2B options. But here, too, there are differences.

B2C users are focused on the checkout "here and now." For them, any delay in response will form a negative impression. The requirements in the B2B sector are even stricter, and the "lightness and responsiveness" of the front end is important. Ensure clients can connect via a mobile network with a weak signal when working inside a sheathed metal warehouse or perhaps from a basement. And besides, nothing on the screen should distract the client from placing an order, i.e., no extra banners, etc.

The Virto DevLabs team regularly monitors performance and strives to improve it. This is an essential task for the vendor development team. In the Mercury Theme and the current MVP variant, we can demonstrate high performance.

For the MVP, we continue to improve the speed of the theme, and additional attention will be paid to performance in the upcoming releases. Our goal is to achieve green for key metrics and keep them that status from release to release.

So to sum up B2B portal performance, in addition to optimal UX/UI and code, the performance of an ecommerce portal over a certain period of time is also determined by the development of new technologies and their future implementation on the platform.

PWA or Progressive Web Application is a technology that allows customers to install your site on a smartphone as an application. The advantage for B2B ecommerce is that now you do not need to develop an iOS application and an Android application in addition to the site. More good news is that Progressive Web Apps are better indexed by search engines and improve SEO performance. In Google, if PWA technology is used, the site will be ranked higher (but no one will tell you how much higher).

The Virto DevLabs team is actively working on adding the ability to download the ecommerce portal as a PWA. This will allow you to use many of the well-known benefits of PWA for more productive work by corporate buyers. This includes the ability to work offline, add a barcode scanner on the site, and provide notification of the status of the order when it moves along the order pipeline to delivery, etc.

The Mercury Theme is part of the Virto Commerce platform using Virto Storefront. Both applications are built on .NET 6 and provide 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 has its logics: Vue 3 is a very powerful engine with amazing performance and a low entry threshold for developers. A sufficient number of debugging mechanisms, excellent support at the IDE level, and a simple component approach is available with Vue 3 to quickly implement ecommerce front-end development tasks.

TypeScript is used as the main theme development language. In our approach, it is justified: full typing allows users to maximize the use of IDE resources and significantly reduce the number of errors in the development process.

To implement the visual design, we used TailwindCSS. This framework is one of the most traceable and flexible. Its approach allows users to quickly implement visual solutions using standard style sets. Thus, developers focus on the layout process, minimizing the work with styles and reducing the number of non-standard classes and styles. This approach allows developers to simply expand the functionality of the theme, developing new components without mixing logic, layout, and styles.

Vite is used as the assembler of the final solution. This is a turbojet-like assembler that is comparable in functionality to the classic WebPack, while possessing amazing speed and flexibility. Development is carried out using Hot Module Replacement, which makes it possible to see any changes in the code on the fly. The assembly is performed with the necessary optimizations, which reduce the amount of code delivered to the browser.

The file structure of the Mercury Theme itself is implemented with a split into areas of responsibility. Everything is laid out and systematized: API connectors, logic-less components, large logically connected blocks, page templates, and localization files. Each step is carefully crafted to provide an intuitive theme structure that can be used flexibly in client projects.

The next steps for us are the implementation of server-side rendering and facilitation of the Virto Storefront itself.

The Mercury Theme, created in Virto Storefront, is an essentially complete B2B front-end solution for ecommerce of any level. During the development process, we took into account a lot of wishes from our implementation partners and end-user customers. We implemented a flexible and extensible front-end theme that can be used in subsequent client projects with a minimum of revisions.

Many functions within the theme are reusable. The separation of logic and presentation levels allows users to change the visual design, while maintaining a large amount of well-developed logic, and the technological base enables fast and high-quality development.

And the last chord is that the Virto DevLabs team continues to improve the Virto Commerce platform with each sprint, so there are many new features, and satisfied customers, ahead.