Importance of Getting UX Design Right for B2B SaaS App

Using B2B SaaS Apps

Having worked in the enterprise software industry for a few decades, I know firsthand that UI and UX Design has been an afterthought in enterprise software products. That might have been okay in the past because the browser technology was in its infancy and there weren’t smartphones around. Besides, it was not customary for end-users to weigh in on the purchase of enterprise software.

As such, enterprise software purchases were made primarily based on the value proposition of the core product functionality. The democratization of software was also limited and end-users in many cases were a few “experts”. These experts had worked through the frustrations of using such software and management relied on such users to run their business.

This is not true anymore. Well, technology has advanced and user interface devices have become more numerous. Also, the enterprise software needs to be convenient for the use of all employees of a corporation. For example, let us consider a CRM (customer relationship management) system. A decade or two ago, a company may have purchased a system from Siebel (acquired by Oracle), which perhaps involved buying a few end-user licenses for use by experts in sales operations. These experts would operate such systems and provide reports to sales staff and management.

Cost-cutting trends for both capital and labor have led to the advent of “as a service” solutions. For CRM, now we have cloud-based B2B SaaS solutions like Salesforce, which is used by all the sales staff. And, user experience and user interface design have become key to the success of such products.

Design Challenges with B2B SaaS Apps

Before jumping into the challenges of designing B2B SaaS apps, let us quickly capture the key characteristics of such apps. Here are a few key ones:

• The software is not run in-house; but instead hosted by the provider on a 3rd party’s IaaS (e.g., Amazon Web Services)
• Each client accesses the software over the internet using a web or mobile browser or app interface. As such, the service provider ensures that the software service is multi-tenant. And, data is secure and private to each client
• The pricing model is subscription-based, usually a small charge per employee per month

This infrastructure imposes certain requirements on the software, such as reliability, availability, scalability, and performance. This is really no different from perpetually licensed software hosted in-house. But,  hosting such software on the cloud exposing it to spikes in load across the full installed base requires special attention. I love the Product Arts website which provides more complete coverage of SaaS solution requirements.

What is the impact on design? There are two aspects to consider: B2B and SaaS. In a B2B environment, the designer has to often deal with a more complex system than B2C or consumer apps. There are normally a whole lot of features; involving data sources, data processing, data privacy and security, user authentication, roles, and privileges, among other functionality. The pressure is on the designer to expose a lot of product features to the corporate user. It is less about the look and feel, and more about productivity and performance. Knowing what to expose and paying attention to the workflow will be important in keeping the design simple and intuitive.

For the SaaS part, a designer has to keep a few things in mind about the environment. Performance is generally a key issue for enterprise users. Given that your backend is on the cloud, the UI development has to optimize data fetches and use other techniques to ensure acceptable latencies for the application user. Second, such environments typically have different classes of users and different service levels and the UI development could discriminate among such users and service levels that make business sense. Finally, a SaaS customer could be more fickle, and a satisfying user experience can help a lot in avoiding customer churn.

What is the right time to focus on Design?

There are many instances when businesses consider UX design as an afterthought, perhaps a few weeks before launch. How to iterate UX UI Design for Enterprise Applications? discusses time-dependent actions, but ideally, UI UX design should be taken up several months before product launch, when the product development is starting. Among other benefits, it ensures that the server-side API requirements are known on time. And, there is no cost of retrofitting them later. 

However, it is important to note that this is not an all-or-nothing exercise. User experience design starts with user research and produces interaction designs and mockups. The next step is to establish the roadmap to put a timeline for implementation needed to have a satisfying user experience. In this regard, UX design is an iterative process, where the design can be continuously enhanced to meet the needs of users. 

Even when the opportunity is to revamp an existing application, taking a lean approach with iterative design changes ensures that you reap the benefits of design changes as you make small changes. That’s why Yuyiii took a lean approach to UX.

In summary, when considering UX UI design for B2B SaaS applications, consider

(1) starting early along with initial stages of product development

(2) establishing a roadmap for design enhancements

(3) take a lean, iterative approach to design

Getting the Design Right – A Case Study

Super Centric is an independent Self Managed Superannuation Fund (SMSF) management company in Australia that provides business services related to compliance for accounting, wealth, and portfolio management firms throughout Australia. 

Super Centric approached Divami about improving the user experience of their application. A deeper look at the UX design of the application revealed a few issues:

(1) lack of personalized or role-specific dashboards

(2) lack of seamlessness in user flows, which required more clicks to navigate, and

(3) lack of contextual information, which made it harder to know what is important

From the perspective of the user experience of Super Centric’s B2B SaaS app, we needed to fix these issues. The ultimate goal was to make the experience more satisfying. Let us now review these issues in more detail to understand what it means to do UX design right.

Role-specific Dashboards:

The redesign of the Super Centric application maintained the left-side navigation bar; which presented icons for the key entities, Firm, Client (a financial fund), jobs, and queries. However, it did not provide a dashboard for the overall status of all entities. It also did not include jobs and queries that would be important to know for a superuser like an Admin. Instead, the old design had a screen called “Insights” which listed some key metrics. 

Screenshot 1: Insights Screen of Existing Design

In the new design, the Admin Dashboard does provide the same metric. But, it also provides information about jobs and requests that need attention along with their summary information in a visually appealing way. 

Screenshot 2: Admin Dashboard

Another element of a good design is to display information that is relevant to the user with a specific role. For example, a user with the admin role reviewing the admin dashboard can show interest in some key metrics, such as outstanding jobs and requests. The revamped dashboard shows the aggregate number of firms, clients (a financial fund/entity in a firm), jobs, requests, queries, and notices.

Also, there is a trend graph of the number of jobs, requests, etc. Clicking on a metric takes the user to a detailed screen about the metric. On the right side, there are two important KPIs; the number of jobs or requests completed and the Expected Data Delivery (EDD) rate. The EDD is important to show the client how fast data was delivered.

If one scrolls down this page, they can find details of the jobs, requests, notices, and queries; including their types and details on each type.

Seamlessness of Workflows:

The Firms page in the old design had information cluttering with 8 cols per page, with some extraneous information like “Services”.

Screenshot 3: Old Design of Firm View

In the new design (given below), we aggregated information and provided a clearer visual. Also, the new design highlights what needs attention from the user – highlighted as a red dot on the Jobs column.

Screenshot 4: New Design of Firm View

This is important for increasing the usefulness of the information and productivity of the user. The seamlessness of information flow was enhanced by the ability to drill down from the Firms page to the Firm Details page for a specific firm by clicking on the firm row. 

Screenshot 5: Detailed View of Firm

We grouped all actions for a specific firm, such as adding a client to a firm. In the old design, assigning a client was a separate button elsewhere, which broke the seamlessness of the workflow. 

Screenshot 6: Adding a Client widget

Using Contextual Information:

In Screenshot 4, showing the new design of the Firm view, we prioritized information and provided contextualization to provide a clear view. For example, actions that could be taken in the context of a Firm were not listed. Instead, you can view possible actions only by hovering over the right side of the row of a Firm. Besides, the widget to add a client (Screenshot 6) could be pre-populated with the values of some fields, to take advantage of the context.

The Design Payoff for B2B SaaS Apps

A well-executed UX design has potential payoffs such as increased revenue, more users of the application, reduced support costs, etc. However, one intangible that may be overlooked is the personal benefit to the corporate users themselves. A B2B SaaS application that has a good user experience can support the career growth of the corporate user by increasing their productivity.