Comprehensive understanding of B-side product design: basic literacy

Today, the influence and role of the Internet are growing day by day. In addition to changes in our daily lives, its penetration into the business field has also been fruitful.

More and more companies are beginning to use digital solutions to help their business development, including daily management, operations, statistics, etc. Or they are developing new business forms through the Internet to upgrade the industry, such as the "new retail" field that has been popular in recent years, which is an attempt to upgrade and transform the traditional retail industry through the Internet.

[[272861]]

Like the mobile Internet boom, enterprise Internetization is also a general trend and a recognized trillion-dollar market. This change has just entered the early stages and is full of opportunities and room for imagination.

Therefore, the products and demands of B-side have developed rapidly in the past two years, and the visual and interactive requirements for B-side interfaces have also increased day by day. Mastering B-side design is a necessary condition for today's UI designers, and it can also increase our job search breadth and professional competitiveness.

What is the B-end product?

In China, the industry is used to classifying Internet products into "B2C" or "B2B". B2C stands for Business-to-Consumer, which means services from business to customer, and B2B stands for Business-to-Business, which means services from business to business. It is further abbreviated to "2C" or "2B".

C-end products are products for end-consumer users. For users, they are mainly used to meet their daily life needs, such as entertainment, consumption, learning, travel, etc.

B-end products are products for corporate users, through which users conduct daily business activities, such as corporate inventory management, sales statistics, employee attendance assessment, etc. It can be said that products used to solve corporate needs are all B-end products.

Although enterprise-oriented products are unfamiliar and sound boring to novices, the coverage of B-end products is very wide. Because different enterprises are in different industries and business forms, the requirements for B-end products vary greatly. The platform on which the product runs may be a mobile phone, a tablet, a customized Android device, a desktop client, a web application, etc.

For novices, it is unrealistic to master all types of B-end products at once, so we choose the most widely used "web program" as the entry point. Moreover, in the context of the domestic Internet, the narrow interpretation of B-end products can basically be equated with the "web program" for enterprises. To use a more down-to-earth name, it is a management platform.

Management backend is already a must-have for UI designers in their daily work today, and I believe many designers who are already working have already experienced it. Next, let’s take a closer look at the basic knowledge that needs to be mastered in the design of the B-side management platform.

Common B-end product types

In B-side products, we need to first understand several of the most common business types. They are:

1. ERP (Enterprise Resource Planning)

ERP is a platform for unified management of the resources owned and mobilized by an enterprise, including the supply chain of goods, sales audit, inventory management, cost accounting, etc. It is an essential system in today's industrial field.

For example, a chain retailer first purchases a certain product at a specific price, the product is transported to the warehouse for inspection, and then the product is transported to a store and sold at a specific price on a specific date. The system can then track the entire sales status of the product and calculate the final profit.

Representative ERP systems include products from manufacturers such as UFIDA and Kingdee.

2. OA (Office Automation)

The OA system is a solution that automates office processes in the form of programs. It is a collection of all information processing and management of an enterprise except production control.

Common usage scenarios: You make a report that needs approval and confirmation from your leader, and after confirmation, it is sent to the relevant responsible parties. Then, when you submit the document in the system, as long as the leader approves it in the system, the system will automatically distribute and back it up, increasing the efficiency of internal document circulation.

The more representative OA system service providers include Fanwei, Lanling, Zhiyuan and other manufacturers.

3. CRM (Customer Relationship Management)

CRM is a tool that companies use specifically to manage their customers. Especially for the retail service industry, maintaining better relationships with customers is the top priority for increasing sales and repurchase rates.

In daily life, the membership cards we apply for in stores and the user information we fill out are recorded in the CRM system, and the background can view and count customer data, consumption amount, account balance, etc. In most cases, the brand promotions we receive on our mobile phones are operated by the CRM system.

The more representative CRM products include Salesforce and EasySales.

4. SAAS (Software as a Service)

SAAS is a relatively broad concept. It usually refers to online software services provided by a third party to an enterprise. It can include the above service types as well as some more detailed requirements. SAAS is the fastest growing B-side service type in recent years.

For example, small and medium-sized teams will use some SAAS software for team collaboration, such as publishing, tracking tasks, sharing internal documents and instant communication, etc.

The more representative SAAS products include Teambition, Tower, Slack, etc.

5. CMS (Content Manage System, product background)

The product backend is a necessary system for every Internet product, and it is also the most common and largest management platform for B-side products. We manage the front-end products through this backend system, including publishing and editing content, handling users, and statistical data.

For example, there is usually a report button in social applications where users can report illegal content. The reported information will have a corresponding prompt in the product background, and the operator can review and take action.

The difference between B-end and C-end

Next, we will talk about design issues. Because B-end products serve different objects, there are certain differences in design between them and C-end products. Let’s analyze the differences between them below.

1. Demand characteristics

For B-side products, the problems to be solved are usually relatively clear and explicit. For example, the retail company mentioned above needs to record the process and data of products from purchase to sale in daily operations, and the product functions will be developed around this goal.

It can be said that the biggest difference between B-end and C-end products in terms of demand is that they solve different problems. C-end products are designed to solve user needs, and everything from function formulation to interaction and design is centered around target users. B-end products, on the other hand, solve business operation problems, with the core being the complete realization of target functions. Users are often required to sacrifice experience to adapt to functions, rather than delete or modify functions for the sake of experience.

