UX Guidelines
UX Guidelines

Volume UX Guidelines

To maximize your conversion rate and customer adoption, it's crucial to focus on the following:

  • Ensuring the Volume button’s size and design align with your overall UX and other payment method options.
  • Optimizing the placement of the Volume button at checkout for visibility and ease of access.
Web Mobile Example

Button designs

Our button designs are highly adaptable to accommodate your current layout. If none of the designs provided align with your existing payment methods setup, please feel free to submit a feature request (opens in a new tab) for further customization.

Mobile button designs

FIRST TIMERETURNING CUSTOMER
First time users are shown the variety of bank options available.Returning users are displayed their previous selection to reduce friction and reduce dropoff.
Standard Implementation
This implementation utilizes the standard volume button to manage customer interactions. It is particularly effective when payment methods are presented as actionable buttons, providing a seamless and intuitive user experience. The following component is designed to function as a fast-checkout option. It should be strategically positioned on the product display page or the final payment page. When clicked, the button will seamlessly trigger the opening of the banking app for quick and secure payment.
Prior to selecting a bankAfter selecting a bank
Radio Buttons Implementation (VolumeSelector)
Radio buttons enable users to choose from multiple options before making a final selection. This button is best suited for payment selection pages before the final checkout. We strongly recommend setting our button as the default option to streamline the user experience and guide decision-making.
Prior to selecting a bank with radio buttonAfter selecting a bank with radio button

Standardised Copy

Our copy is carefully crafted to raise consumer comprehension and understanding of our product, so please ensure all components adhere to the below illustrated standardized copy.

  • Primary CTA Text should always be Pay by Bank App
Standardised Copy Primary
  • Secondary CTA Text (where relevant): Safe, Easy, and Bank-protected
Standardised Copy Secondary

Standardised Copy

Desktop button design

FIRST TIMERETURNING CUSTOMER
The desktop implementation generates a QR code that customers can scan to proceed with payment authorization through their banking application.
Prior to selecting a bankAfter selecting a bank

Informational Buttons

Info button

Clicking on the information icon Info Icon will trigger a pop-up that provides a detailed explanation of what "Volume" means. This feature aims to enhance user understanding and build trust in the payment method.

Info Icon Pop-up

I don't see my bank

If users are unable to locate their bank, they can click on the “I don’t see my bank” icon. Volume will then provide instructions on how to download the banking app. Alternatively, customers can complete payment authorization using their mobile browser.

I Don't See My Bank

Button Positioning

Where to display the button on iOS and Android mobile devices?

  • Volume button should stand as the leading payment method at checkout, designed to influence customer decisions by offering a more secure, faster, and cost-effective option compared to alternatives.
  • Customers can immediately recognize the logo of their preferred bank, increasing the likelihood of selecting this payment method. The display of multiple bank logos enhances visibility and encourages users to choose the method they trust.

The Standard Volume button is most effective when other payment methods are available as actionable buttons. To maximize adoption rates, position the Volume button at the top of the list.

Standard Button Background
Wrong Button PlacementCorrect Button Placement

If your current payment methods page uses radio buttons, incorporating the Volume radio button design will ensure compatibility with your existing layout. To maximize adoption rates, set it as the default option and position it at the top of the list.

Radio Button Background
Correct Radio Button PlacementWrong Radio Button Placement

Where to display the button on web desktop?

  • The Volume button is the primary payment method at checkout.
  • The QR code is prominently displayed to customers, featuring the logos of their bank apps.
  • Alternative payment methods that require multiple pages are accessed by clicking a button.

Web Correct Component Placement

Best practices to increase users adoption

  • The volume option is the default payment method.
  • Other payment methods are grouped under a dedicated button for additional payment options.
  • Returning customers will see their previously selected bank immediately, enabling a one-click checkout experience.
  • Customers will save at least £0.01 when paying with Volume compared to traditional payment methods.
Adoption Standard Correct Example
Adoption Standard Wrong Example
  • The buttons lack information that could influence customers choice.
  • The payment methods section looks overcrowded.
  • The buttons may appear small, potentially leading to accidental clicks.

Button Sizing

Adjust the corner radius to match the appearance of other payment buttons. By default, Volume has rounded corners. You can change the corner radius to produce a button with square corners or a capsule-shape button.

Button Sizing 1Button Sizing 2

Examples of good implementation


All interactions for returning customers

Returning customers can make payments with a single click in your app and authorize the transaction using biometrics for secure processing.

Returning Customer Step 1Returning Customer Step 2Returning Customer Step 3

All interactions for new customers

  • Customers will see rotating icons of popular banks, allowing them to quickly determine their choice of bank.
  • Volume scans the customer's device to identify installed banking apps, displaying only relevant options.
Implementation Example Step 1Implementation Example Step 2
Implementation Example Step 3Implementation Example Step 4
  • Volume will remember the customer’s choice for future transactions, eliminating the need to repeat previous steps.
  • Customers will be redirected to their banking app for authorization.
  • The bank will display a payment summary to the user.
  • That's it! Volume will happily return the customer to your app with all the payment details!
Implementation Example Step 5Implementation Example Step 6

Volume Trademark

Use Volume graphics to show that Volume is an available payment option when you show payment options to your users.

Volume Trademark

Volume Figma resources