Merchant Portal

Overview

UnionPay Wallet is a mobile payment app by UnionPay, China’s only and the world’s largest bank card issuing agency. While interning at Frog, I solely designed and prototyped one of its key business-facing features, the merchant portal, improving its information hierarchy and visualizing transaction data. After the design updates were shipped, the app’s DAU doubled from 150 million to 300+ million.

Time

May–Aug 2019

People

Hanyi Shao
Chelsea Chen
Patrick Fang
Pascal Mijic
Me
Alex Xu

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

Merchant Hero Image

UnionPay Wallet

UnionPay issues bank cards in China just like MasterCard would in the US. Recently, it has started to expand into transaction processing (like PayPal) and mobile payment (like Apple Pay). The UnionPay Wallet app is its attempt to enter the mobile payment market, which had been dominated by heavyweight competitors like AliPay and WeChat.

To grow its user base, the UnionPay Wallet app had been giving out cash prizes to small business owners who accept payments with it. The Merchant Portal was where users would see these cash prizes, and where they would find all business-related functionality. Yet despite heavy incentives, user growth and brand loyalty had stalled. How could design help?

Problem Statement

How do we improve UnionPay’s ROI on cash incentives given out to small business owners?

Solution & Impact

By clearing up information hierarchy and adding more useful transaction data visualization in the Merchant Portal, investment return on UnionPay promotion has increased since small business owners’ trust in the UnionPay brand was boosted. It has directly attracted more small business owners to sign up as UnionPay partners and provided more transaction scenarios for customers.

Impact

6 months after design improvements were shipped, UnionPay Wallet’s DAU doubled to 300+ million, and its App Store review rating jumped from 3.1 to 4.4.

After a few weeks of user research, design explorations, and iterations on my own, I used Principle to package my designs into a prototype.

Existing Merchant Portal Layout

The Merchant Portal hosts a collection of commonly used features for small business owners in their daily operations:

  • ordering printed materials;
  • receiving customer payments;
  • confirming transactions;
  • looking at daily transaction overviews after closing.
Merchant Portal existing design before improvements Merchant Portal existing design before improvements – overlay
Hover to see numbers
  1. Visual notification of new transaction
  2. Today’s earnings & number of transactions
  3. Upgrade Receiving QR Code to receive credit card payments
  4. Merchant store settings
  5. Purchase UnionPay-branded printouts (e.g. UnionPay logo stickers)
  6. List of transaction histories
  7. Display Receiving QR Code
  8. Placed orders of branded printouts
  9. UnionPay in-app rebates for merchants
Layout of the existing Merchant Portal before design improvements.

User Problems

After conducting stakeholder interviews and contextual inquiries, my team gathered three biggest problems:

  • Small business owners heavily rely on the app’s audio feedback to confirm transactions, but the deeply-buried audio switch made it hard to access;
  • Seeing transaction trends is crucial for small businesses to adjust sales strategy, yet there is no visualization of this data;
  • UnionPay wanted users to know there are in-app rebates for doing business with the app, but they were difficult to discover.
Our interview with farmer small merchants at the Yushan farmer's market in Shanghai
Our contextual inquiry sessions with former small business owners.

Personas

After user interviews, we came up with three personas based on age and occupation:

Persona 1

The Shop Mom · 30–50s

  • Just wants to do basic stuff like accept payment
  • Afraid of breaking things and somehow losing her money
  • Needs sense of control and security
Persona 2

The Tech-Savvy Youngster · 20–30s

  • Zooms in on transaction data and extrapolate trends
  • Power user, willing to explore the rest of the app
  • Wants to feel empowered when exploring
Persona 3

The Brand Ambassador

  • Hired by UnionPay to station at farmer’s markets
  • Helps small business owners troubleshoot the app
  • Needs to look trustworthy and professional

Simplifying Information Hierarchy

A clearer, simpler information hierarchy directly benefits both shop moms and tech-savvy youngsters. The Merchant Portal’s existing information hierarchy was too flat, surfacing too many infrequently used functionality without thought. The user had to spent extra effort hunting for the same set of functionalities. I did mainly two things:

  • Introduce more depth. Bury infrequently used functionality under sub-menus and detail views, clearing up the top level hierarchy to allow quicker scanning.
  • Break hierarchy when appropriate. If a specific feature is frequently used, let it surface to the top instead of being buried under its logical grouping.
Existing information architecture of the Merchant Portal
Existing
The existing information hierarchy was too flat—only a few top-level entry points and a ton of sub-level functionality underneath, making it difficult to form a mental model of where things roughly were.
Improved information architecture of the Merchant Portal
Improved
The new information hierarchy has more top-level entry points, each responsible for less sub-level functionality, and overall grouped more logically and intentionally. The audio feedback switch, a small but highly used feature, is given top status.

The audio feedback switch was only a simple toggle and used to be buried two-levels deep, but I gave it top prominence since it was the most important functionality in our user interviews. Its importance came from:

  • Users are too busy to look at their phones during business hours, let alone physical interaction. Audio feedback thus become their only way of confirming that a customer has paid.
    • Not being notified can cause real trouble—some users recall chasing customers down for paying, only to embarassingly realize the switch wasn’t toggled on.
  • Surfacing the switch also lets the brand ambassador quickly see audio feedback status when he troubleshoots, since not playing audio confirmation may be due to other external reasons, such as the phone being muted or set to Do Not Disturb.

