Scan to Pay


In China, people scan QR codes on their phones for daily purchases like bus tickets or groceries. During my internship at Frog, I convinced UnionPay to approve my design of the Wallet app’s Scan to Pay interface, a crucial consumer-facing feature that was enabling 150+ million people to pay with QR codes every day. After the designs were shipped, the app’s App Store rating jumped from 3.1 to 4.4.


May–Aug 2019


Hanyi Shao
Chelsea Chen
Patrick Fang
Pascal Mijic
Alex Xu

Project Lead
Product Manager
Sr. Visual Designer
Sr. Interaction Designer
Interaction Design Intern

Scan Hero Image: isometric rendering of desktop computer with project interface designs

Scan to Pay

Mobile payment in China is based on QR codes instead of NFC sensors. One can scan other’s codes, or present his/her own code to be scanned. Different codes allow individuals or merchants to send or receive money. They can be printed at almost no cost—even grocery stalls in a farmer’s market can use them to receive payment.

The Yùshān Farmer’s Market in Shanghai where we conducted contextual inquiries. Customers would pay for groceries by scanning the printed QR code and paying the associated small business account.

Like many mobile payment competitors, the UnionPay Wallet app carves out an entire bottom tab for displaying and scanning QR codes. Users could choose between sending or receiving, pick different bank cards, switch to NFC mode in poor network conditions, and display codes specific to regional mass transit systems.

Scan to Pay’s initial design Scan to Pay’s initial design – overlay
Hover to see numbers
  1. Switch to paying mode (currently active)
  2. Switch to receiving mode
  3. Launch OS camera for scanning
  4. Payment barcode & QR code
  5. Switch between different bank cards
  6. Activate NFC mode for POS machines and for offline use in poor network conditions
  7. Display mass-transit-specific codes
The existing interface for Scan to Pay when I started. Despite its seemingly logical layout, UnionPay were dissatisfied.

UnionPay, however, were unhappy about this design. They thought it simply looked too much like other mobile payment apps and lacked brand differentiation, which the Wallet app desperately needed, as UnionPay were late to the heated competition already dominated by AliPay and various smartphone manufacturers. The client’s organizational structure posed an additional challenge—deciding on a design through countless layers of approval in a state-owned bureaucratic enterprise was nothing short of a nightmare.

Problem Statement

How do we maintain a friendly interface design, fulfill UnionPay’s desire for differentiation, all the while still get it approved by their layers of leadership?

Solution & Impact

While my senior designer mentors took care of client meetings, I focused on designing static screen mockups and interactive prototypes. Of the over 30 options I produced, one was eventually chosen. While maintaining similarity to the existing design, the new design addressed a majority of the client’s additional asks.


This design is currently being used by the app’s 300+ million daily active users, and significantly contributes to the app’s App Store rating jumping from 3.1 to 4.4 given its crucial status in the overall user experience.


“Leader-Centered Design”

UnionPay’s organizational structure mirrored that of the government: lots of pyramidal leadership layers. It produced three characteristics that specifically impacted our collaboration:

  • Members of its leadership were appointed based on their political cedentials, not merit or professional capability; they have practically no idea what design is.
  • UnionPay designers prioritized pleasing their superiors over usability and beauty. State-owned enterprises needed not be profitable, so pleasing superiors—not end users—was the primary way to get promoted.
  • They also liked to ask us “prettify” their pre-approved designs, since pitching ideas from external contractors like Frog for approval might make themselves look incompetent in front of their superiors (we also weren’t allowed to pitch directly).
Graphic illustration of the leader-centric approval process
UnionPay’s internal decision-making process. There were usually 6–7 layers of barriers before an idea could reach approval; but once approved, retracting or modifying it was also extremely difficult.

The Pre-Approved Design

When the project first started, UnionPay designers produced a complete layout and turned the project into a skinning exercise, asking us to simply recreate it with existing design system components. The proposal looked like this:

Scan to Pay’s design changes proposed by the client Scan to Pay’s design changes proposed by the client – overlay
Hover to see numbers
  1. Switch to paying mode (currently active)
  2. Switch to receiving mode
  3. Display mass-transit-specific codes
  4. Activate NFC mode for POS machines and for offline use in poor network conditions
  5. Switch between different bank cards
  6. An advertisement slot
  7. Launch the OS camera for scanning by swiping up (tapping the area also works)
The layout produced by a UnionPay designer. We were asked to basically recreate it using branded design system components.

