Tencent
Design System
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.
Work
2021
Timeline
8 weeks
Key practices
Design System
Visual Language
Cross Team Collaboration
Other contributors
Tianchu Li (Mentor)
Xin Li (PM)
Wei Li (SDE)
01 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.
02 The 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.
03 The Workflow
Step 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.
Step 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
Step 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.
Step 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).
Step 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.
