Designing a Cohesive Mobile Payment UI: NetEase Pay Case Study

Product Positioning Derived Design System

Internet’s rapid growth has transformed payment habits, shifting from cash and POS cards to mobile QR codes and payment codes. By June 2017, only 247 third‑party payment licenses remained in China, intensifying competition among mobile payment apps. To survive, NetEase must reflect its brand DNA in interaction and visual design.

1. Pre‑product Analysis from a Design Perspective

The company’s DNA determines product direction; good design stems from understanding user value. An analysis of market payment tools shows distinct positioning:

Alipay: Originated as a payment solution for Taobao – e‑commerce + payment.

WeChat Pay: Integrated within the WeChat client – social + payment.

PayPal: Serves cross‑border transactions – cross‑border + payment.

NetEase Pay: Leverages NetEase’s leadership in gaming, offering comprehensive game‑recharge solutions – game + payment.

2. Product Keywords

Payment, game, finance, wallet, red envelope.

3. Understanding Business, Users, and Scenarios

Insights into user groups and usage contexts guide design decisions.

4. Final Product Colors

Primary brand color: orange‑red; secondary color: blue, balancing liveliness with professionalism and security.

Case Study 1: Integrating Brand Entry in Mobile Payment

NetEase Pay’s homepage contains numerous third‑party icons with inconsistent styles. To unify them, three design versions were explored.

First Version

Standardized brand color applied to icons and fixed image size to reduce visual fatigue, though it sacrificed brand recognizability.

Second Version

Introduced livelier colors for the young user base, improving icon discrimination but risking overall consistency.

Third Version

Shifted from linear icons to shape‑based icons with background color blocks, enhancing hierarchy and recognizability while preserving the product’s visual tone.

Case Study 2: Card‑Based Design for NetEase Game Brand

"It makes very clear the atomic unity of things, it's still flexible while creating a kind of regularity." – Matias Duarte

The goal was to combine classic NetEase game brands with a convenient recharge gateway, using a card layout to highlight each entry clearly and maintain brand consistency.

Design Process

Before Image Load: Use immersive design with five low‑purity colors as placeholders to avoid abrupt white flashes and provide a smooth visual transition.

After Image Load: Display high‑definition game artwork as background to resonate with gamers and keep the experience fresh.

Summary: Three Values of Visual‑Brand Harmony

Defining the Brand: Derive design keywords from product positioning and target user characteristics.

Displaying the Brand: Use detailed visual elements to reduce cognitive load and guide users through payment flows.

Accommodating Different Brands: Balance third‑party brand distinctiveness with the core NetEase Pay style to achieve a cohesive yet flexible interface.