Shhh! The details of the differentiated design of SaaS products, I don’t tell the average person

Smart Marketing is a SaaS product for B-end enterprise users, providing them with lead data acquisition, CRM customer management and value-added service capabilities. This article has carried out in-depth thinking and experience optimization of this product, let’s take a look.

Smart Marketing is a SaaS product for B-end enterprise users, providing them with lead data acquisition, CRM customer management and value-added service capabilities. In order to occupy a place in the highly competitive B-end market, we have carried out in-depth thinking and experience optimization on the product design. This article mainly introduces our design thinking process in this process. For the consideration of product privacy, the relevant data has been desensitized.

01 Pre-design work

1. New term SCRM

Smart marketing belongs to the function of SCRM system, and the common point with traditional CRM is: although it is all customer relationship management, it focuses on improving enterprise work efficiency, scientifically conducting sales management, and efficiently conducting customer relationship management and customer follow-up.

The main difference is: whether the social tools are connected and the social network is integrated; if the social network and social tools are connected, and the extension and expansion of functions in this regard are emphasized, it is SCRM.

Key word: social. Since social networking is integrated, the visual display of people and organizations is the first starting point of design.

2. Master the core process

Main core processes: market customer acquisition – lead allocation – customer follow-up – business opportunity management – ​​business process – after-sales management.

After understanding the main core processes, the efficiency improvement goals of this revision were determined: around lead allocation (interactive optimization of screening lists), customer follow-up (visual display of information fields), and business opportunity management (carrying of detailed content).

3. Analysis of current problems

The analysis and sorting of the existing problems of the product are summarized as follows:

Once the upgrade direction is determined, the key pages can be transformed and upgraded from the perspective of visual style and improving efficiency.

02 Visual Brand Language

In terms of design language, we follow the design concept of “Vision” of the Zhongtai design brand, and combine the UI component library, illustration component library, and data visualization components of the design system, which not only follows the brand attributes in visual style, but also must To a certain extent, the production efficiency of the development has been improved.

1. Vision Design Values

Light technology, futuristic sense, and sense of space: The brand language advocates a concise, three-dimensional and technologically trustworthy way to express the core concept and characteristics of the product. Through space, shadow, parallax, and depth of field, the logic and rationality of information presentation, the sense of hierarchy and order are improved.

2. Improve design quality

The visual elements that jump in a large area are rarely used on the B-side system, and the pages that can be used to design are probably: homepage promotion, landing page brand communication, icon elements, empty state, help guidance, and announcement system.

Deep thinking: After designing a consistent default diagram, is the design complete? More to think about here. For example, the guidance of permission error scenarios: pictures + copywriting + buttons/guidance clues. It can be used to solve pressing problems faced by users or to guide new users on a product experience journey.

3. Social basics – such a small design detail as an avatar

The avatar here can be a user image or a company avatar. Compared with traditional names, avatars have a larger visual area, richer colors, and more attention-grabbing than text. Appropriate and reasonable use of avatars in interface design can improve the level of emotional design, make the product more friendly, and help the product achieve its goals.

The usual user avatar can basically be represented in three forms: empty state, initials, and user picture. However, due to the restriction of audit factors, this small function cannot usually be implemented in the initial stage of the product. This problem needs to be solved at the visual level. Using the method of random coloring of the initials of the name can transfer the user’s first attention to the key information of the character, or “add some color” to the entire page.

03 Improved focus efficiency

1. Workbench – a collection of tasks

Core functions: statistical data, to-do tasks, quick entry, notification announcements.

The items that the user needs to do, the progress of the item processing, etc. are completely displayed, which is convenient for the user to view at any time and improves the user’s work efficiency. In principle, the design is divided into modules, and the total number is controlled at 5-9. Different roles have different needs and should provide a differentiated view based on roles.

2. Efficient filter list page

Screening is very important for the entire SaaS system. It can help users quickly locate the data in the form and shorten the time for users to search for data.

1) Clear information structure

The filter list page can be divided into global operation area – filter area – list operation area – table area.

2) Filter type analysis

Divided by position: can be divided into sidebar, horizontal bar, side by side;

Divided by initial state: can be divided into expand/collapse, tile/pop;

Divided by execution time: can be divided into real-time update, manual update;

Divided by display results: can be divided into filtering progress, highlight filtering results, result count, empty results, filter and search in results, result clear/result reset.

3) Structural level analysis

When there are too many filters (usually between 5-15), there are too many filters, and you need to scroll to see the filter results, which will be awkward for users to use. Therefore, in the case of a large number, the screening items are generally folded, so as to ensure that the overall screening area is not too large, and at the same time, the commonly used screening of users is placed in the front, which can meet the basic business needs and usage scenarios of users.

4) Design application practice

Combined with the characteristics of the project, the tile type is first used in the design.

The disadvantage is that it takes up a lot of space. It needs to be folded and put away.

Execution time: The original step of clicking the query button has been removed, and the filtering and interaction of real-time update information will be more efficient.

Small details of linkage interaction. Refers to the interrelated changes between controls, for example, after a certain value is selected, other filter items change accordingly. For example, under normal circumstances, the time selector input box for product selection can extract shortcut options, such as today, tomorrow, and within a month. It is not enough to click on other and then link to the time selector, which can ensure the visual consistency of the page. , and improve the efficiency to a certain extent.

Header custom bar: Allows users to choose what the form displays according to their preferences. This feature can meet different user goals when multiple metrics and datasets are involved.

3. The revision and design of the phone bar

Making a phone call is also a common operation for users. The design has removed the super many button options in the original version to reduce visual interference for users. Visually emphasize and highlight important operations.

04 Write at the end

Above, we only share a simple design experience for the design of smart marketing. We have only just taken the first step in the exploration of SaaS experience design, and will continue to deepen the differentiation between SCRM and traditional systems. At the same time, based on the development direction of the business in the direction of Taiwanization, the design side will further develop the road of design empowerment in the future, to enable the expansion and application of more scenarios under the product system.

This article is authorized to be published by everyone is a product manager with the authorization of the media @58UXD. Reproduction without permission is prohibited.

The title image is from Unsplash and is based on the CC0 protocol.