TMALL INTERACTION COMPONEnT, formerly Taobao Mall, is a Chinese-language website for B2C online retail, spun off from Taobao, operated in China by Alibaba Group. It is a platform for local Chinese and international businesses to sell brand name goods to consumers in mainland China, Hong Kong, Macau and Taiwan. Being the world's second biggest e-commerce website after Taobao, it has over 500 million monthly active users, as of February 2018. This project is for building the relationship between users and brands by making use of interactive activities on Tmall APP.


UX design, UI design


Brainstorm, Wireframe, Analysis for competitive products



In order to increase the favorability on the consumer side about different brands in Tmall, the sellers are able to apply customized marketing activities to let their consumer know more about the brand story and get the coupon as well. For now, we have 12 different interaction components for the brands to customize their marketing activities, such as Q&A game, free trial, lucky draw, etc.


Screen Shot 2019-03-20 at 12.21.57

There are 3 main problems in the old version of the Q&A game:

About the Brand

The interfaces don't make the users feel that it is an activity from a certain brand. In other words, more elements about brands should be added to the UI design.

About the Game

It doesn't create an atmosphere of game playing. It is not interesting nor attractive enough.

User Experience

Too many interaction steps make the users feel it is delayed during the game.

Analysis for competitive products


High saturation color, 2.5D visual elements, and exaggerated visual effects are common in most of Q&A game APP design.


About the Brand

Except for images, logo and brand name, color is also an important element to show a brand, for example, Tiffany Blue, Coca Cola Read. So I collected all the brand color in Tmall APP and categorize them into 4 hues.

Group 41.png
Screen Shot 2019-03-20 at 1.04.17 AM.png
Screen Shot 2019-03-20 at 1.06.43 AM.png
Artboard 6 Copy 2.png
Artboard 10.png
Artboard 9.png

About the Game

Create an atmosphere of game playing and enrich the visual elements.

Old Version

Screen Shot 2019-03-20 at 1.12.43 AM.png
Screen Shot 2019-03-20 at 1.17.53 AM.png

New Version

Screen Shot 2019-03-20 at 1.12.51 AM.png
Screen Shot 2019-03-20 at 1.18.03 AM.png

User Experience

Decrease the number of interaction steps and enhance the visual effect on the result page to promote the users to participate, for example, 'Congratulations! You win', 'sorry. You lose.'

Screen Shot 2019-03-20 at 10.43.40

Motion Design Congratulations! You win.

Motion Design Sorry. You lose.