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

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.

About the Game

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

Old Version

New Version

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.'

Motion Design Congratulations! You win.

Motion Design Sorry. You lose.

MAIN PAGES

© 2019 by Yixun Wang