Chin Li Zhi

UX/UI designer

RHB Mobile Banking

Personalised Banking for the Digital Age

Project background

Being an early adopter of digital banking, RHB understood the advantages that digital transformation can bring to the banking and finance industry. Seeking to spearhead the next generation of banking both in Malaysia and the region, RHB's goal was to make banking personal again.

By doing away with the old understanding of banks as financial institutions and currency centers, and replacing it with one that plays a positive role in the daily lives of customers, RHB hopes to radically transform its brand position and value proposition; ensuring their relevance in a future soon to be disrupted by emerging technologies.

In Phase 1 of the digital transformation, RHB contracted us to build a scalable mobile platform on which to fully digitise all their banking services and offerings.

My role in the project

I was the Visual Design Lead for the project, working with 2 visual designers, 2 interaction designers and 1 copywriter. I participated and oversaw the UX research phase, where we conducted ideation workshops, user interviews and ethnographic studies to understand business and user needs and wants.

Liaising with the client's Marketing and Communications department, we developed a Design Language System that expanded on the foundation laid by the existing brand identity in order to support omni-channel brand governance.

We also spearheaded the motion and micro-interaction design for the entire mobile application, ensuring functionality, scalability and consistency across modules to control and elevate the user experience beyond the basics of design and tone of voice.

My role breakdown are as follows:

10%

UX research

10%

Interaction design

50%

Visual design

30%

UX writing

DISCOVERY PHASE

Industry benchmarking

To understand the market that RHB is in, and the competitors within it - we first conducted an industry benchmark on features, design styles and channels.

Looking at immediate competitors in the Banking and Finance sector, as well as smaller competitors in the Fintech industry, gave us a good idea of what's available to customers now, and how we can do things better.

Stakeholder interviews

We talked to employees of RHB ranging from C-suite personnel to the Customer Service Officers - to get an understanding of how RHB employees see their own company in terms of brand identity and market position.

The stakeholder interview was also instrumental in understanding the pain points that RHB employees face both in using the current systems in place, as well as ideas on how things could be improved.

User interviews

We went out to 3 different states in Malaysia - Johor, Penang and Kuala Lumpur - to interview customers of RHB. The goal was to understand how each individual customer saw RHB as a brand, used their products and ultimately - their expectations of a mobile banking application.

Personas

After consolidating and analysing the research data gathered, we came up with 4 personas that best describe the demographics of RHB's target market - from the fresh graduate to the wealthy retiree.

These personas allowed both us and the client to constantly be reminded of the people that we are designing the product for, their needs and wants, as well as pain points.

Ideation workshop

We conducted an ideation workshop with the client, inviting stakeholders across the board to contribute and pitch ideas, rank them and eventually - select the best of them for inclusion into the product.

This ensured that the client's voice was heard, and that stakeholders had a personal stake and say in how the product would be developed - allowing for a balance between user needs and business wants.

Customer Journey Map

Leveraging on our research on customers' needs, wants and expectations, as well as market trends, competitor analysis and emerging technologies - the Customer Journey Map represents the current to future-state blueprint that will be used to guide the lifecycle of the product development.

DESIGN PHASE

Based on client requirements, the mobile application had to work on both iOS and Android platforms. This meant that while the basic design could be consistent across both platforms, micro-intractions and hardware-level capabilities such as NFC, TouchID, FaceID and other native integrations were different; hence the design language had to be flexible enough to cater to the minute differences between each operating system while retaining a sense of consistency in user experience.

Conceptualisation

Based on research of industry design trends and competitor applications, we came up with 3 concepts - each with their own strengths and capabilities.

The 3 concepts were:

Functional and conservative
Functional and utilitarian in design, customers can be assured of practical and reliable no-frills feature-sets. This design excels in ensuring familiarity to older customers.
Sophisticated and modern
Minimalist and clean in design, customers can look forward to banking needs fulfilled in beautiful layouts, typography and photos - making the experience akin to one of browsing a lifestyle magazine. This design caters to the younger demographics with a more refined taste.
Personal and free
This design excels in having no design, only a focus on being flexible and content-first. A grid system allows for infinite ways of arranging content - allowing users to personalise and tailor their experience based on their individual needs.

Prototyping

Based on the client's choice of concept (personal and free), we created a prototype in InVision for user testing. The prototype also allowed us to test navigation and usability internally, as well as quickly coming up with a basic design language to govern how components and layouts should look and flow in different screens.

User testing

We carried out user testing using the prototype to hear users' feedback on the usability, navigation and features that they expected from a mobile banking application.

We were also able to get opinions and perspectives on design themes (based on the applications that users most used and like) and perspectives of RHB as a brand - which was crucial in designing an application that users liked using and would return.

Iterating

Based on the data collected during user testing, as well as client feedback, we made a total of 3 main design iterations - bringing the design concept from one that allowed users to completely personalise their dashboard based on individual needs, to one that was relatively fixed but was intelligent enough to display the most-used features based on user interactions.

There were more than 7 iterative improvements in between these main iterations, but they primarily dealt with colour changes, icon style, content display and layout expectations.

User testing

The second user testing was carried out to validate the design improvements and any other design decisions that were undecided. It also allowed us to conduct A, B testing on elements such as icon interpretation, UX writing, and colour palette.

Final design

The final design was the result of months of iterations and user testing, coming up with a design language that both worked with the existing corporate identity of RHB, while allowing for expansion into digital channels.

The design revolved around the concepts of flexibility, clarity, and friendliness - key messages that RHB wanted to bring across to its customers. These were achieve through the use of a light and bright colour palette, card-based responsive layout, and a friendly, casual tone-of-voice.