Alipay+ is committed to providing global users a convenient and preferential cross-border payment experience in online and in-store payment scenarios. To achieve this goal, Alipay+ provides UX design guidelines to help partners cooperate with Alipay+ more efficiently and conveniently, and thus to build a friendly payment service experience for global users.

This section provides an overview of the Alipay+ UX design guidelines for Mobile Payment Providers in terms of design principles, guide overview, and actions to take.

Design principles

The UX design guidelines are designed based on the following principles:

Provide consistent experience

No matter which digital wallet the users use, they can enjoy a consistent cross-border payment experience brought by Alipay+, including consistent brand information, consistent payment journey, and consistent page information framework. With this principle support, users can quickly complete the payment with the least amount of effort and experience the core services that are provided by Alipay+ technology.

Follow local habits

To serve users in different regions of the world, the Alipay+ UX guidelines are designed to follow local habits to the greatest extent. On the basis that all Alipay+ standard items in the pages are displayed and used correctly, you can customize the visual style of your digital wallets based on local usage habits or needs.

Guides

The UX design guidelines for Acquiring Service Providers (ACQPs) provide specifications for both scenario overview and page details.

Scenario overview

The scenario overview explains how certain tasks are completed within the respective scenario, and what pages from the 8 Alipay+ each scenario contains. To help you understand the scenarios, the pages are marked as 4 categories: Alipay+ Side, Merchant Side, Acquirer Side, and Wallet Side.

For example:

For pages marked as A+ STD (Alipay+ Standard) in blue, you must design and develop these pages according to the specifications. For pages marked as A+ OPT (Alipay+ Optimization) in orange, you can design these pages based on your own business logic.

Page details

Page details explain what elements are displayed on respective pages. For each page, page elements are classified into three types: information, action, and brand. In addition, elements are specified as Mandatory (blue) or Optional (orange).

For the mandatory elements, you must display them on the page. For the optional items, you can choose to display them as required. For example:

In most cases, the guide does not specify the design for the page/browser header unless otherwise specified. You can arrange necessary user actions like Return, Close, or Done on it.

Information elements

Alipay+ defines information fields that need to be displayed on each UI page, such as payment information, amount information, merchant information. You need to display the information according to the page detail schemes to ensure that users understand the current page state, complete actions, and thus successfully go through the overall payment journey.

Action elements

Alipay+ defines key interactable user actions on each page. You need to display these actions according to the page detail schemes to ensure the consistency and smoothness of the payment experience.

Brand elements

The brand element includes the Alipay+ brand, brands for wallets, and brand-related copywriting. It helps users establish their brand perception during the payment process. You need to display the brand information according to not only the page detail schemes, but also the unified Alipay+ brand display guidelines to ensure the consistency of the overall experience.

Co-build Alipay+ experience

Join us to co-build the Alipay+ experience. You can learn more about the UX design guidelines by reading the other topics in this documentation. In addition, Alipay+ also provides the following support for you to implement your design.

Brand logo image

For the Alipay+ brand asset and other Mobile Payment Provider brand assets, use the Acceptance Mark Generator.

Verify your design plan

It is strongly recommended to contact us (through the project manager) to verify your design plan before you start the formal development.