Alibaba Designer: complete copy of the revision of YuQue workbench


In January 8, 2018, Alipay’s official knowledge creation and communication tool, the official language bird, was officially launched.

Over the past three years, with the in-depth exploration of YuQue in knowledge creation, collaboration, communication and other scenes, while its functions have been continuously strengthened, it has also brought soul torture of “high starting cost”, “many scenes” and “what exactly does YuQue want to do”.

Therefore, in the last quarter of 2020, in order to solve the core problems of users, we re examined YuQue.

Combined with the core main line, we focused the first upgrade on the workbench.

Alibaba Designer: complete copy of the revision of YuQue workbench

Why workbench?

The workbench is one of the most important pages of YuQue. After new users register, they enter the workbench. Old users log in to YuQue. Com every day Com also enters the workbench.

It can be said that the workbench is a transit hub, and everyone starts their own creation from here every day.

Review the old workbench:

Alibaba Designer: complete copy of the revision of YuQue workbench

The old workbench can basically meet the needs of documents, knowledge base and team from here, but there are still three problems:

Link length

  1. On the left side of the workbench, the scene flow is carried out in the functional dimension. The concept threshold is high, and it is difficult to reach the user’s mind.
  2. New documents of different types are stored in the form of pull-down menu. The entrance is deep, and the core document function of YuQue cannot be directly reflected on the workbench.

Mental disorder

  1. It is dynamically placed in the workbench, which is different from the mind of the content flow of the workbench and interferes with users.
  2. The left navigation has many functions, high cognitive cost and difficult decision-making.
  3. Recently, the content of the list is chaotic.

Old style

  1. The visual expression is old and the sense of page quality is low.
  2. Redundant visual interference elements reduce the efficiency of information transmission.
  3. Centered layout, low screen efficiency and unfriendly to large screen users.
  4. Disrepair and poor visual consistency.
  5. Lack of emotional communication

design goal

Based on the above problems, the design goal of this revision is established

Alibaba Designer: complete copy of the revision of YuQue workbench

Insight and optimization

Link length

I It is closer to the user’s use scenario and shortens the flow link

In fact, many users do not start working on the workbench, but enter the knowledge base / team for further search, so the link from the workbench to the knowledge base / team is very important.

In order to shorten this link, we put the knowledge base in front of the team list and provide the user with the function of pin (custom workbench common list). Users can display their common knowledge base or team in the workbench, which shortens the use link for users to reach the core scenario.

Alibaba Designer: complete copy of the revision of YuQue workbench

Workbench custom knowledge base list
Alibaba Designer: complete copy of the revision of YuQue workbench

II Bring new function to front

The new button of the old workbench is not retracted by pulling down the menu. Therefore, in this upgrade, we will put the new function in the front of the upper right corner of the page.

Alibaba Designer: complete copy of the revision of YuQue workbench

For new users: more directly convey the core functions of YuQue to new users.
For old users: shorten the new process and reduce the exercise load.

Mental disorder

I Unified workbench mind

Previously, there were not only recent documents in the workbench, but also people’s dynamics, which made the mind of the workbench ambiguous.

So we integrate the dynamic list in the workbench with the concerns into the discovery,Form a mind of [workbench – collaboration and creation] [discovery – sharing and communication] for users.

Alibaba Designer: complete copy of the revision of YuQue workbench

II Integrated navigation bar function

Hick’s law says that the more choices a person faces, the longer it takes to make a choice.

In combination with YuQue, we need to strengthen the product form of knowledge creation, collaboration and communication, as well as the data research of users clicking on the left tab. We reshape the left navigation bar, and pre integrate, integrate or stow the functions in combination with the above two points.

By clicking on the data, the user can gain insight into the aided design, reduce some functions of the list on the left that are less used, and strengthen the knowledge base and team functions that are heavily used by everyone, so as to make important information clear at a glance:

Alibaba Designer: complete copy of the revision of YuQue workbench

III Refine recent list content

Recently, the list is located in the center of the workbench and occupies the most important C position. In the past, the list carried too much content, and the detailed operations of teams, knowledge bases, documents and other dimensions were stacked here. The redundant amount of information made this most important area useless.

We re sorted out the information dimension, selected the four most important dimensions “new”, “Edit”, “Upload” and “comment”, and divided documents, resources and topics into three tabs.

Alibaba Designer: complete copy of the revision of YuQue workbench

