Usability Review on OCBC Online Banking

User Joe
7 min readOct 18, 2017

--

UX has always been a topic I’m passionate about throughout my career life. From developer, to project manager, and today as a product owner, my tasks have always been resolving around how do I design an interaction or functionality better so that it brings values and joys to the end users.

As part of my personal practice, I did a usability review as layman Joe on my favourite banking website, OCBC Singapore. It was a quick exercise on tasks that I used most frequently. Putting on product owner’s hat, the feedback are sorted based on priorities, where the most critical ones are top of the list (product backlog).

The testing was performed using latest Chrome on macOS High Sierra.

1. PayNow — Disclosure of Customer Name

Transfer Funds to PayNow User

PayNow is a new function that allows me to transfer money to a friend using mobile number or NRIC (personal identification). It provides great convenience to me as I do not need and add bank account details of the recipient, which requires 2FA via the token (a very painful process).

Enter mobile number to search

However, the insecurity comes when I realised I could randomly enter any mobile number. If the number is a registered PayNow user, the recipient name will be displayed. This means that anyone could look up a person’s name with mobile number or NRIC! I won’t feel comfortable knowing someone could potentially get hold of my name, mobile number and know that I am an OCBC customer.

Suggestion

In the PayNow configuration page, notify users that the name they chose will be seen by anyone who has their mobile or NRIC. Instead of real name, encourage users to use nickname that their friends can identify them.

Little footnote to warn/inform user who can see this name would be nice

2. Several Mouse Click Dead Zones

The Inbox menus and all the drop-down fields have mouse click dead zones. i.e. You can hover your mouse cursor to certain parts of the hotspot to see the rollover state (cursor changes to hand; hovered field changes colour), but does not respond upon clicking it. This is very frustrating as I have to try repeatedly before I realise the behaviour.

Inbox history — blue boxes indicating mouse click dead zones
1/3 of the Dropdown field area is not clickable

3. ATM and Branch Locator

The ATM and Branch Locator is a handy tool when you really need them. However, the current design has much room for improvement.

3a, 3b

3a. The search field and button are not sitting on the same line (could be my browser version).

3b. This caused the content to be taller then the space, cropping the legend.

3c

3c. The label “Next” hinted there are few steps to be expected for this task, but it’s not true. It would be better to simply label the button as “Search”.

3d

3d. The search result is not very forgiving. I tried both broad (Ang Mo Kio) and specific (Ang Mo Kio Ave 3) keyword search, but both return no results. Suggest to ‘request’ location from user and show the nearest ATM and branch, like how Google map works.

3e

3e. I’m able to find some results using “bedok”. However, it is not clear which marker is ATM and which is the branch at one look. I have to work extra hard to click on it to find out what it means.

3f

3f. There are too many icons that are not relevant to my search. They are useful landmark at times, but not to the extent of adding confusion to my search. Suggest to use a dull color scheme for all non-OCBC markers to make OCBC’s marker more contrasting(check out Snazzy Maps for stylish theme).

4. Advertisement Banners

In the dashboard page, I don’t usually enable the banners as that is not what I would be interested in after I login. I login with the intention to get my task done as quickly as possible.

Suggestion

Login and Logout pages are probably better places to display ads. If the ads are targetted based on user profile, Logout page can still achieve the objective.

There seems to be no style guide for the banners as I could see the headers in different font type, case, and even color. Same goes for the call to action hyper link. The low resolution also makes the advertisement less attractive.

5. Disconnecting Instruction

Not sure if it’s because I do not have enough transactions, I could not see the “See More” link anywhere in the page.

The same goes for the Credit Card account detail.

6. Other Findings

6a

6a. Poor display of structured information. Would prefer it to be in table format so that user takes lesser effort to find the key information they need.

6b

6b. The icons are not very intuitive. They seem to be hint that I could move the blocks upwards rather than expanding or collapsing.

6c

6c. I’m required to mouse over to decide on 3 tasks related to my 360 account. Would have preferred to remove the mouse over navigation and just bring me to my Details/Transactions upon click, which I assume is the most commonly used task. Secondary tasks such as e-Statements and changing of account name should be located inside the account. We don’t change our account name frequently enough to warrant the same priority spot as the transactions page.

6d

6d. In the Rewards Balance page, I couldn’t tell if I meet the minimum number of points to be eligible for any redemption. I could only find out this after I click on the Redemption button (which by the way was blocked by my browser’s pop-up blocker). Would be helpful even if it’s just a liner to inform user the minimum points for redemption to save them a click.

6e

6e. In the Pay Bill page, the “Pay From” dropdown requires me to select it every single time. Would prefer if it can remember my last account used for payment and pre-select by default, to save me a click (Sorry for being that lazy, but on the positive note, I used it a lot).

6f

6f. Not sure if the missing shadow bothers you, but it bothers me and I am not even OCD.

6g

6g. White text against light grey background is bad for reading.

6h

6h. There seems to be some styling issue in the Manage e-Alerts accordion. The top part is cropped and the very bottom part can see unfilled background in white.

6i

6i. Clicking on the Print button generates a not-so-sexy page. Since the print feature is provided, this raises my expectation to see a nicely formatted page instead of this.

6j

6j. PDF Download generates a plain vanilla page without any branding.

Final words

Don’t get me wrong, I’m still a loyal customer (and mini-shareholder) and I still think OCBC has a lot to offer. I believe in striving for continuous improvement to make user experience a better one each time they come back.

Looking forward to see if the customer’s voice is heard. :)

--

--