Wang Hai, Vice President of Alibaba and General Manager of China's Domestic Trade Business Unit, proposed that 1688 has entered the era of digital marketing platform from the era of information platform, allowing 1688 users to complete the entire business closed-loop of marketing and sales integration within the platform.

The mission of 1688 has also been upgraded to "In the era of digital economy, let the world have no business difficult to do!" In the new business situation, in order to better meet user needs, Alibaba (1688) must upgrade its main customers.

Home Page Importance

The home page is not only the central scene of business diversion, but also an important "facade" for platform sellers to judge the platform playing method and for buyers to perceive the platform value. From the UED professional perspective, the home page is the core scene that defines the experience paradigm and visual style in APP.

How to change?

Inventory phenomenon, defining problems

Meet the new demands of the business: the platform has different phased strategies. 1688 has transformed from an information platform to a trading platform, and now it is transforming to a digital marketing platform. The old content framework is difficult to carry the new development of the business.

Improve diversion quality: from the perspective of the past data effect, we need to re judge how to balance and optimize before the purchase demand of For features and the purchase demand of services in general, and improve the flow conversion efficiency of the home page.

Experience upgrade: Mobile APP naturally grows on mobile phone system, and the change of system style also affects the change and upgrade of APP. Before the 8.0 upgrade, there were more than 5.0, 6.0 and 7.0 scenarios designed by different designers at different time points in 1688APP. To 8.0, the APP is expected to be unified and upgraded from the framework layer, presentation layer and brand.

Revision strategy

1. Focusing on user value, upgrading content framework based on business approach

Focusing on the business before upgrading the APP, we received three appeals:

• Use the ability of algorithm to undertake the transformation of home buyers;
• Search is the core tool for category B buyers to find products and select suppliers, and more users need to be guided to use search more frequently;
• When the Internet traffic dividend reaches the bottleneck period, it is necessary to further undertake new users.

In the development of content framework, we focus on user value, abandon the content personalization in 7.0, focus on the personalization of products, only retain the marketing and content scenes of the large users of For, improve the exposure rate of algorithm recommendation area, and directly transform the home page of the products in this area.

2. Weakening the container, highlighting the content and shaping the mind

The visual container is upgraded, the visual frame is flattened, and "large spacing separation" is selected to leave a clean and concise visual space for the content.

Streamline the content grid to avoid the burden of form on users' reading.

Improve the blank rate, improve the overall permeability of the page, and leave more refreshing and relaxed reading space for the content.

Increase the gradient of font size, increase the color gradient of font, and improve the clarity and readability of text.

Emphasize the characteristics of the board, shape the buyer's mental perception, and achieve business goals

Enhanced search: At 7.0, a test plan was launched to make the search "subjectively conspicuous", but compared with the previous immersive search, the data was almost unchanged.

In the 8.0 stage, from the visual presentation level, "enhanced search" does not mean that the search is designed to be more "conspicuous", but to achieve the goal of "making more users use search more frequently". For example, improving the accuracy and attractiveness of search shading words, hot search words, and increasing search layout may help achieve business goals.

Based on the click experience of the thumb in different areas of the screen when users operate with one hand, they chose to move the search component to a screen location that is easier to click and more focused, and the data improved significantly after going online.

Banner upgrade: 7.0 Banner has a high picture richness, and there are many description fields, so it is difficult for users to grasp the information of all Banners in 3 seconds.

In addition, compared with Class C users, Class B users are more rational. We choose to use a calmer and more restrained "visual tone" to talk with Class B businessmen, rather than rendering the atmosphere to guide clicking. (After the launch, two sets of Banners will be designed and launched according to the new and old versions of the same activity content, and the new version is about 48% higher than the old version of UV CTR)

For newcomers: take on users with differentiated interests, personalized second kill, and newcomer strategy.

Different expression of marketing scene mentality: marketing is composed of two parts, namely, selling the best products together and selling the best products every day. We judge that the main mentality of the best products is "selling hot and cheap", and the main mentality of the best products is "grabbing the best price in limited time and quantity". We choose to strengthen the expression of the most critical characteristics of the two blocks.

The content scene (live broadcast) is dynamic, interactive and real-time transmission: the square layout+content superposition form of the live broadcast room is abstracted to design. The dynamic sense of the big pit is transmitted to the user's live broadcast by the dynamic picture, and the interaction and real-time of the live broadcast is conveyed by the multi-dimensional real-time round robin bubbles of red packets and personalized goods.

