This how the site looked before the UX redesign
1) Identifying the area of potential improvement in the design -
a) The login form lacked clarity. It gave a weaker information scent of which login form it was. Though it may sound obvious that users know which form they are on, research shows that users sometimes forget which form they are currently filling.
b) Users can also forget which form field they are currently on. Labels help users keep track of the form field. Though this design respected this rule, it missed out placing the input field and label in an alignment that would help in a smooth eye movement (top to bottom)
c) “New user” and “Forgot user id?” link was weakly placed.
d) “Continue” button gave an idea that the form has more form fields on the next page. But this wasn’t the case. The “continue” button was also placed below a long security tips section which was confusing.
e) The bank website also provides links to watch a tutorial video, to enable transactional facilities, to disable mobile and internet banking, and to generate debit card pin. All of these links were placed under an image that had similar colors to these link’s colors. The links camouflaged. New users can easily miss these links. The links weren’t aligned with the user's needs and they had poor icons that mismatched with the labels.
f) The page had no navigational link. Although the navigational bar is used rarely by frequent users, new users can land on the wrong page and then use the navigational bar to browse to the correct page.
Note:- All of these problems were identified by me and my family and from our recent first experience of using this site.
How I improved the UX of this bank’s website
a) Used big fonts to display to users the name of the form they are currently filling.
b) Displayed the global navigation bar.
c) Placed the “Existing users” and “new users” in tabs. Users could switch between them with just one click without reloading the page.
d) Aligned the form labels in line with eye movement.
e) Gave “forgot user-id” an appropriate place.
f) Instead of displaying the whole security tips sections below the form, I included a link to it which took users to another page. The users can read the tips there. We can also go for expanding accordion instead of links. Both
e) Named the form button as “login”.
g) I placed the links to extra services below the form. I gave them big blue labels with a small one-line description in black below them. The services were also given appropriate icons.
h) Included a footer with all the extra navigational links. The footer also had links to the bank’s social account (white square boxes)
All of these combined gave a good login page.
I am a freelance UX designer that can help your business boost revenue through ROI driven UX conversion.
If were are fit, DM me on one of my social accounts you are comfortable with or here on Behance.
My social links and contact links-
Instagram — https://www.instagram.com/kaiasaman_os/
Instagram — https://www.instagram.com/ux_kaias/
Linkedin — https://www.linkedin.com/in/khanaman143
E-mail — khanamanisaq28@gmail.com
P.S. — These design research, identification of flaws, and designing solutions were just for practice.
Thanks,
Aman
