In class B business, the service is multi product, multi role and complex experience. How can designers do a good job in experience standardization and ensure the consistency of basic experience? Now I will share with you from the actual combat cases.
Business background
Taking our CCO experience design team as an example, it mainly serves consumers, businesses, economies and other business areas of Alibaba system. With the continuous expansion of business, multiple user roles, complex experience, limited designer manpower and increasing demand for customization, design is facing severe challenges.
1. More business: more than 30 product applications
2. Multiple roles: covering 6 user groups: consumers, customer service waiter, service management, business operation, middle office management and customers.
3. Complex experience: designers need to take into account the two perspectives of users and customers.
Organizationally, 85% of the designers support the business vertically, while 15% of the designers standardize horizontally to feed back the business designers. The essence of standardization is to ensure the consistency of basic experience.
How to standardize
The core ensures the consistency of basic experience through page sorting, abstraction, distribution and measurement.
Case practice
Take the data visualization scenario as an example to describe how to standardize.
1. Business status
There are 11 applications involving 89 pages.
2. Questions
Inconsistent experience: the architecture, components and styles of each workbench page grow savagely, and the lack of specifications leads to inconsistent experience.
Low efficiency: some scenarios are missing, components are repeatedly built, and a large number of customization; Communication and coordination have high internal consumption and cost.
3. Strategy
Experience unity: framework, component and style.
Efficiency improvement: coding, tools and delivery mechanism.
4. Experience unity
Including frame, component and style.
frame
(1) Existing page collection
(2) User scenario analysis
(3) Page classification
The pages are classified according to the user's viewing content (e.g. overview, analysis, details) and interaction form (e.g. tile, drill down).
(4) Determine typical layout
The typical layout is determined by counting the high-frequency multiplexing patterns.
assembly
(1) Page structure analysis
For the convergence of components, the page needs to be analyzed first to determine the content of the module layer. Example: the module includes page header, filter, chart and table.
(2) Module layer classification
Collect all businesses horizontally and classify the module layer. Subdivide the module to expand the form and put it into the corresponding basket.
(3) Module special treatment
Next, each module needs special treatment. For example, the chart module is disassembled and abstracted into four scenarios: indicator, chart, single choice and multiple choice. In the scene, subjects and variants (i.e. extended forms) are classified.
style
(1) Determine optimization content
Around the visual clutter, what we should do is to improve the design language. Designers need to supplement missing specifications in combination with their own technical base. For example, layout, color palette, font, dynamic effect.
(2) Determine component scope
Determine the range of components to be combed by counting the high-frequency multiplexing components.
(3) Layout
Legend location: there are 9 types online, which are divided into 2 types by reading order from the business scenario.
Component height: the actual online situation, only two indicators can be seen, and the height specification is missing.
It is necessary to refine the typical resolution according to the user Resolution Survey. For example, if the user is a win system, including the default height of the menu bar, task bar, etc., then subtract the default height of the page header, etc. to get 3 files. Determine the recommended default row height of the component 240px.
Axis label rotation angle: the current situation has two types: clockwise and anticlockwise. By analyzing the label type, combining the reading order and the intimacy between the axis and the label, the default angle is determined to be clockwise.
(4) Color plate
Determine the types of color swatches used by different components and the missing color swatches through scene sorting.
Supplementary semantic color palette: Abstract 2 types of scenarios, indicators and column / cake / ring scenarios from the business, and define colors. For example, with a positive meaning, use green, such as promoted, on duty, and normal. With negative semantics, use red, such as demotion, absenteeism, and failure.
(5) Font
Combined with their own business scenarios, the font is selected from the five dimensions of scenario, copyright, style, recognition and extreme value.
For example, in scenario 1, in the vertical data scenario, the fonts used in the competitive data products in the market are tried to be spread horizontally and excluded. For example, DIN has no copyright, Apple has non equal width fonts, and Pratt & Whitney 102 has weak recognition.
For example, in scenario 2, in the presentation of core data, the brand style of Helvetica is weak, and the extreme value of Pratt Whitney is over 100million is too wide.
Finally, we use Pratt & Whitney and Pratt & Whitney 102 in the corresponding scenarios according to the characteristics of our own business scenarios. And refine the rules with the front end.
(6) Kinetic effect
First of all, it is necessary to determine the value of dynamic effects and clarify the problems to be solved by dynamic effects. Here we focus on comfort, vitality, hierarchy and feedback.
The optimization scope is determined through the link analysis of dynamic effect scenarios.
Loading dynamic effect: focus on making the user's cognitive process more natural. Output the scheme through the idea of horizontal sorting, abstract graphics and combined styles of components. For example, 17 component types are sorted out and abstracted into 9 types, including point, line, surface, cake, ring, column, text, icon and word cloud, and then the combination output scheme is carried out.
Dynamic effect of appearance: refine the scene and optimize the effect through business analysis. For example, there are three types of scenarios refined here, including general, monitoring and public opinion. Optimize the effect around the unnatural transition, Caton and lack of emotional expression.
Browse dynamic effect: strengthen the hierarchical and spatial relationship between elements by refining the scene. For example, in single component, linkage and drill down scenarios, the effect is optimized around weak click perception, lack of focus and lack of hover status.
Sedimentation speed parameters: the speed parameters of the dynamic effect scenario will be optimized and the rule sedimentation component library will be agreed with the front end.
5. Improve efficiency
Including code efficiency improvement, tool efficiency improvement and mechanism efficiency improvement.
Overall thinking
Efficiency improvement process from design team to technical production and research.
The user-oriented order of efficiency improvement is: component designer, business designer, front end and product.
The construction is still in progress. Here we mainly analyze it from the perspective of delivery - tools - coding.
Deliverables
1. Business Designer: sketch/sigma material (style, component, block, template, rule)
2. Business Designer: kitchen tool (style, component, block, template)
3. Component Engineer: component specification / component official website
Delivery mechanism
New requirements: evaluate reusability, abstraction, internal audit, and precipitate materials.
Existing business: sort, abstract, internal audit and precipitate materials through the page.
6. Measurement
From the physical layer to the behavioral layer, it includes four dimensions: style, component, framework and component interaction. Measure the quality of standardized coverage through consistency score.
summary
Return to the course. In class B business, under the scenario of serving multiple products, multi-user roles and complex experience, and in the customized and standardized team formation, the essence of standardization is to ensure the consistency of basic experience with 60 points.
Summary: b-end experience standardization includes material output, delivery and measurement standards.
Output: including the convergence of framework, components and styles to sort out and abstract pages.
Delivery: for 2 types of user groups, business design, materials and tools to be delivered. As a component engineer, the code needs to provide component specifications, and the online component needs to help the construction of the component official website.
Measurement: the consistency score includes style, component, framework and component interaction.
Original address: Alibaba design (official account)
Author: CCO design
Please note: learn from UI » how to standardize the b-end experience: take the data visualization scenario as an example