Upon first sight, there were already a few significant flaws:

  • Tapping the receiving mode button (2) would change not only the codes above, but also the entire container—the frame would change to a blue color, and the bank card selected (5) at its bottom would also change. That is to say content is controlling its container, instead of the other way around.
  • By visual placement, this layout implies that the user should select what transaction scenario (paying, receiving, or mass transit) first, then choose an associated bank card to perform said transaction. However, things happen in real life in the reverse order: one would choose a bank card or account before using it to perform transactions.

However, we found out that UnionPay insisted on this design no matter how much effort we spent persuading them. When pressed hard, one of the UnionPay designers finally leaked the truth:

“This has already been approved by 4 levels of leaders.”

– A reluctant designer on the UnionPay team

At that point, we all realized that the challenge was not to produce a better design, but to persuade the UnionPay designers away from their own leadership-approved one. Negotiation tactics became as important as pixel-pushing prowess. My senior designer mentors and I started devising strategies.

Strategy 1

Invoke Authority

Apple’s interface designs were still regarded the gold standard in China, and many UnionPay designers used iPhones. Demonstrating how their design went starkly against the principles embodied in iPhone stock apps, we thought, would make them realize its flaws and ease their resistance to change.

iPhone Health App

In the presentation, we tried to illustrate that Apple’s designers placed the controls outside of the content they correspond to, instead of inside like in the proposed design. This observation was refuted in an oddly amusing way: “Just because Apple did it, doesn’t mean we had to follow. Even better, it’d be a great opportunity to set us apart from the rest of the mobile apps!”

Back to the drawing board.

Strategy 2

Show Absurdity

Since external exemplaries couldn’t move them, we decided to realize their original request and simply present the ensuing monstrosity, hoping that UnionPay designers would realize their own proposal’s absurdity.

The absurdity strategy we presented. As the user switches between bank cards, UI elements fly in and out randomly, creating a sense of unpredictability.

And a montrosity it was—the interactive prototype I made had elements flying around without clear rationale. The entire interface was unpredictable and incomprehensible for new users.

Yet when we presented it to the UnionPay design team, they did not see any absurdity despite our best efforts casting it in negative light.

“This is exactly what we want. Make this.”

– An exuberant designer on the UnionPay team
Strategy 3

Sea of Options

We now realized that UnionPay designers were hellbent on their design and we could inundate them with a sea of options. Using a “protracted warfare” mindset, we thought if we presented enough options over a long period of time, maybe the clients would eventually be worn out and favor one of them. Below are a selection.

Since UnionPay had somehow registered the “swipe up to scan” gesture as a patent in China, I tried to emphasize the scan button (or swipe gesture) by adding background color or changing its placement.

Adding a rounded rectangle as the scan button’s background color
Placing a white bar on top telling the user to swipe down
Placing the white bar on bottom telling the user to swipe up

UnionPay didn’t buy them. Since reinterpreting their intentions did not work, we decided to go diplomatic by doing “trades”. We would effectively start giving in on some of their more trivial (nonetheless insidious) asks, if our sacrifice meant they would accept one of our proposals. Below I started exploring different ways to squeeze an advertisement slot into the interface.

The ad is slotted into a white bar in the middle. We also caved in and designed the NFC switch & regional mass transit code as button switches.
A variation on the previous option that reduces the ad’s prominence by enlarging the white area. We hoped it would make the ad less intrusive.
An attempt to even further reduce the ad spot’s prominence. We referred to it as “the Tooth version” as it looked like a guy who lost one of his front teeth.

Diplomatic trades did not work any wonders. UnionPay designers welcomed these concessions, yet were unwilling to make any from their side. At this point, we were almost out of ideas and started clinging onto any idea that might be a way out. We started doing pattern analysis on the past options that garnered favorable reactions, and suspected that UnionPay leaders seemed to have a thing for circular shapes…

What if we make all button switches circular?
What if we also emphasize them with a white background?
What if we give them both circles and the advertisement slot?

The clients were receptive, but none had a strong “yes” for any of them. At this point, we were truly worn out as this project had been dragged on for almost three months. The team were desperate—what else could UnionPay want?

1 Animated Prototype > 100 Static Mockups

As a learning exercise, I started animating some of the options in Principle. One of my senior designer mentors saw the prototype videos and decided to present one in one of the lower-stake routine client meetings.

Serendipitously, a higher-level leader who wasn’t heavily involved happened to sit in that day. After seeing the prototype video, he mused “this works pretty well—what’s all the fuss about?” The option was approved on the spot in a most anticlimatic fashion.



The Herculean effort we spent on iteration and persuasion taught me a vivid lesson about the design process: any designed artifact reflects the aggregate values of people behind it. At a more operational level, it taught me different methods to persuade and influence as a designer, which I wouldn’t necessarily get from school.