Redesigning Bank’s Login Page — A UX Case Study

As a UX learner and practitioner, my primary attempt begins by improving the User Experience of everything that surrounds me. One of them being the interface of the net-banking page of HDFC Bank which is popular in my country. Nevertheless, the job of a UX Designer is not limited to designing only internet based interfaces, its spectrum is much broader and can be applied to any field that provides you an experience.

In this case study we would be focusing on the web interface of HDFC Bank’s Netbanking Login Page.

Login here is a two step authentication process,

1. First page has input box to enter customer ID.
2. The second page has (a) input box to enter password and (b) A checkbox for security image & caption verification.

Here is the current look,

Page 1 to enter Customer ID

Page 2 to enter IPIN (Password) and verify security image and caption

Why I chose to redesign this?

As a user as well as a UXer, I encountered many issues in the current design that can be changed in order to provide a better user experience to the users.

Below are the major issues with the current design of Login Page 1,

Points of consideration in the current design of Login Page 1

To summarize,

1. Inadequate use of space, 1/3rd of available screen space remains completely empty giving a feeling that website has not loaded properly.
2. Label and Input box are placed Left-to-Right. Preferable is Top-To-Bottom for better readability. While in this case it doesn’t matter much visually, when there would be more than one field, it would and it is expected to be uniform across screens, hence, top-to-bottom approach is a win-win.
3. Redundant textual Information that can be alternatively projected in a better way.
4. Security tips are barely noticeable.
5. Center of the screen is loaded with paragraph texts and very colorful images which are not required in the login page and can be displayed in the homepage instead. They do not generate more clicks here. However, a proposed design will be introduced for the same in case business insists on keeping it there.
6. Some minor alignment and placement issues.

To settle the above mentioned considerations here’s a wireframe sketched for the page,

Wireframe for redesign of Login Page 1

What I did is,

1. Moved the login modal from left to center of screen.
2. For Label and input box, followed a top-down approach.
3. Highlighted input box and added blinking cursor so that user quickly knows where to enter data.
4. Replaced redundant text with buttons which has self-explanatory icons and text.
5. Emphasized on security tips by keeping the text short, crisp and bold.
6. Fixed the alignment issues.
7. Replaced colorful images with monochromatic self-explanatory images and paragraph texts with buttons and aligned it on the right-corner. (I might not include this in the final design for the reason specified above.)
8. I have also added a background image that would reflect family bonding and will give the website a more authentic feel.

And here’s the final design for login page 1,

Proposed redesign for Login Page 1

For the 2nd page, below are the major issues that I encountered,

Points of consideration in the current design of Login Page 2

To summarize,

1. Placement of “Use Virtual Keyboard to enter password” text is far below the input box to enter password which means by the time user has encountered this statement, chances are that he/she has already entered the password and if they are in a hurry or lazy, they wouldn’t want to erase the password, check the checkbox and type password again.
2. Also the note stating password is case-sensitive should be placed closer to the input box so that user can easily notice that before entering the password.
3. We can also choose to display the virtual keyboard on request, to decrease the noise on the screen. (optional)
4. Some repeated issues like alignment issues, inadequate use of space, etc.

To settle the above mentioned considerations here’s a wireframe sketched for the page,

Wireframe for redesign of Login Page 2

what I did is,

1. Moved the checkbox option below “Password” label for quick visibility. Added text “recommended action” to emphasize the importance.
2. Moved note below input box for the same reason.
3. Fixed visibility issues and alignment issues with security image and caption.
4. Moved the acknowledgement of T & C and made the text more concise.

And here’s the final design for login page 2,

Proposed redesign for Login Page 2

Thank you for going through my case-study. Please share your feedback in the comment section. :)
Happy designing!