A General Assembly Project — OCBC

Redesigned UI — OCBC

The Plan

To establish higher visibility of OCBC’s features, which will increase its standing against its competitors. In turn, the time that users on page spent will grow and it will be reducing the bounce rate.

OCBC Background

OCBC is the bank. Formed in 1932 from the merger of three local banks. It is now the second largest financial services group in Southeast Asia. Recognised for its financial strength and stability. OCBC Bank is consistently ranked among the World’s Top 50 Safest Banks by Global Finance and has been named Best Managed Bank in by The Asian Banker.

The plan to achieve our end goal

Heuristic Evaluation

We did a Heuristic Evaluation of the OCBC app, which necessarily is an app audit of the various screens of the OCBC app.

Hidden options behind small arrow

We find the first usability wall we ran into on the OCBC app. All these features you see here on the right are hidden inside a page all grouped by Well, a tiny right arrow.

Although OCBC created a One Touch function that provided practicality, allowing their users to view their account balance and view last ten transactions with nothing else that could help them keep the user in OCBC app. A small “X” at the bottom of the page logs the user out without any error prevention prompt. Repeatedly trying to find a way around this calls for an unhappy user.

  • The limited space used to toggle between the drop-down menu and a previous screen that offers little usability for the user
  • The extensive list of subcategories hidden merely under “More Services.”

Competitive Analysis

Taking into consideration these are mobile apps used on the go, we did a similar screenshot across all our competitors, and OCBC stood out in a less favorable light when taking into consideration from the users’ perspective. For example would be the use of space toggling between drop-down menus and the effortless ability to return to the previous screen.

OCBC comparison to its competitors.

An example of how the landing of the OCBC app pales in comparison to its competitors. If UOB showcased their Dining Rewards, DBS showcased their various promotions on their landing pages, and Standard Chartered given quicks links to fast access, think about how much OCBC is missing out on there landing page.

Jakob Nielsen’s 10 heuristics evaluation.

We started by comparing two other competitors who are the prominent banks, Standard Chartered, DBS and UOB, and evaluated their content and usability with ours using Jakob Nielsen’s ten heuristics evaluation.

And OCBC fared the lowest regarding overall usability.

Content Audit

Current OCBC information architecture

Content Audit helped us mapped out the current information architecture.

User Interviews

We divided it into two methods. We did this to gather data and to find out what users actually wanted.

Method One

Introducing the element of surprise

6 out of 7 users were pleasantly surprised with what they were 
presented in the hidden screen.

“Oh, Forex rates?”
The user begins to tinker with calculations.

“Visit OCBC… Locator! O.M.G. An Easy Queue function??”
An extremely surprised user continues to explore page.

When we observe, we realized that users would not be intimidated by the additional features they see, but find them more useful than inconvenient.

Method Two

We constructed some questions for how people use banking
apps in general with their respective banks.


By extracting notes from the setout question rolled out, we began to map them out by the obvious categories. We slowly organized them into groupings and that eventually formed a storyline.

Crafting Personas with the synthesized result

Andera, our primary persona. Hardworking young adult.
Ben, our secondary persona, who is the father of one son.
And Charles, the taxi driver who is looking to retire soon.

Customer Journey Map

We mapped out how these three personas go about their day and their with using the OCBC app.

Feature Analysis — Prioritization

Using 2 by 2 matrix then we laid out features according to the prioritization.

Revised Information Architecture

Focused areas are 
Landing Page : Moved previously hidden elements onto the landing page, creating higher visibility of OCBC’s features.

OCBC OneTouch : OCBC’s OneTouch function that used only to allow the limited functionality of account summary now allows accessing the everything on the app.
Transfer Funds : Until users reach a step that requires further security will an OTP prompt be highlighted to the user.

and a Personalized page for the user.


With some quick sketching, we manage to drafted some basic low-fidelity wireframing.

User Flow Wireframing for main persona

Source link


Please enter your comment!
Please enter your name here