# Mastercard Data Connect Components UX Guidelines
source: https://developer.mastercard.com/open-finance-us/documentation/connect/components/ux-implementation/index.md

This page outlines both requirements and best practices when using Mastercard Data Connect Components:

* [UX requirements](https://developer.mastercard.com/open-finance-us/documentation/connect/components/ux-implementation/index.md#ux-requirements) -- There are some requirements that must be met, such as making Mastercard's role clear to end users, and presenting the terms and conditions.

* [UX Best practices](https://developer.mastercard.com/open-finance-us/documentation/connect/components/ux-implementation/index.md#ux-best-practices) -- Recommended approaches which are not mandatory but which we regard as being best practice where possible.

These are explained below.

## UX requirements {#ux-requirements}

The following requirements *must* be adhered to:

1. Mastercard's role must be clearly stated to the end user.
2. Mastercard's Terms and Privacy Notice must be presented to, and accepted by, the end user.
3. Mastercard's brand must be represented appropriately.
4. The user's login credentials must not touch a Partner's servers.

<br />

The following illustrations detail the specifics of what each of these 4 requirements entail. The UX images are meant to demonstrate the requirements, and are illustrative only. The boxes on the right are the specific requirements that must be adhered to.

![](https://static.developer.mastercard.com/content/open-finance-us/uploads/components_ux_requirements_1_june2025.png)

![](https://static.developer.mastercard.com/content/open-finance-us/uploads/components_ux_requirements_2_june2025.png)

![](https://static.developer.mastercard.com/content/open-finance-us/uploads/components_ux_requirements_3_june2025.png)

![](https://static.developer.mastercard.com/content/open-finance-us/uploads/components_ux_requirements_4_june2025.png)

## UX best practices {#ux-best-practices}

The following embedded Figma files illustrate recommended user journeys for legacy and OAuth (direct) connections.

For the best viewing experience of the UX journey, click the **full screen mode** option or **zoom** using the controls located on the right.

<br />

<br />

<br />