Today, for the second time, I used Sainsbury’s online banking services to pay back my credit card. Paying back is never a happy experience but Sainsbury’s online banking UX managed to make it even worse. As a product analyst who tirelessly finds new customer insights to improve product UX (and increase conversion of course), I decided not to tolerate the horrendous UX silently, but to review it thoroughly. So, let’s go.
Sign in and Help
Sign in Page is fortunately not too out-dated, if you do not wonder around by clicking “Forgotten your logon details” or “Need help with your login”. Otherwise, it may look like this:
“Index” maybe a useful thing to use if you are searching for a word in Oxford Dictionary but it means nothing to me on this page. I have to click into it to see what exactly means by “Index” on a help page. So let’s click on it:
Okay. It turns out to be an organised list of things people might need help with. Does it mean that if you want to know about what the interest rate is based on, you need to eye-ball this list and to pick up the word “interest” in order to get some help? Unfortunately yes. I have found it out for you below in case you really wonder about that.
If we have forgotten login details, we will click the “Forgotten your login details?” and land on this page:
Now this page gets me worried. I was on Sainsbury’s Bank (as the physical letter from Sainsbury’s Bank instructed), but now I am on a left-aligned page of Sainsbury’s Finance. Does this inconsistency on a online banking services appear fishy to you? I did not actually forget my login details, but for those who really did, I wonder how many of them would see this page and call Sainsbury’s Bank to verify whether this is where they should reclaim their accounts, which might increase the Bank’s contacts rate (and costs).
The “Just ask” link may sound extremely light and helpful, but it (again, sadly) takes you directly to the Help Index page where you need high level of eye-balling power.
Before we move on, let’s benchmark the “Forgotten your log-in details” page on AMEX:
They have made it pretty clear what actions you need to take to retrieve your log-ins and provided a user-friendly mock-up card for you to enter card details. No time wasted. They did not say “AmericanFast” either.
However, I am not sure about you but the left-aligned content still bugs me. So I checked out other online banks like Virgin Money (below), it feels so good to see things centred on a screen and heaven if it is responsive (content layout adjusts with screen-sizes). Maybe it’s just me.
Online Banking
After logging in, the content is well centred, so not too bad. However, as you start to use the different functionalities, it becomes problematic.
First of all, if we have a little brainstorm on the questions: Why do people want to bother registering an online account which takes one week at least and logging in here? What do they want to do here? Who are these people?
I can answer these questions as a customer here: I do not want to set up debit card monthly payment because I enjoy flexibility to pay back any amount at any time. All I want to do is to view transaction details to make sure they are correct and then pay back to my credit card whatever amount I am owing. Also, because I am young and mobile, I may move and I’d like to change my contact details fairly easily here.
I believe (correct me with good reasons if I am wrong) that, like any other online banking services, two most important purposes of this online service is to let people check transactions easily and pay back easily. Credit Card banking services should be less complicated on the front end than normal banking services where people transfer money to others and make fixed-rate savings.
With these two purposes in mind, let’s try to accomplish the goals here.
It took me more than one minute to figure out what button/drop-down to click in order to use the website because eventually you found everything squeezed tightly in a long drop-down list. More eye-balling required.
After reading through the list, I identified three things I want to check out: View Card Summary, View Card Statement, and View Recent Card Transactions (although this one is at the bottom of the list for no good reason).
“View Card Summary” has led me to the most redundant information which is the same as the information displayed on the previous page. Waste of time.
“View Statement” and “View Recent Card Transactions” give expected information, however, they look so similar that I had to select each of them back and forth to make sure that I am looking at the right document. In both View Statement and View Recent Card Transactions, you have this link to “print your recent credit card transactions”. Shouldn’t the link on the View Statement page say “print your statement” instead?
OK enough about the transactions. Let’s pay by selecting “Make Online Payment” and clicking “Go” (otherwise it won’t go)!
A new window pops up immediately titled “Sainsbury’s Finance” which again may cause confusion with risk-averse customers.
This page also assumes people know the difference minimum payment and full payment (or they are good at eye-balling the help page). I rarely select minimum payment because it may accumulate greater debt so I choose “Other amount” and guess what happened:
The pay button disappeared! But if you are clever and you see the scroll gets longer too, you would eventually figure out that somehow everything gets pushed down and the pay button is now at the bottom of the page after a large white empty space. Is this due to incompatibility with Chrome? This is for developers to find out. 8 pt font and delinquent “pay” button are not helping customers to pay back their credit cards.
After finding our precious Pay button, we land on another pay page with a different Sainsbury’s Bank logo (is this an actual A/B test trying to be funny?!). Here we can see at the left bottom that it is integrated with WorldPay 2002 (Ahem, that is 14 years ago), so that might be the culprit?
Anyways, now we see two “Select” options, but they are not together or next to each other. The “Proceed” button is next to “Select Language”. So I selected a language and pressed “Proceed” but nothing happened, not even a warning message telling me what I need to do to make something happen. Then I realise that I might need to select the payment method (at the bottom!) together with the Language in order to proceed. So I clicked Visa Debit, and without clicking Proceed, it automatically Proceeded. Hence, what’s the point of having Proceed? To A/B test users’ patience or to create fancy distraction?
In the next step, the Proceed button is still there, doing nothing, absolutely nothing.
Quite a few points about the usability of this form:
- Every single Help Link e.g. the bubble or Security Code underlined leads to a new tab opening in the original browser window (left aligned content too, as shown below), when you expect it to be just a tool-tip explanation. Travelling back and forth in different windows (especially you already needed a lot of help in the beginning and didn’t close those windows) can be disastrous.
- The form does not check Card Number format while you enter it. The only good thing about this form is that they do not wipe out entered details just because you made a little mistake on Card Number or your Name and finally saves you some time.
- In the age of HTML5, we are still seeing a ridiculous drop-down selector to select Date.
One more confusing point here is - You need to enter your email address.
I have already registered for an online account right? So in that sense, I have entered my email addresses thousands of times for that purpose, because, online account = providing email address and setting password. Later on, after you have successfully paid, you receive an email which is not from Sainsbury’s Bank:
What’s more, Sainsbury’s Bank won’t save any of the debit card details you put in. Annoyingly, you will have to do it all over again next time you want to pay back to your credit card. With so much trouble in mind, any customer who enjoys as much flexibility as I do, would shy away from using Sainsbury’s Bank credit card even it gives you 4 times the Nector points if you use it in Sainsbury’s (so I go to Tesco, it’s funny how these little things can have such a chain effect).
Coming back to the drop-down of services, in this one-click era, I am surprised that Selecting-from-a-drop-down-and-clicking Go still exists. This is not only on Sainsbury’s Bank, but also on Tesco’s online grocery site. I wonder how many people select something from the drop-down and wait for 2 seconds until they realise that they need to click Go to make magic happen.
Overall, it was a quite negative experience using Sainsbury’s Bank online services, shifting back and forth between the contemporary home page and outdated services from the last century with absolutely no brand consistency. Whether it’s a norm for a supermarket credit card? Because they are too busy attending the supermarket businesses to put effort to create smoother user experience for Credit Card users? We do not know but if the Credit Card business is there to stimulate spending in supermarket (and other Sainsbury’s things), it may not work for many people, including me.
