💡UX - Integration Guide

In this guide, we have written down the experiences that we have gained with our partners around user experience.

Introduction

When your customer uses your product, they want to complete a task. This could be, for example, the application for a loan or the payment for a product or service. In this process, the user does not care how it is completed in detail and which components it has to go through in the background. The customer wants this process to be as simple, fast, and uncomplicated as possible. That is why we have to remove all obstacles and concerns in order to offer the customer a coherent process.

In the following guide, we will explain which points are important and how they must be implemented best in order to create an optimal user experience.

Customers of ours who have adjusted their integration based on this guide have increased their conversion rate by at least 5 %.

Integration

We have different ways of how you can integrate Tink Germany into your process. But we recommend that you use our Javascript-Widget for Web Integrations and our mobile SDKs for App Integrations.

For our Javascript-Widget we have provided a base styling for the XS2A form, which can be implemented by you with just one line of code. This base styling has everything regarding UX which you need to offer your users the best solution. Of course you can create with this base styling your own styling. The easiest way is to adjust the variables we define at the very top of the xs2a_base.css style file.

If you create your own styles, we recommend to follow these guidelines.

Build upon the base CSS: This will ensure you correct styling in case future HTML markup changes occur. Also the positioning rules are always the latest.
Add a style directly to elements: The best way is to define a style for the elements as directly as possible. Use simple selectors which should not make assumptions about the HTML structure. Please keep in mind that we can not provide support for themes which do not use our base CSS as a basis.

Preselecting Bank & Pre-filling Information

Every step you don´t need in the process is providing value to your user. If you have any information about the bank of your user or the bank account (Bank Code, Account Number, IBAN, BIC) you can easily send this information to us and therefore the bank search step will be skipped during the process. This pre-filling of Information is a huge benefit for the user, because he can save time and effort with this.

Customer Journey

In the following part of our guide we will dive deeper into the customer journey and explain at each step what is important for the user and what you need to take into account.

Introduce Tink Germany to prepare the user

A big factor in terms of generating trust is the preparation of the user before entering and interacting with the Tink Germany flow.

It should be clearly communicated to the user the reasons that he will interact in the following with Tink Germany. Even if you are using your own eiDas certificate it is also important to know for an user what are the benefits for him of using the service.

Depending on the use case the context you need to provide for the user can be different.

A payment user`s intent is often higher and therefore detailed context is not always as necessary as in other cases where you for instance apply for a loan. It is beneficial to communicate only the essential information for the user in this case

Communicate that users are expected to log in to their bank, and why.
Clarify the relationship between your product, Tink Germany, and the user's bank to help users feel more confident and to inspire action.

In other cases like applying for a loan it is important to clarify what the benefits are for the user using this service. Ask yourself what he wants to archive and why you want him to use Tink Germany. Messaging the value provided for the user instead of just informing about the technical process that is following ( e.g. retrieval of bank information) can mean a lot for the user experience.

Bank search

The first step (if the Bank was not preselected) for the user is the Bank Search. It is very important to explain to the user what he needs to do and what we are looking for. For us, it is important to find a bank. We don´t need his IBAN or account number. Our bank search is also working with the IBAN, but we found out that a lot of users are making mistakes during typing in their IBAN or they just don´t know it by heart. So it is easier for them to just type in the name, city, or BIC of their bank.

It is the first step where the user is interacting with us. To improve the confidence in us we added an additional link where the user can get more information about us and about what we are actually doing.

After the successful bank search, we can show the login from the bank to the user. In this Step, we are explaining to the user that he can log in to his bank account with his normal online banking credentials. It is important to create trust with our additional security information and the information about the bank of the user.

Moreover, we tried to focus on the Login and not on the legal texts to help the user. During this process, the user could enter the wrong credentials. This is why it is necessary to take care of every error message with a consistent design that is not forbidding but helps the user to understand the issue and what he needs to do.

Account Selection

If the user has more than one account connected with the online banking credentials then we will show after the login this screen to ask the user for permission to one of the accounts. For this case, it would be also more transparent if you explain in your introduction to the user that it could be the case that he needs to choose an account later in the process and that we are not receiving any other information from the other accounts.

Tan

For this step, the same rules are valid as before. It depends on your own use-case if you can improve the transparency for your user. For example, you want to check the balance of the account before you carry out the payment it could be useful to explain this to the user in your introduction. Because in this case the user could get two different tan steps and could wonder why he needs to confirm two times during a payment. After the successful authentication, the session in our wizard will be ended and the user is coming back to your process.

Legal Information

It is mandatory to explain and ask the user for permission before we are connecting to his bank account. We have kept our text as short as possible but as long as necessary. It is not necessary to expand this further. As a customer, you should always bear in mind that the user should understand and accept the text.