WeChat BudgetHelp UX design

UX design project – Own initiative

After witnessing firsthand how the Chinese are now in masse paying with their phone and no longer with cash and cards, I was inspired to improve this service with a budgetting aid. Payments made by scanning QR code work very effectively but it does lack some transparency on the remaining budget. WeChat works very well for the Chinese society as it makes use of some social elements that would be less effective on western people. I used these techniques as well in my design.

System Architecture
Interaction roadmap

Transparency is key. Therefore the remaining (part of the) budget is shown before making the payment, as well as how this has changed the budget right after the payment has been made. The user can check the budget in detail at all times in the sub app.

Interaction Design prototype

The user can predefine his or her total budget in categories, and alter this later on as well. As with standard budgetting methods, this gives the user more control over fixed and unfixed expenses. Furthermore, after any purchase the user might receive a discount offer specifically for users of this app. Discounts motivate consumers to visit stores. How well and how many of these discounts are used is also monitored and shown and contributes to a overal budgetting score.

QR-code payment interaction

The budgetting score is a key element in the social strategy. A ranking tab is included where the current score of the user and the user’s friends are compared. More WeChat extensions make use of this strategy and it does influence the average Chinese. Next to this, the user can look at how well he or she performed in the previous months.

Checking budget interaction


The design of the sub app remains in the style of the WeChat main app, this makes for easier acceptance and learning, as WeChat is now an indispensable part of the daily life of most Chinese. Icons and diagrams were designed in line with this style.

Checking ranking and history interaction


With Adobe After Effects I created a short animation showing the interaction between the user and the application: