App login & registration

I joined a small team of designers at one of the Big 5 banks in South Africa to work on a very specific feature: login and registration. While we focussed on the app, online banking and a progressive web app, I am going to cover only the work that we did on the app, here.

I joined the team in a UI Design capacity.


Team objectives
  • Creating a seamless registration process that satisfies both security and usability concerns.
  • Creating simple login flows that will allow the user to log in with biometrics, a password or a PIN.
  • Enabling the user to change or reset their password and PIN.



Before I joined the team, eight personas were identified and the basic designs for login and registration have already been done. But the work was far from done. I helped the team with work that went far beyond our scope, including but not limited to an interactive app demo, error handling, a content page which doubled as a landing page and working with the Sun City Nedbank Golf Challenge team to create content that will draw viewers.

I was introduced to usability testing during this time and got to do best practice research for the app demo feature.


App login redesign

The original app login flows were very limiting and very dark. We wanted to add an airy feel to the designs, along with improving the overall login experience.

Before the redesign, the login flow allowed users only one login method, with their account password as a backup option. We added much more flexibility by allowing them to switch between biometrics, a password or a PIN. We also added a content screen displayed upon app launch, which would advertise the latest events, such as the Nedbank Golf Challenge, and products that the client might be interested in.


The login screens were very dark before the redesign
The login screens were very dark before the redesign
The login screens were light and bright after the redesign, with lots of white space.
After the redesign, the login screens were light and bright with lots of white space


We also added much-needed error handling, as well as options to reset a PIN after entering it incorrectly three times. Previously, the client’s account was blocked and they had to go to a branch to have it unblocked.

We used facial recognition software that smoothly integrated with the Department of Home affairs to identify and verify the user, so that they could reset their app PIN safely.

High fidelity UX flow of a client entering the wrong PIN three times
UX flow showing the steps a user would follow to reset their app PIN after entering it incorrectly three times (click to enlarge)


App registration improvements

For years, only clients that had a bank account with Nedbank could use the app. There was no app access or usage for those who had loans, investments, or any other non-transactional products. We changed this by introducing what we labelled Non-TP registration. A Non-TP client would be a Nedbank client who has never had a TP (transactional product) with Nedbank. This was quite the process, as we had to get stakeholder buy-in, proving to them the benefits of allowing a client with a Nedbank investment product or home loan to use the app.


The challenge

Historically, all TP clients would receive a generated profile name, a password and a PIN (PPP). These were the details that they would use to log on to the online banking platform and the old banking app. Before I joined the team, this functionality was used as-is to allow users to register on the “new” app with PPP verification and set up their preferred login details shown above.

However, Non-TP clients did not receive these PPP credentials so we had to find a new, secure way to allow them access to the app. The simplest solution for this was to skip the PPP verification step. Eventually, this allowed us to completely remove PPP as a verification step, as some user research proved that most clients did not remember these credentials and had kept the physical paper with these details somewhere in a drawer (as I did).

A big win for UX, in my opinion.

High fidelity UX flow of a non-TP app registration
UX flow showing the steps a Non-TP client would follow to register for the app (click to enlarge)



Sketch, InVision, lots of Sticky Notes 🙂