Overview

Design system for all company websites, available for designers to use.

Background

Amidst the company's growth and the maturation of the market, the demand for elevating the quality of website design has seen a steady rise. However, as the company's website has endured without updates for an extended period, each individual holds distinct perspectives on products and styles produced by designers. In the absence of a systematic set of standards within the team, issues of consistency in product and user experience arise. The common pain points include:

1. Inconsistent Experience Across Devices or Products

   The company's website is applied to various devices and platforms. Achieving consistent user experiences without a set of standards or a clear workflow proves challenging.

2. Lack of Representative Assets or Identifiable Components Leading to Version Control Issues

   Due to individual preferences among designers or teams regarding tools and processes, managing and integrating becomes difficult during transitions or collaborations. Strict file and layer naming rules become indispensable for effective version control.

3. Inconsistent Experience Across Devices or Products

   When working within teams or collaborating across departments, the absence of a clear standard source results in each department or designer following their own ideas. This leads to a final product with a chaotic and non-standardized design direction, adversely affecting the company's brand image.

4. Inefficient Workflows Leading to Meaningless Repetition

   Repetitive tasks diminish team efficiency, and the team may spend 2-3 times more time on tasks that could be reused.

These pain points are closely interconnected, all stemming from the lack of regulations and standardization, resulting in an inefficient team, fractured semantics, and a disorderly workflow.

Goal

Establishing a design system component library tailored to the company's products, while defining the website's design principles, ensures consistency across the entire set of standards. Documenting and recording their critical levels allows for customization flexibility without compromising the designer's ability to adhere to the standards.

Challenge

This project involved extensive discussions with engineers regarding the feasibility and technical limitations of constructing design components. Furthermore, it required explaining the usage and considerations of various design elements to designers from other projects, which consumed a considerable amount of time.

Benefits

1. Sustain product consistency over time.

2. Establish a cohesive user experience.

3. Provide a shared design vocabulary for UI interfaces.

4. Focus on solving design challenges.

5. Accelerate product development efficiency.