“A few days ago, a new customer bought a pair of scissors when I was copying a key for another customer, but I didn’t hear any payment confirmation from my phone. I chased after the customer, who was confused and showed me the e-Receipt. It turned out my app’s audio feedback was switched off, and I was so embarrassed.”

– A small business owner (68) recounting his frustration during our interview

Many of UnionPay Wallet’s small business users are mom-and-pop shops who couldn’t afford full-fledged POS terminals from banks. Instead of increasing new customers, they often focus on building rapport with loyal customers. Damaging their long-term relationship because a payment app didn’t work is near unacceptable.

Updated Merchant Portal main view Updated Merchant Portal main view – overlay
Hover to see numbers
  1. Merchant Settings
  2. Total amount of payment received today
  3. Total number of transactions today
  4. Amount of latest transaction
  5. Total amount of cash prizes earned today
  6. Switch On/Off Audio Feedback
  7. Upgrade Receiving QR Code
  8. This Month’s Transactions (List & Data Visualization)
  9. Buy UnionPay Promo Materials
  10. Receiving QR Code
  11. Frequently Asked Questions
Layout of the updated Merchant Portal, with simplified information hierarchy. The Audio Feedback On/Off switch is placed immediately under the overview card for quick access.
Existing
Improved

The whole interface now had a sense of clarity and order due to better information grouping and proper visual contrast. For the less tech-savvy shop mom, I also took extra care in writing the UX copy, adding status-related secondary text to the right side of the menu items.

Visualizing Transaction Histories

The existing transaction history view’s information density was too high. Visual hierarchy was poor as many elements had equal emphasis and compete for the user’s attention. It also did not present data trends, forcing small business owners to do a lot of mental calculations to project sales trends.

Existing design of transaction histories Existing design of transaction histories – overlay
Hover to see numbers
  1. Time range for viewing transactions: today / last 3 days / last week / last month
  2. Total amount of payments received today
  3. Total number of transactions today
  4. A single transaction, including e-Receipt number, card/account number, amount, and transaction time
Layout of the existing transaction history view. This design did not help the small business owner project sales trends in any way, forcing him/her to do a lot of mental legwork.

To help users better understand transaction histories and make business plans, I prototyped several forms of data visualization.

Line Graph 

Illustration of a line graph
Pros

It has all the merits of a bar graph but is visually more lightweight.

Cons

Lines require more negative space to tell themselves apart, making them unable to host higher-density data.

Bar Graph

Illustration of a bar graph
Pros

Proven effectiveness and easily understood by most people.

Cons

Visually boring; could not fulfill the client’s “be different” requirement.

Calendar

Illustration of a calendar
Pros

Visually interesting and also easily understood by most people.

Cons

Too much emphasis on highest- & lowest-earning dates, sacrificing the ability to project other sales trends.

Area Graph

Illustration of an area graph
Pros

Really the best around—looks like a bar graph so very understandable; area shape could handle much higher data density (e.g. a year’s transactions).

Cons

UnionPay servers could only fetch the last 3 months of data, making it an overkill.

The area graph came in second place after the line graph, and it also had the unique advantage of allowing the viewer to discriminate large amount of dense data (especially useful when viewing yearly transactions). It was eventually dropped because UnionPay’s servers simply couldn’t feed a year’s worth of data quickly enough.

Improved design of transaction histories Improved design of transaction histories – overlay
Hover to see numbers
  1. Lookup single transaction (new feature)
  2. Left to right: transactions for today, this week, this month (active), or custom range
  3. Transaction data visualization. Monthly comparison shown; will not display if time range is set to today
  4. Today’s date
  5. Today’s total amount of payment received & transactions conducted; will not display if time range is set to today
  6. A single transaction, showing card number, transaction time, and amount
  7. The previous days’ transactions are grouped in separate areas below
Layout of the updated design for viewing transaction history and data visualizations. We decided to propose a new feature that allows the user to quickly look up a single transaction by scanning a QR code or typing its e-Receipt number.
Existing
Improved

Single Transaction Lookup

Just as illustrated above, one of small businesses’ persistent pain points was the awkwardness in asking a customer for payment confirmation. It’s embarassing and trust-damaging when the owner accuses the customer of basically stealing and the customer proceeds to show proof of payment. And yet, these incidents regularly happen as payment audio feedback could be inadvertently turned off. To mitigate this issue, we offered a quick way to look up single transactions on the app.

When displaying only today’s transactions, the data visualization card is by default hidden.

Wrapping it Up

For the low tech-literacy shop mom, a layout with stronger visual hierarchy and clearer copywriting can be more reassuring. For both the tech-savvy younger shop owners and the UnionPay brand ambassadors, our improved info architecture makes it easier to discover new features and merchant rebates, as well as quickly trouble-shoot problems. Whereas all users previously had to do much mental math to project sales trends, the newly added data visualizations would be of great help.

We conducted follow-up interviews after the designs were shipped, and I was proud to find that small business owners felt the Merchant Portal was much easier to use.

Small business owners can access the merchant portal from the Receiving QR Code view in the Scan to Pay tab.
Store settings, which used to be prominently displayed yet seldom tinkered with, are now hidden in a corner icon.
Small business owners can view visualizations of their transactions by week, month, or customized ranges.

Conclusion

The uniqueness of UnionPay lies in it being a mediator between small businesses and their customers, both of whom our target users. Designing the Merchant Portal made me think deeper about the software product vis-a-vis all the stakeholders involved. In this case, a user-friendly app empowers small businesses, makes their customer happier, and eventually boosts UnionPay’s reliable image in both small businesses’ and their customers’ minds: a win-win-win situation.