3. Upgrade the brand and run through the APP scene

Why do you want to do brand design in APP applications?

Brand design is a flexible link between the content layer (platform value) and the receiving layer (users). For example, in the APP scenario, users can maintain a rigid and stable connection with the platform even if they do not specifically do brand design because of "dry goods" such as goods, businesses, and business opportunities.

On the contrary, the brand is well done, but there is no "dry goods" on the platform, and users will not go to the platform solely for brand design. We believe that the core value of brand design in APP applications is to help users recognize the characteristics of the platform and perceive the value of the platform.

From the perspective of design profession, brand design in APP applications is conducive to defining and unifying the experience paradigm and visual style in APP, and ensuring user experience.

How do you do it?

The business environment of each designer is different, and the strategies and ways to solve problems are also different. In the brand design within APP applications, the personal choice is to clarify the multi-level demands of the content layer (platform) and the value points of For users, and to recognize and perceive the characteristics and content tendencies of the reception layer (users), Determine the underlying design paradigm based on the bottom material of the content layer+the user characteristics of the receiver layer, and shape the user perception.

1. Graphic Paradigm

In Alibaba's business operating system, 1688 focuses on B-type business, and its direct service target is B-type buyers and sellers. The business is subdivided into high-end goods, Taoyuan factories, enterprise procurement, Taoyuan sources, WeChat business distribution, industrial products super stores, cross-border exclusive supply, etc. These are all scenes with certain B-type characteristics and sense of size, so in terms of the expression of APP business openings and conventional icons, Based on the dimensions of flat vs. realistic, light vs. heavy, lively vs. stable, the design paradigm of light imitation and weak contrast is selected for graphics to shape the calm and sense of weight of B-type scenes for buyers.

In addition, the abnormal/blank scenario is also an opportunity for the platform to interact with users and shape user perceived brands. In the drawing of empty emotional illustrations, try to shape a scene with weight, readability and meaning to show the corresponding empty state, and use slight dynamic effects to enhance the interaction of empty states. (Based on the value of empty information, we combine empty information with tool novice guidance in tool type scenarios such as favorites and my suppliers, without making regular illustrations.)

2. Color paradigm

Standard color

With the development of our business, we have enriched the 1688 brand color based on the new business situation, with orange red as the expression of marketing and benefit attributes, business blue as the expression of service and digital attributes, and gold as the expression of equity attributes.

Secondary color

In actual product design, brand color is not enough to express multi-level content in various business scenarios. Therefore, based on the VI brand color, more abundant brand auxiliary colors with different weights and levels can be produced.

Scene color rules

Define color rules based on buyers' roles and scene characteristics.

1688 Color gamut and color selection

The relatively calm 1688 color gamut is demarcated in HSB mode, which can be flexibly used in daily banners and business scenarios.

3. Dynamic paradigm and application

Dynamic effect is an important means of design. Good dynamic effect expression can enhance the intensity of information expression, clarify the hierarchical relationship of information, and improve the comfort of user experience. Before making dynamic effects, level the APP information structure to three layers to ensure that the content is presented in a simple and clear way on the page.

In the actual implementation, the realization of dynamic effect depends heavily on technical resources, so before dynamic effect design, one premise should be considered: dynamic effect design gains content expression, value can be demonstrated, and effect can be measured; At the same time, considering the merchant characteristics of the receiver layer users, we expect dynamic expression to give users a sense of stability, and give consideration to efficiency in design expression.

In the dynamic effect presentation part, it is mainly adjusted by the combination curve of slow entry, slow exit and slow movement. In general, the content enters the scene at a slower pace, and is loaded in layers. It explains the hierarchical relationship of information on the Z axis. The content exits at a faster pace and speed, and the content hierarchy does not need to disappear in layers.

4. Value transmission of business brand

In addition, in addition to the above basic dimensions, such as graphics, color, and dynamic effects, we also need to express our business brand to buyers and sellers to achieve the value transmission of business brand.

In the transition from 1688 to the digital marketing platform, the business put forward the slogan of "the source factory supplies goods to the world". We strengthened the expression of the concept of "the supply of goods to the world" through design means, using the launch page of the APP and the drop-down refresh space.

epilogue

These are the periodic records of this home page revision. In the visual system of 8.0, in order to better highlight the content, the visual container is chosen to be as light and flat as possible, and to talk with Class B businessmen in a calm and restrained "visual tone". Of course, this is the phased choice of designers and business students. Subsequent brand improvement and product optimization still need to be continuously polished in combination with data.