tmall-1.jpg

TMALL INTERACTION COMPONEnT

Tmall.com, 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.

Time
2018.5-2018.8

Role
UX design, UI design

Skills

Brainstorm, Wireframe, Analysis for competitive products

Company
Tmall.com

BACKGROUND

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.

Problem

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

HQ_Press_Landscape_02_01_0000_01A.png
191516328101819731.jpeg
221IF5U45.jpg
20180107419116098924.jpg
616e00008dc31a3a5ea5.jpeg

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

Solution

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
超级擂台-未开场-开场时间今天.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

New Version

Screen Shot 2019-03-20 at 1.12.51 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 AM.pn

Motion Design Congratulations! You win.

Motion Design Sorry. You lose.

MAIN PAGES

tmall-3.jpg
1_EiZrcN_DIapbZaxutxbZRA.png
1_POlwgD8liUYUqiEU6IU1Pw.png