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 Partners in terms of design principles, guide overview, and actions to take.
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.
The UX design guidelines for Acquiring Partners (ACQPs) provide specifications for both scenario overview and page details.
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:
Acquirer Side, and
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 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.
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.
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.
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+ logo: 📎AlipayPlus_brandasset.zip.
For the Alipay+ Partner brand asset (for Auto Debit) and other wallet brand assets, use 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.