Old style

I Style Exploration — reshaping design language and improving design quality

What kind of style is the style of YuQue?

With such a problem, our team conducted a brain storm and implemented the emotional version of YuQue created in the previous exploration into the visual upgrade.

Alibaba Designer: complete copy of the revision of YuQue workbench

Emotional Edition
Alibaba Designer: complete copy of the revision of YuQue workbench

Refining visual mapping
Alibaba Designer: complete copy of the revision of YuQue workbench

II Improve the transparent transmission of effective information on the page

After deciding the style, let’s take a look at the problem of information transmission on the current page.

As an efficiency tool, YuQue’s workbench is not a page that requires users to stay here for a long time. On the contrary, we may prefer users to find the next station here faster and leave quickly.

So we don’t need to grab too much attention from users, but we need to clearly convey where your next stop is.

reduce the noise
The flat design is adopted to simplify the complexity, remove redundant visual interference, and make the page more concise and clear.

Alibaba Designer: complete copy of the revision of YuQue workbench

Amplified signal

Optimize font size

  1. Optimize font size and improve page readability. Add 16px text to the page, and be careful with 12px text.
  2. Improve the contrast between background and text. Make it meet the AA standard of W3C.

Enhance Icon Recognition

  1. Define the icon type, standardize the use scenario, and cultivate the user’s mind.
    Area icons > more recognizable and targeted > icons for documents, knowledge bases, teams, etc. are used to distinguish types
    Linear icons > highly ideographic and flexible > applicable to functional icons to distinguish the differences between functions
  2. Reduce icon cognitive load
    ● area icons optimize icon color and enhance the recognition between icons.
    ● linear icons optimize the line thickness and enhance the weight of icons.
  3. Enhance the friendliness of icons
    Turn the corners of lines and the ends of line segments in the icon from right angles to rounded corners to reduce the sense of distance brought by sharpness.

Alibaba Designer: complete copy of the revision of YuQue workbench

III Improve screen efficiency

  1. The full screen design is adopted to improve the efficiency of page display, optimize the responsive specification, and lay a solid foundation for the consistency of multi-end experience
  2. With left-right layout, the content module partition is clearer, the page expansion is strong, and it is closer to the instrumental product attribute of YuQue.

Alibaba Designer: complete copy of the revision of YuQue workbench

IV Establish clear design language

With the continuous strengthening of the function of the language bird and the continuous addition of new forces in the design group, the design guidelines including design values, templates, group library and global style are gradually precipitated, and combined with front-end engineering to form larkui asset library. Through the optimization of the workbench, we unify and extract the list components, which improves the efficiency of design and development students.

Alibaba Designer: complete copy of the revision of YuQue workbench

Unified graphical style, increased page emotional communication

Alibaba Designer: complete copy of the revision of YuQue workbench

Feedback and follow up

As mentioned earlier, the workbench may be one of the most important functions of the language bird, so you should be cautious about changing this page.

In the replacement of the old and the new, there must be some small details that we are not used to or do not adapt to, or we do not consider, which affect everyone’s use.

In order to maximize the smooth transition, we conduct gray scale test on the workbench by inviting old users, and collect everyone’s suggestions and feedback during the gray scale period and follow up quickly.

User feedback

Widely praised by users, and the quantitative evaluation has been greatly improved

We are very pleased that the revision has been highly praised by users, especially in terms of information retrieval and access efficiency and visual presentation.

In the internal test, users’ scores on the new and old worktables increased from 2.27 to 3.84 (five point system).

Alibaba Designer: complete copy of the revision of YuQue workbench

outstanding problems

Throughout the feedback scores of all users, most of them are between 3.5-4.5, and the points of loss focus on:

Document list related

  1. Missing filtering for collaboration documents
  2. You want to provide a recent list rendering of multiple views
  3. Insufficient utilization of page horizontal layout space.

Knowledge base list related

  1. The knowledge base invited me to collaborate has low utilization.
  2. The knowledge base within the team cannot be displayed on the workbench.

Dynamic related problems
The most recent updates cannot be obtained after the dynamic list is integrated into the discovery

Fast tracking

After quickly collecting user feedback, we held several seminars to quickly optimize the core problems of users in combination with product planning and development cost.

Document list related

