Introducing Auth Dialog V2
How the Design Team at TrueLayer designed a brand-new authentication dialog that permits end-users to share their banking data more easily.
Hello Auth Dialog V2!After several months of intensive design, product, and engineering work, we are incredibly thrilled to launch our new, customisable authentication dialog.For those not familiar with it, the “Auth Dialog” is the end-user facing interface used by our Data API clients to ask for their consent. Its purpose is to guide our client’s end-users through the process of sharing their banking data with financial applications via both open banking and credential sharing.Since our very first release of Auth Dialog V1, almost a year ago, a lot has changed in financial technology; Open Banking, PSD2, and the FCA released their official guidelines; financial applications started to integrate bank APIs to build their products; end-users approached financial applications/challenger banks and got exposed to financial user interfaces (‘UIs’).Consequently, we decided that our Auth Dialog V1 needed a deep re-design to offer our clients an experience that is:
- better integrated into our client's user journey through customisation;
- more intuitive UX/UI to increase the flow completion rate;
- compliant with FCA and PSD2.
How we did it: design thinking and client feedbackTo achieve a better product, we aimed at solving both known and ambiguous aspects of V1 through Design Thinking. This non-linear and practical method led us to intermediate solutions that then became the starting points of alternative paths. Those paths allowed us to redefine the initial issues, and solve multiple, unexpected problems.
UX/UI research, several design brainstorming sessions, a lot of prototyping and user testing sessions kept us busy and led to the brand new version. Still, the most valuable information was client feedback. Thanks to their suggestions, we’ve shaped an interface that aims to reduce friction and provides universal guidance for a broad, mixed audience of end-users.Let’s explore the new interface and take a closer look at its features!
Customisation: making the end-user journey better and betterAnd here comes the long-awaited news: the new dialog is customisable for all of our clients!In our previous version, the only dynamic parts were the client logo and application name. With Auth Dialog V2, instead, you will be able to personalise:
- Colour Palette — Change the background, buttons, and drop-down colours to fit your UI;
- Help link — Redirect your users directly to your own FAQs page hosted on your domain;
- Data Usage Copywriting — Explain to your users what you need their banking data for, using your brand and tone of voice;
- Skip Consent Page — If you are an authorised FCA company, you can skip our consent, and use your own consent page.
Plenty of new UX featuresWe’re not finished yet!One of the most important parts of the whole journey is when we ask the end-user to input their bank credentials. We worked hard to make this specific step frictionless by introducing:
- Input labels: The labels are meticulously tailored to follow the ones of the banks;
- Live validations: A pre-check of the credentials is done by using regular expressions;
- Caps lock detection: Warn the end-user if caps-lock is activated. Useful for case sensitive details;
- Password field visibility: Turn password field visibility on/off. Great for the end-user to see what they are typing; prevent typographical and validation errors;
- Embedded Banks FAQs: Bank FAQs are at hand, so the end-user doesn’t need to leave the flow;
- Dynamic colours: A cool background colour animation smoothly transitions to the bank login page; bank-specific colour palettes are used;
- Error handling: End-users will not get lost. We completely reviewed our errors copywriting and UX and provided actionable items for the user to retry and/or better understand what they are experiencing;
- Loader: The loader now shows the real amount of time needed to connect to the bank. We are also “hiding” a second automatic retry into that, in case the first connection doesn’t work.