Background

The mobile payment is blooming in China. WeChat virtual transportation card is one of the projects I did when I do an internship in WeChat. This is an efficient and low-cost solution for some l cities to have mobile payment in their transportation system.

An modular interface deal with all customization situations

As a solution for many cities, we provide customize settings. For example, how to add fund to the card: add fund from card, connect to a credit/debit card or auto-pay...

A good way to deal with every situation is a modular interface:

Design the card without hiring designer

I have investigated the appearance of current Chinese city transit cards, and they are poorly readable.

City transit cards in China

Considering our target users are late majority cities, they may not pay attention to the design of the card. So, we need a system/guide to generate readable cards.

Here is our solution: If your are a card provider, you can generate a look by choosing a color and a texture from the options we give. We use texture represents keywords about transportation, and the colors from the WeChat color palette.

Card look guide

Cards look example

Add fund