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.

Design principles

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

Provide consistent experience

No matter which digital wallet users use, they can enjoy the 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 Mobile Payment Partners (MPPs) provide specifications for both scenario overview and page details. In short, all expeience are created based on the 8 Alipay+ UI pages. To obtain the source file of 8 Alipay+ UI pages, see Download design resources.

Alipay+ Standard pages

Alipay+ Standard pages are the 6 must-to-have pages from the 8 Alipay+ UI pages. These pages are the foundation of the overall Alipay+ experience. Your users will not be able to complete their tasks without using these pages in your UX flow. You must design and develop these pages according to the specifications.

Alipay+ Standard Page List:

• Cashier Payment - Payment confirmation page
• Common - Payment result page
• Common - Transaction detail page
• Auto Debit - Authorization page
• Auto Debit - Authorization result page
• User-presented Mode Payment - Alipay+ payment code page

Alipay+ Optimization pages

Alipay+ Optimization pages are the 2 nice-to-have pages from the rest of the 8 Alipay+ UI pages, these pages help you improve the Alipay+ experience. Though your users can complete their tasks without using these pages in your UX flow, we recommand you add these pages into your design for a better user experience. And you can design these pages based on your own business logic.

Page List:

• Auto Debit - Authorization history page
• Auto Debit - Authorization detail page

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 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, amount, and 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.

Download design resources

8 Alipay+ UI pages: 📎8 Alipay+ UI Pages 20211124.sketch

Alipay+ logo asset: 📎AlipayPlus_brandasset.zip

All UI are designed in the 350px*812px resolution (@1x scale factor) for demonstration.

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.