Insight into problems
Users want the recent list to provide multiple views. In the final analysis, the space utilization of the horizontal layout of the recent list is low. Reviewing the user data of the recent list before revision, the click through rate of the first three lines of the list is much higher than that of the rest of the content, and shows a trend of physical examination one by one. Therefore, actual users do not need to display more documents on one screen. Instead, they should optimize the list content and improve the use efficiency of the list by filtering the list information.

Alibaba Designer: complete copy of the revision of YuQue workbench

Scheme optimization
The list is changed from the title and information in a single line to the horizontal tile display in a single line, which enriches the list auxiliary information and provides the filtering function for the list, so that users can quickly focus on the target document and improve the efficiency of the list. By filtering the creator, the problem that the collaboration document cannot be found is solved at the same time.

Alibaba Designer: complete copy of the revision of YuQue workbench

Knowledge base list related

Insight into problems

  1. The cost of inviting me to understand the concept of collaborative knowledge base is high. Most of the knowledge bases displayed by default are forced to join by users, and the display in workbench navigation can not meet users’ expectations.
  2. In the previous user survey, users mostly use the knowledge base in the team: team home > target knowledge base, and rarely select the knowledge base in the team through the knowledge base list. Therefore, in the revision, the personal knowledge base list and invite me to collaborate knowledge base list are pre arranged on the workbench, which shortens the use path of the knowledge base with these two attributes. It does not solve the problem of long link from the workbench to the knowledge base in the team.

Scheme optimization
Change the “knowledge base that invites me to collaborate” to a broader “collaborative knowledge base” to show the knowledge base that I am a member and the knowledge base within the team. At the same time, it solves the problems of low utilization of the knowledge base for inviting me to cooperate and long use link of the knowledge base in the team.

Dynamic problem

Insight into problems
For dynamic users, you can quickly get the latest update prompt of followers through the workbench before revision. After unifying the mind of the workbench, the dynamics are integrated into the discovery, and users lose the prompt to quickly obtain updates. On the other hand, the cost of content discovery is also higher.

Optimization scheme
When there is a new dynamic, a “small green dot” appears in the upper right corner of the top navigation bar “discovery” to remind users of new content updates.

Alibaba Designer: complete copy of the revision of YuQue workbench

Follow up planning

In the revision of workbench, the original experience problem is more prominent due to the new page architecture and visual style. In the follow-up, we will continue to explore and optimize according to the product planning.
Focus on:

Optimize new process
Due to the front of the new function, the problem of poor experience of choosing new ownership is more prominent.

New page logic optimization
The layout style of tool nature makes users have a stronger demand for jumping on the current page. In the future, we will try to design the use of global navigation in the language bird.

New style landing in the whole stack
When users jump from the workbench to other pages, the jump of new and old design styles brings a sense of separation to users. In the early stage, in order to verify the universality of the new style, the style of the core pages in the mainstream process was verified. Then focus on the core scene according to the 28 rule and land in batches.


Good design needs constant promotion

I’ve always heard students mention that it’s very difficult to promote the process of experience optimization from the perspective of cost-effectiveness. Recently, I’ve got some small experiences to share with you through the experience Optimization of YuQue Changwen and the revision of YuQue workbench.

Step 1:discover problems
Step 2:While looking for solutions, problems are constantly exposed to the business side, gradually affecting the importance of the business side to find problems
Step 3:Looking for opportunities. Since problems are constantly exposed in the business in the early stage, the business side will take the initiative to help me find opportunities during relevant revision
Step 4:Seize the opportunity to quickly give solutions
Step 5:In case of time emergency, first grasp the product goal and form a unified understanding of the ultimate goal with the students of product and development
Step 6:Gradually promote the development by levels and sections to achieve the final effect

Don’t be greedy when making products

The core of this workbench revision is to unify the user’s mind and focus on the optimization of product concept, function module, interaction form and visual style.
In the process of perennial operation and accumulation of products, most of them have the problems of function accumulation, resulting in difficulty in user cognition and increasing difficulty in product use.
When we add new functions, we should consider cost-effectiveness

*● product layer: * whether the newly added function is in the core function link of the product.
● user layer:Whether the newly added function is urgently needed by users.
● design layer:Whether the new interactive & visual way conforms to the design principles.
● cost dimension:Based on the above dimensions, whether the input-output ratio is proportional after the addition of new functions.

Judge whether to enrich product functions according to the above four dimensions.

Alibaba Designer: complete copy of the revision of YuQue workbench