Creation of the two factor authentication feature and working the design across four banking brands within Lloyds Banking Group.
Background
As part of improvements to customer security, Lloyds Banking Group wanted to create a simpler and more unified user experience for their two factor authentication system. There existed five different authentication methods, with the most efficient method being through a mobile app.
A user on a desktop or mobile making a transaction which prompts them to verify their identity for security, for example, paying someone from their account or buying from an online shop, would need to launch the mobile app to verify the transaction before going back to the original site they were on to complete the transaction. A visual guide was needed to tell users to launch the mobile app to verify the task.
Solution
A set of abstract illustrations were designed to denote the five authentication methods. With the mobile app authentication process, I created a series of animations depicting a formation of several dots that represent digital data dispersing outwards, travelling in to a mobile device screen, prompting the user’s attention to launch their mobile app.
Abstract illustrations for the five authentication methods drawn to match the Lloyds Bank brand style.
The next stage involved recreating these illustrations in the brand style of Lloyds Banking Groups three other retail bank brands, Halifax, Bank of Scotland and MBNA.
The illustrations were used in this screen taken from part of the user journey where a choice of authentication methods are presented, customised to which methods the user has previously set up to use.
Here are variations of the authentication selection screen for user testing which I had previously designed.
Each of the authentication methods are button selection components which had to follow the design system interaction behaviour of the brands buttons. For the Lloyds Bank brand, the contents of the button component changed to white on the hover and hit button states.
Below are designs for the different button states for the five authentication methods across the four different brand treatments.
This is the animation storyboard for the mobile app authentication method showing the dot formation as an abstract representation of data travelling outwards and then in to a mobile device screen. This is followed by an animation of the dot formation being scanned and ending with padlock and tick shown, this sequence is to communicate a checking and verified process.
The movement and transition behaviour of each element of the illustrations were designed to be in keeping with each of the brand style guides.
Close detail of the dot formation scanning movement.
The animations were created in After Effects and export out as a JSON file and converted into small scalable Lottie animation files.