Works

About

Resume

Tencent

Design System

Design System

Visual Langugae

Cross team Collaboration

YEAR

2021

PROJECT TYPE

Work

My Responsibily

Design our Design System with my mentor

In 2021, I started my first intern in my life - UX Intern in Tencent's data tool team.

During this internship, I established and managed Tencent Data’s multi-platform design system. Some highlights over my time there included: design elements into components in Figma, restructuring our system for light and dark mode compatibility , and refreshing our visual language.

Besides, I shipped other 3 features of our Data Management Platform.

Reach out for additional details.

Design System

Visual Langugae

Cross team Collaboration

In 2021, I started my first intern in my life - UX Intern in Tencent's data tool team.

During this internship, I established and managed Tencent Data’s multi-platform design system. Some highlights over my time there included: design elements into components in Figma, restructuring our system for light and dark mode compatibility , and refreshing our visual language.

Besides, I shipped other 3 features of our Data Management Platform.

Reach out for additional details.

YEAR

2021

PROJECT TYPE

Work

My Role

UX Design Intern
Design System Designer

The Situation

When I joined the team, Tencent Data had limited design resources. The product’s rapid transformation from a demo to a comprehensive platform created design debts due to the lack of a tailored and scalable design system. Some examples include:

The global design system for Tencent didn’t always meet our needs. Lots of custom components were created, leading to duplication and inconsistency.
There were no guidelines whatsoever, resulting in a chaotic approach where people detach instances or use the components in the wrong way.
There were many mismatches between engineers' component library and our satellite design system.
As teams grow, miscommunication becomes more common. Existing UI patterns are undocumented or completely lost. Projects are filled with disposable components that add a lot of R&D costs.

After talking to my mentor, I realized that at this point the team needed more than just a simple component library for the designers to use.
‍

Design System also needed architecture, interactions, rules, and alignment with the engineers.

📍 Goals

Ensure standardized design to save on design costs and enhance team efficiency.
Establish core guideline documents to aid understanding of dos and don'ts.
Guarantee smooth collaboration with the development team.
Assure the maintainability and iterability of DS.
‼️ Communicate with the team to strike a balance between rigidity and flexibility, understanding the creative latitude of designers and leaders, and efficiency goals. Ensure the DS is sufficiently instructive but not overly rigid.

The Workflow

01. Investigate and Document the UI patterns in today's design documents.

I communicated with all designers during this review meeting and decided that if a UI pattern is used more than 3 times, it can be considered for conversion into components. If not, I will evaluate selecting a pattern with broader usage to design.

02. Organizing Architecture and Prioritization

I understand that this is not a project that allows me to deliver in three months. So, I communicated with my supervisor to prioritize organizing the architecture and different components (based on the frequency of usage by designers within the team). Periodically handing off to the development team can enhance efficiency, enabling designers to access the necessary content as quickly as possible.

My level of priority: System Level > Foundations > Rules > Base > Input > Data Display > Notification > Do & Don't

03. Build and Review

When designing, I needed to understand the team's design thinking and also considered logic, structure, and scenarios. At the same time, I ensured that engineers could efficiently implement my design based on Tencent DS and our current implementations.

04. Implement with Dev

I organized Design Tokens to facilitate communication between design and development, while also conducting visual validation promptly after implementation to verify the Design System (DS).

05. Summary Documentation

Annotated some rules to help designers better understand the application of components and interactions, highlighting what needed attention and what should have been avoided.