I am amused and amazed when a company I do business with invests substantial time and money in rolling out a new service portal, and I encounter multiple terrible UX elements in the first few minutes of using the new portal.
Let’s look at the new personal banking portal which Eastern Bank rolled out today.
A smart UX choice would have been to put the new portal at the same URL as the old one. Second-best would have been an automatic redirect, i.e., when you visit the URL of the old portal, which presumably you bookmarked or it’s in your browser history, you get redirected automatically to the new one. Third-best would have been to display a message at the old URL telling people what the new one is. Did Eastern Bank choose any of these options? No, they did not. Instead, when you visit the old URL you are presented with the same old login page as before, and then, only after you enter your username and password and submit it, does it display a message telling you you’re in the wrong place and providing a link to the new portal. This is just dumb.
But wait, it’s even worse. If you open the “Login” menu on the Eastern Bank home page and select “Personal Online Banking” from the menu, it’s the old, incorrect link. They rolled out their new banking portal and didn’t update their home page to link to it! Astounding.
OK, so, once you manage to get to the right URL, what’s next?
Well, first of all, the elements on the login page, like the big photo on the left and the login form on the right, redraw several times on Firefox before they “settle down” into a static configuration. This behavior does not manifest on Chrome. So we have yet another corporate web portal which didn’t prioritize making their web site work properly on non-Chrome-based browsers.
Speaking of that big photo, I cannot emphasize enough that no one who uses a banking portal feels the need for half of the login screen to be taken up by staged photos of smiling customers. Also, if you’re going to make the login screen responsive and switch it automatically from horizontal to vertical layout when the viewport gets too narrow, you should put the fucking login form above the smiling customers, not below them. I guarantee no one wants to have to scroll down past the smiling people to get to the login form.
Moving on, they’ve chosen to implement one those login flows where you have to enter your username on the first screen, then click Next, then enter their password on the second screen. This is poor UX which has no security benefit. If the reason why you’re doing this is because you may need to dispatch to a different login method depending on what username is entered, then you handle that with a dynamic login screen that makes an AJAX call with the username and adjusts its behavior based on the result. Don’t make the user click through two screens to enter their username and password. Just don’t.
Glancing around further, I see that the title for the login screen is “Sign in to Retail.” News flash: banking customers do not call it “retail.” That’s an inside-baseball banking term. Exposing it to customers in the title of the portal login page is dumb and confusing.
OK, so you’ve entered your username and password, and next you’re prompted for how you want them to send your MFA code: email or text message. I chose email. It emailed me the code, I double-clicked on the code, typed Ctrl-C to copy it, clicked on the form field in the browser, typed Ctrl-V to paste it, and clicked the submit button. Instead of being logged in, I was informed that the code I entered was incorrect! Why? Because in the email containing the code, there are tab characters inside the <span> containing the MFA code, so when I double-clicked and copied I ended up with a tab character at the beginning of the copied text. That tab character got pasted into the form field, and their app code isn’t smart enough to strip whitespace from the MFA code before processing it. So there’s three failures here: the email is formatted wrong, the app doesn’t discard extra whitespace (which would be perfectly safe for it to do from a security perspective), and they either didn’t notice this during their testing or didn’t think it was worth fixing.
Once you’re logged into the app, you see an avatar and your name in the upper right corner with a menu icon next to it, just like on many other web sites:
On every other web site, your app settings and profile would be on that menu. Are they on this site? Nope! That would be good UX, and we already know that this site does not have good UX. The only item on that menu is “Log out.” If you want to access your account settings, it’s under “Self Service”, and it’s not even called settings there, it’s called “My Profile”. This is just wrong.
And hey, speaking of “My Profile”? They’ve gone to all this effort to roll out a new web site, and they still don’t support any strong MFA (TOTP, WebAuthn, passkeys, Authy, Duo, whatever). They still only support email and text messages, neither of which is sufficiently secure for protecting people’s money.
I don’t know what Eastern Bank’s motivations were for rolling out this new site. All I can say is that either good UX and security were not a priority, or the people they hired to build this site for them don’t actually have the competencies necessary to achieve either. What a disappointment.
