YunDing Analytic System

Visual Analytics of User Behavior at Tencent

The purpose of YDAS is to help companies to grasp first-hand market information and offer insight into the competitors' market. Meanwhile, the data of users' habits provides us clues to improve the product performance.

The database of YDAS is from a various types of recruited netizen samples representing the whole internet users.

My Role

In 2014, I led the first version of product design and the front-end development.

On design aspect, my responsibility included competitive analysis, product strategy, information architecture, designing user flows, visual design and interaction design.

On development aspect, I took charge of the front-end architecture, front-end development and deployment. Specifically, I applied the Model-View-Controller pattern to organize code for better maintainability. SesJS (similar to RequireJS) was used as the module loader. I also automated and enhanced our deployment workflow by GruntJS.

Speech: Build a SeaJS-based Project

Task Flow
Project Interface

I selected two main screens of the analytic system. The first screen shows the overview of all data collected. The second screen compares the data of several competitive products.

Overview of Total Data

Comparative Data of Several Relevant Products
What They Say About Me

She is dependable and strong in actions. In the project of YUNDING, she is versatile, working on both design and development tasks. Her works are accomplished with high quality and speed, always beyond our expectations.

Henry Huang - Project Manager


She converts PSD design into HTML/CSS with efficiency and high quality. Almost nothing needs to be improved when comparing the original design and HTML page.

Colin Zan - Designer