中
Work
Building consistent user experience and improving development efficiency
A design system is a collection of design elements, patterns, and guidelines that are used to ensure consistency in the visual and functional aspects of a product or brand across all platforms and devices. It includes the documentation of the design principles, visual style, interaction patterns, and component library that serve as a foundation for creating and maintaining digital products. As designer Nathan Curtis said, "A design system is not a project, it's a product, serving products."
1. Create a cohesive and consistent user experience:The specification documents and component library of the design system provide design standards for various product lines of the company. Design consistency enables users to shorten the learning cycle of using products, and improve trust and satisfaction in product use.
2. Provide efficiencies for designers and developers:This is one of the most obvious benefits of a design system. Designers and developers can efficiently complete prototyping by properly reusing the component library controls, accelerating the product development rate, and achieving market validation at minimal cost.
3. Promote internal collaboration and communication:A successful design system requires cross-functional team participation, such as designers, development teams, marketing, and branding, etc., thereby promoting collaboration and communication among different positions within the company. The establishment of this culture will also help the company launch new products or services more effectively.
4. Establish design and delivery standards:For a medium to large software company with clear market positioning and extensive project experience, there are many large-scale products, and the number of products will periodically increase. In large-scale collaboration and handovers, there must be clear standards to follow.
They are developed based on the business, audience positioning, work environment, and workflow served by the design system, and they influence and guide the business, development, and design to move in the expected direction.
It defines the visual styles of product design from a global perspective, including colors, fonts, grids, and also applies to the production of design controls and components.
The elements are usually divided into atomic and molecular levels, and different design systems will also be expanded and integrated into organisms at the template level.
Binding product, design, and front-end together, it will provide guidelines on how to use the design system, details of design styles and each component, as well as relevant development considerations.
Collect the understanding of all stakeholders on experience issues and unify the goals of solving experience problems. Although the goal is to unify user experience through a design system, the emphasis on different business and brand goals may be different. Therefore, unified understanding is crucial before building a design system.
For enterprises that are just beginning to build a product system, they may need to solve basic definition problems, so the focus will be on defining basic design principles and unifying components and code. For enterprises that need to iterate user experience after redesigning the brand, the focus may be on redefining design principles and design specifications based on the new brand experience consistency. For enterprises that need to unify user experience from multiple channels, the problem mainly lies in the alignment of experience across channels, so the focus will lean towards positioning various channel scenarios, as well as code specifications and landing tools for each channel.
After completing unified understanding, the next step is to extract relevant design elements, components, and paradigms that need to enter the design system based on the atomic design theory and inspect all current products.
Atomic design theory is a way of building a design system proposed by Brad Frost in 2013. In Brad's theory, the design system is like nature, which is composed of the most basic "atoms" and gradually combined into the final object. These "atoms" are the most basic rules in design, such as color, font, and spacing definitions. These definitions can be combined to form "molecules," which are basic controls or simple graphic styles. "Organizations" are then formed by combining "molecules," such as simple components, and "templates" are created from "organizations" to form basic functional modules. Finally, as the basic module, "templates" are combined to form "pages," which become independent and complete units in digital products.
This step is like breaking down and reassembling, optimizing and upgrading the design elements and components that have been broken down, and then reassembling them into a feasible design system through defining design guidelines. In this step, how to unify and divide the brands, channels, or platforms involved in the system in the redefinition process may be a major challenge that enterprises need to solve. For example, how to regulate the unity and division of brand experience in digital products under multiple brands of the same enterprise, and how to standardize the consistency of experience across channels under the same brand.
Therefore, in the process of defining specific design guidelines, it is not only necessary to consider design and development technology issues but also to find out what needs to be consistent and what the core of differentiation is from business goals and brand values.
Team Responsibilities
Designers and Front-end Engineers for Building Design System:Designers are responsible for distributing, synchronizing, and updating the design system materials that are constantly iterated in the business evolution process; developers are responsible for code distribution, version management, DEMO/API queries, quality management, and release processes.
Designers and Front-end Engineers for Using Design System:All team members should timely establish team collaboration norms to effectively ensure the reasonable use of the design system.
Iteration Mechanism
Daily Iterative Optimization:When existing design components cannot meet the needs of business innovation, suggestions will be submitted to the designers and front-end engineers for building the design system to evaluate and optimize.
Project Iterative OptimizationWithin a general period of 1-2 years, due to brand upgrades and business expansion, existing products need systematic brand style upgrades. At this time, a project team composed of designers, front-end engineers, and business users responsible for building the design system will be established for systematic iteration of the existing design system.
