The director tasked me with integrating a QR code transaction function into OTO Pay. To understand the transaction flow comprehensively, I analysed the most renowned cryptocurrency exchange platforms featuring QR code transaction functions, such as Binance, Kraken, and Coinbase. This analysis helped me pinpoint strengths that could be adapted to OTO Pay.

Integrating QR Code Scanning and Payment Features into OTO Pay

Competitor analysis

My competitor analysis revealed that these platforms share various strengths and weaknesses that could inform our design. Key advantages included clear icons or indicators on the home page that guide users effectively and detailed descriptions under each main function to enhance user comprehension. Additionally, a well-organised hierarchy helped highlight the sequence of operations. However, there were also notable issues, such as multiple functions crowded on a single page and unclear icons that confused users. Based on these findings, I sketched wireframes and prototyped two different layouts, using distinct icons and colors to ensure clarity and user-friendliness.

A/B testing

I conducted an A/B test to identify which layout was more user-friendly. I provided two groups with different prototype versions and asked participants to complete specific tasks, including setting a desired transfer amount and saving the QR code image to their album. To assess performance, I measured the time taken to complete the tasks and noted any errors. Based on user feedback, I selected the design that featured distinct buttons and a blue background for its clarity and ease of use.

Prototype

The "Scan" and "Receive" functions are both conveniently located on the homepage, making them easily accessible.

The home page QR code, and scan button located at top

The QR code page incorporates all related transaction functions with a clear hierarchy: transaction history and scanning are secondary, while primary functions like setting the amount and saving the picture are highlighted with distinct call-to-action buttons.

The scanning page includes instructions for use and alternatives for uploading images. The strategic use of blue highlights important elements, reinforcing our brand identity.