INB BackOffice is a management platform the for OCBC Bank’s user group which allow accessibility to the functionality of the application across regions. The company saw a need to revamp the platform to make thousands of users across countries lives easier.
My role as the Lead UI UX Designer for this project encompassed conceptualising and implementing a user-friendly design, conducting usability testing and incorporating user feedback to enhance the user experience.
The challenge
The challenge was to modernise and revamp the OCBC’s Internet Banking Back Office (INB BO) platform to make it modern and competitive looking while adhering to the latest OCBC design guideline and improve user friendliness.
The problem
The interface design was since the beginning and had never undergo any sort of design iterations before this. Hence it does not encourage users to spend more time interacting with it. INB BO was in its basic form at that moment. The goal is to elevate its interface design and user experience to achieve the top of the pyramid.
The solution
Discover & Design
User Survey
We conduct survey across users who have use the Internet Back Office, and asked about their interactions with the platform.
Identify Pain Points
After collecting the survey we identify the pain points users have in common, their needs and wants and what is their expectations towards future design of the platform.
Design Sprints
After identify the users needs and wants and pain points, we break them into smaller tasks. Tasks were then clock into design sprints. In each weekly sprints includes either wire frame, screen designs or prototypes.
Validating Design
After design the screen, we have an interactive ui prototype that we can demonstrate to the users how the new feature will look. We then review it with the users and bosses to validate the design, follow by iterations until it goes to production.
The outcome
We have modernise and introduce a few addon functionality to further improve the INB BO. We aim to reduce visual pressure by making the ui look clean and neat. We have also made improvement on functionality based on user feedback such as the use of form format instead of table format, use of expandable menu, breadcrumbs and more.
Design System
We also create a design guideline for this INB BO modernisation project. We use the latest design system for OCBC Bank as of year 2024.
Breadcrumb was introduce to improve user experience by allowing them to navigate back to pages, also clearly tell the user the source and their site track . Instead of having just a back button or clicking on back button multiple times, they can utilise the breadcrumb to navigate to respective pages.
Expandable Menu: The new menu were introduced to enhance user experience. Now it is able to shrink and expand so the user can have larger working space, more comfortable visual experience. The menu interface is also redesign so now it is more organised when expand and collapse between each menu category.
The table interface is also redesign to form format so it allows more flexibility to incorporate different types component such as of dropdown options, text box etc. Users prefer minimalistic interface instead of the previous table design which have unnecessary space occupied. The new design organise component systematically to improve user experience.
System Usability Scale (SUS)
We have conducted a System Usability Scale (SUS) score to measure the effectiveness of our design. SUS was intended to measure perceived ease-of-use it also provides a global measure of system satisfaction and scales of usability and learnability. Items 4 and 10 provide the learnability dimension and the other 8 items provide the usability dimension.
As a result, we receive a total score of 78.3 (grade B | 86-80.3 | Good) out of 100 for the new design.
We have improve INB BO ui ux design in the following:
- Reduce the time spend on performing tasks
- Improvement in user interface (Modernisation)
- Easier for user to find the things they want
- Improvement in viewing task full page
- Introduce new feature enhance the system
- Introduce design system