Screen Shot 2018-08-11 at 8.22.05 PM.png

QQ Media Platform

Multi-channel Network Module Design 

QQ Media Platform is a web-based B2B service platform product, which is one of the products I collaborated on UX/UI design when I interned at     Tencent       2018 Summer as a UX/UI designer.

QQ Media Platform provides powerful services and capabilities for individual user depending on specific needs. Users can register an official account on QQ Media Platform to push feeds to subscribers, manage profits earned from generated content and interact with subscribers on various platforms, such as Qzone (blog), Microvision (short video) and Penguin e-Sports (live streaming), without operating them respectively. 


Screen Shot 2019-01-05 at 10.40.51

Design Goal

A new module servicing MCN (multi-channel network) organizations to manage users as a group

The current version of QQ Media Platform only provides the management for the individual user. This iteration intended to design a new module

for MCN (multi-channel network) organizations to manage members as a group, which extended the range of users.

Media organizations can manage their members by reviewing the contents and checking the profits. 



User Research: collaborated on users' needs gathering from consumers and stakeholders ;

UI Design: created user flow, sketches, mockups and prototypes (30+ pages);

Review: reviewed the visual design and the interaction design to improve in version iterations; 

Web-based Platform Product
3 weeks


To clarify the Users' Needs, interviews need to be planned from both sides, the MCN management side and the members under the management

The interviews for understanding the needs of MCN management were conducted with a few people with the title of BD (business development) and Product Content Operation working for QQ media product since Tencent itself is one of the most representative and influential multi-channel network organizations

In terms of the members, we interviewed 6 popular bloggers and vloggers who currently contract with a media organization.

Based on the research results, we concluded that the new module needs to guarantee the Effectiveness of management for MCN users 

as well as the Information synchronization for the members under specific MCN organizations.

Design Process

We decided to design a new module named MCN Management with three sub-tab Member Management, Profits & Transactions, and Content Statistics. The function map was firstly determined. I also reorganized a digital version for team review.

Batch Operation Allowed.png


I designed wireframe based on function map to show user flow. (below showed a part of the whole wireframe) Three sub-tab under MCN management displayed on the left navigation bar. Only the users who registered as a MCN manager will be provided initial screen including MCN management module after they signed in.


Hi-Fidelity Prototype

During the process that design hi-prototype/mockups from wireframe (including visual design), I strictly followed the UI Style Guide for this product and assisted in updating the Guide with new components. Establish Design Criteria is crucial to make sure the design is consistent, and helpful to collaborate with designer who work remotely.



We scheduled a  Design Review  after the first high-fidelity prototype finished. We walked through the whole process page by page and found the users' Pain Points during it. And I always consider that asking the question and answering the question is an effective way to push design forward. Below are two examples of how I iterated for improvements.


"Besides basic info, such as the number of comments, likes for individual posts, I'd like to see some advanced statistical analyses of the contents generated from my members, like the trend of total VV (video view) over time"

—   Rick, A product manager of a News Feed Product developed within QQ instant messaging product


Developers then developed a demo for testing. And all product crews (designers, developers, and product managers) attended a meeting to evaluate how the current product meet users' requirements based on the results from A/B testing and Event Tracking at this stage.


- Iterative Design Process - Enough Attention to Details


It is unlikely to finish the final design at one time. A good design is always accomplished with several reviews and iterations. Making sure the design to be consistent while iterating is important. Creating design criteria and detailed documentation are crucial ways to guarantee consistency as well as improve the effectiveness of iterations.



- Teamwork - Effective Communication


As an intern UX/UI design, especially worked for high-speed iteration products with time constraints.  It's crucial to maintain good communication

with the product team and ask advice from other experienced designers, product managers, product operations, and even developers. 

Designers supposed to clearly understand the user requirements of the specific product before the design starts. Besides, effective communication

established on the willingness to meditate from the others' perspectives.