UI / UX / Web Design

WeChat Pay Flow
Different WeChat Pay payment flows on Desktop and Mobile
WeChat Pay QR Code
WeChat Pay QR Code poped during Desktop Checkout process
WeChat Pay Checkout on Mobile Phone
The process of scanning QR code using WeChat Mobile App to finish payment
WeChat Pay Design Spec
Design Spec for WeChat Pay

WeChat Pay

Mouser Electronics

Project Objective
The goal of this project is to add WeChat Pay as one of the payment methods on Mouser CN site. Unlike other online payment methods such as PayPal and Alipay, this method allows Desktop users paying with their mobile WeChat app by scanning a QR code on the desktop screen from their mobile phones. The mobile user can also pay with their phone. They just simply shop and checkout in Mouser mobile site. When the WeChat payment method is selected, the phone will automatically redirect to WeChat App to finish payment.

Problem Solving
WeChat Pay, being a Chinese payment method, was very different from American payment method. At first, we were all confused how it would work in Mouser com. I did some research and learned how the Chinese community had widely used WeChat locally in China. From that, I was able to explain to the team and put together a presentation and walk thru the Desktop and Mobile checkout processes to the team and had everyone buying in to the concept.

UI / UX / Wireframing / Axure / Information Architecture