Opportunity

The login screen was a great opportunity to create a recognisable brand moment that could merge branding with product to provide a feeling of trust and security. The login screen for any app can be seen as a digital front door, but for a bank it’s more than that. It’s the door to your vault, or the dial to your safe. A secure portal to your finances.

Process

Before arriving at the final solution I made many explorations, including the usual input fields or dots you would expect for a 5 digit PIN code. The branding was being created in tandem with the first flows, so I was looking for opportunities to integrate and evolve the branding into key moments.

A primary visual treatment from the brand direction were large semi-transparent line segments, either connected at angles or circular, placed within the background of visuals or sections. Drawing from the symbolism of the bank vault and the brand line segments, it became clear to merge them into a login PIN wheel. Empty, filled, and loading states of the PIN wheel were added. I created a prototype in Principle that was then used in addition to the design file for hand off to developers for implementation.

One consideration I needed to make was name length of the user to make sure that no matter the name it would fit within the circle and not overlap.

Result

The result is a unique login screen featuring a vault inspired circular PIN wheel that gives a sense of trust and security, creating an emotive brand experience for the user.