Unlike some simple C-side projects, even if we don’t understand the requirements, we can easily complete the design as long as we get the product prototype. However, the requirements of the B-side are often very complex. An interface or component will have many different states and details, and the operation contents are intertwined. When we lack understanding of the requirements, the design we make will be full of loopholes.

2. Interactive Features

For general C-end products, products are usually just carriers for obtaining information. We use the operation interface to obtain products, videos, dynamics, news and other content. In many cases, some operation status and interaction methods are hidden to better display the content.

However, in B-side products, although the display of information is also important, the more important purpose is to filter or process information through a series of operations. Because these operations often have many steps and many operable options, the product must have clearer and more specific feedback for the interaction.

For example, all operable functions must be listed and displayed, and mouse hover, jump, state change, etc. must also have corresponding styles, and many operation steps need to inform users of the results through text prompts. Compared with the interaction on the C-end, although the B-end product may appear "long-winded", the reason is to give users a more accurate operation experience and prevent users from "guessing" or deliberately "exploring" small details.

3. Design features

When we design for C-end users, we often need to add some additional visual elements to present the brand and emotional expression, and also to meet the personalized needs of target users, so most C-end products look "fancy".

B-end products are designed to solve corporate problems and require users to operate for a long time to complete work tasks. The fewer elements that are irrelevant to the operation and display content, the better. Many newcomers are keen on the management interface designed with C-end visual standards like the one below, but they are too redundant for the real user experience.

An excellent B-side interface design must be restrained, simple, and capable in terms of visual expression, because the more visual elements that exceed operational requirements, the heavier the cognitive burden on users.

4. Technical features

Unlike mobile clients, web pages can change width at will, and the display content area varies greatly. Often we have to consider both the normal display of 1024px and the display effect at 2560px width. Therefore, this requires designers to have a deep understanding of front-end knowledge and frameworks, because without this knowledge, the adaptive layout design of the page will be out of the question.

Therefore, before designers start designing for the B-side, they must be proficient in HTML5 and CSS3 and understand how JS calculates page layout.

In addition to completely independently designed and developed projects, there are also a large number of B-side projects that are developed using third-party frameworks, such as Ant, SBadmin, Element, etc. This is because these third-party programs can help the team save a lot of development time and energy and avoid reinventing the wheel.

Designers need to design pages based on the characteristics of these third-party frameworks (similar to changing skins). The more solid their front-end knowledge is, the smoother the design process will be.

In fact, the design content of the B-side can be divided into several modules, and each module has specific knowledge points and theories to master. So in the end, let's share what we are designing when doing B-side design.

Content designed for the B side

1. Layout design

The B-side product is a business system that needs to include a large amount of information and operation functions. One of the design tasks is to define a layout framework to integrate the information and operation functions to achieve an orderly and unified operation experience.

Usually, the layout of the management interface includes the following fixed contents:

• navigation
• Status Bar
• Content Area
• Pop-up/Sidebar

For example, several common layout types:

Of course, the layout design is far from over here. In addition to some specific fields and links, we also need to take into account adaptive front-end technology and how to ensure the normal use of this layout while stretching the browser.

For example, the most popular way of adaptation today is to use the CSS grid division system, but this is a very complicated topic, which we will discuss later.

2. Control design

As part of UI design, the design of controls is also necessary. The design of most controls is similar to that of general web page design, such as buttons, menu bars, paging bars, breadcrumbs, notification bars, drop-down menus, etc.

There is no technical difficulty in designing this part, but as we mentioned earlier, the demand for interactive feedback of B-side products requires us to fully consider their status when designing controls.

For example, a button can contain multiple states such as default, mouse hover, click, clicked, unclickable, loading, etc. The more comprehensive these states are designed, the better the operation experience will be.

3. Form Design

Form is a word that is frequently used, but unfamiliar to newcomers. To put it simply, it is a collection of controls used to enter information in the interface, such as input boxes, check boxes, radio buttons, drop-down boxes, etc.

In B-side design, it is often necessary to use a series of form controls to form a complete business operation. For example, to create a user account in the background, you may need to enter the user name and password in the input box, and then use the radio button to select the gender, the check box to select the hobby, the date drop-down menu to select the birthday, and so on.

Alternatively, we can use the form contents to perform advanced filtering operations, setting filtering conditions through different form controls to narrow the scope of the results.

4. Table design

In B-end products, data is mainly presented in the form of tables. However, most designers have no idea about tables and have never even used Excel.

Tables are one of the most important components for B-side products to present information and data. Whether it is users, products, orders or records, we need to rely on the presentation of tables to sort them out.

However, table design is not just about drawing lines and squares in a boring way, but requires flexible adjustments based on business attributes, field types and display quantities, as well as consideration of the interactive methods for editing, selecting, moving, and other operations on each piece of data.

5. Graphic Design

Finally, let’s talk about the design of charts. As the concept of big data becomes more and more popular, people pay more and more attention to data. Whether in the news or in the PPT of the meeting, we can see all kinds of data content. And these data are usually presented in the form of charts.

Common charts include line charts, pie charts, bar charts, curve charts, etc. However, there is a common fallacy that many novices mistakenly understand chart design as data visualization design. Data visualization is to present data in a more complex and diverse way. It is not only more difficult to design, but also requires extremely high development costs. We will explain this in the following content.

Therefore, in B-side design, we only need to focus on understanding the mainstream chart types for data presentation and understand how to use them according to the needs of data presentation.

Summarize

The above is the first article about B-side design literacy. It simply educates people about the design of the management platform, so that everyone can have a preliminary understanding and correct some wrong ideas.