How to Build a Better B2B Web UI

What are the key things that you should consider while designing and developing a B2B/B2E web UI?

Here are the 6 key things that I see most that people miss to consider:

1. Keep the knowledge in the systems.
2. Make the apps endure.
3. Get out of Browsers.
4. Declutter your Desktops.
5. Keep the keyboard shortcuts.
6. Close the Feedback Loop.

What follows is a 5-minute-read explaining the above 6 points.

1. Keep the Knowledge in the Systems

The first consideration for a B2B application is to build a Design System and a Component Library.

So, What's a Design System ?

"Design System offers a gallery of design components that follows UX design principles, thereby enabling a consistent look and feel."

Carbon Design System by IBM

Design systems are like living Style Guides that hold documentation and code. Design systems will be the one place where each and every UI component will be maintained and referred to by designers and developers.

"Component library contains ready-to-use well-designed JS-framework-specific components that allows you to quickly build design-rich, high-quality responsive web apps."

Component Library of SalesForce

Component libraries are similar to design systems. Here the components are not just visual but hold behaviour, too. Each component is more like a little application - at a molecular scale. For example, a Grid or a Login component. With component libraries, you don't have to rebuild a custom grid component or login component for every application in your enterprise.

Thanks to frameworks like Angular and React, component libraries are easy to setup, as we have moved away from the notion of building web pages to building components.

What's the Use of a Design System?

UX Designers usually use a front-end style guide as hand a off document for the developers. This is a static document containing the specifications of UI elements, mostly visual. But this document can become ineffective when there are multiple projects with many developers and designers, as there will be no single source of truth. And a style guide can get outdated due to its static nature.

Design systems serve as a single source of truth for both designers and developers. Having the knowledge in the systems (design system and component library) reduces the bus factor, too.

Why Is it Essential for a B2B Application?

Typically, an employee uses at least 3-5 applications within an enterprise on a daily basis. A consistent user interface, across those 3-5 applications, will lead to higher productivity and also requires less onboard time for a new employee.

So B2B applications should build and leverage design systems/component libraries to ensure a consistent user interface.

2. Make Them Last

B2B applications are normally used for 6 to 8 hours a day so it is very important to continuously test their endurance. Earlier desktops were thick clients and the developers had standard ways to fine tune their applications to deal with endurance issues like memory leaks, performance slow down, etc. But with web applications, browsers being the runtime, coding for many browsers has become much more complicated.

So it is very essential to perform endurance tests on all targeted browsers as part of continuous integration (CI) builds at regular intervals (may be for every Sprint) to keep track of the application's endurance capacity.

3. Get Out of Browsers

Browsers are the runtime environments for your web code. Coding to multiple runtimes is always a pain in the neck. For B2C applications, we can't avoid serving the application on a plethora of browsers but for B2B applications you don't need to do target every other browser. You can restrict the users to use only the browser runtime by packaging your web application into a desktop application.

You can wrap your SPA web application using the Electron framework to create desktop applications. Electron uses Chromium and Node.js (which will be part of your distributable desktop client) to render. Electron also enables offline features which can come in handy for applications in places like cruise ships where internet connectivity can be troublesome.

4. Declutter Your Desktops

A B2B user wants to do his/her job effectively. They know where things are and what they need to do. But too much clutter on their application's apge might really put them down at a subconscious level owing to less productivity and bad user experience.

Minimalism is a design style wherein clutter on their design estate (be it a portrait, a product or even life) is kept as low as possible. I see sticking to a Mobile-First-Design approach for a desktop application will ensure the design stays minimalistic (avoiding too much visual clutter).

5. Keep the Keys 'Hot'

We are used to keyboard shortcuts on our desktop applications. But those shortcuts are the ones that I see missing in most B2B web applications. When the legacy thick-client B2B applications were transformed to web applications, most of the teams ignored the keyboard shortcuts feature, making the application less efficient.

Since B2B applications need to focus on user productivity, it is necessary to have keyboard shortcuts in them.

6. Close the Loop

Once a B2B application goes live, we almost never collect feedback on features or usage analytics. Usage analytics provides clear details on the features that are widely used and those that aren't, as well as which role-user uses which feature extensively or rarely.

So it is always a good practice to configure analytics or conduct a survey to get feedback from the users. And as you know, feedbacks always help you in improving the current system and in avoiding mistakes in your future systems.

Last One

Lastly, pick a web framework (like Angular, React, Vue.js) that fits your enterprise and the team. Adopting to one framework (or, at the most, two) across the enterprise shall provide a great advantage in reusing components and talents across applications. You can find many articles on the web on how to choose a framework.

Hope you found the list useful. What will be your top 6? Is there something I missed ? Let me know in the comments section.