Modernizing Public Bank's in-app experiences with customers
This is a self-initiated case study as a means to practice my UI/UX design and problem solving skills. It’s not affiliated with or endorsed by Public Bank Berhad. The project was initiated on 14th Nov 2023.
Team
Amanda Chong
Role
User Research
Hi-Fidelity Design
Visual Design
User Testing
Year
Nov 2023 - Feb 2024
Tools
Figma
Adobe Illustrator
UXTweak
![designs-01.jpg](https://static.wixstatic.com/media/0a5a5a_94de286956e24c7ea30a016ddfa47457~mv2.jpg/v1/fill/w_892,h_474,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_94de286956e24c7ea30a016ddfa47457~mv2.jpg)
Overview
Public Bank is a household name in Malaysia and it is the largest bank in the country by shareholders' funds. It provides a range of commercial and consumer banking, investment banking, Islamic banking, trustee, stock-broking, and nominee services.
Why The Redesign?
Outdated Interface & confusing navigation
As a fellow customer of the bank for 10+ years, I discovered the app has major opportunities to implement.
-
Outdated interface design
-
Clickable buttons are unclear
-
Content navigation lacks clarity and personalisation and is not user friendly.
-
The texts are too small to read (especially for the elderly)
-
Extra step to type in a certain amount before receiving funds via DuitNow QR.
The Solution
User-friendly & engaging experiences are key
1
Clean interface design
and visual hierarchy
-
Easy usability and navigation
-
Build trust, authority and strong brand image
![11.png](https://static.wixstatic.com/media/0a5a5a_c27e36556bd34448a85800d9f5ea956e~mv2.png/v1/fill/w_179,h_365,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_c27e36556bd34448a85800d9f5ea956e~mv2.png)
![7.png](https://static.wixstatic.com/media/0a5a5a_4f4c4c4574d546c5bde79b2f72038401~mv2.png/v1/fill/w_179,h_365,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_4f4c4c4574d546c5bde79b2f72038401~mv2.png)
Have a personalized curated home page
-
Easily navigate to preferred functions at a glance
-
Show customers what they want to see
2
Able to manage goals
-
Track and manage account transactions and spendings
-
Instant access to categorized expenses summary
3
![15.png](https://static.wixstatic.com/media/0a5a5a_c40d891f29a4472399277cd780c9243d~mv2.png/v1/fill/w_176,h_358,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_c40d891f29a4472399277cd780c9243d~mv2.png)
![14.png](https://static.wixstatic.com/media/0a5a5a_89993f17c7c44a998657c3012b4c32fb~mv2.png/v1/fill/w_179,h_365,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_89993f17c7c44a998657c3012b4c32fb~mv2.png)
White Paper Research
Demanding more online personalized banking app services are on the rise
In this white paper research, I read some articles that are related to Malaysia and Singapore’s mobile banking research. I stumbled upon 2 eye-opening statistics from The Straits Times and The Economic Times India:
"…nearly three-quarters of respondents in the region ranked “ease of use” as their top priority for digital banking. The same report found that consumers expect more than just convenience – almost half also want more personalized services." - The Straits Times
"Asked to identify areas where banks should focus to deliver a better online experience, Malaysia respondents selected mobile apps (61%), easy and clear navigation (60%) and money transfers (60%)." - The Economic Times India
Competitive Analysis
They all provide a clear, simple and personalized online experience for their users
For the purpose of the research and keeping the above statistics in mind, I analysed 2 other banking apps surrounding the aspect of online banking and transaction. I’ve found out that they all have a personalized dashboard in the app home page with easy, clear navigation throughout the journey.
![image.png](https://static.wixstatic.com/media/0a5a5a_ea645a9364ff4badb38655be5e2a503a~mv2.png/v1/fill/w_146,h_146,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_ea645a9364ff4badb38655be5e2a503a~mv2.png)
MAE (Maybank2U)
-
E-Wallet and banking account in one app
-
Clear visual hierarchy
-
Many options for users to engage with app
![image.png](https://static.wixstatic.com/media/0a5a5a_9e2f388707c247fdb84a430977b2ecdb~mv2.png/v1/fill/w_146,h_146,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_9e2f388707c247fdb84a430977b2ecdb~mv2.png)
UOB TMRW
-
Clean, less busy interface
-
Clear visual hierarchy
-
User can open bank account via app
You can view the competitive audit here.
Secondary Research
Customers were more likely to feel less frustrated when there was good design and personalized functionality
I conducted observational research in Play Store reviews to validate my assumptions on what kind of experiences Public Bank’s customers face while using the banking app.
Assumptions
-
Outdated and unfriendly UI makes users uninterested
-
Introduce other basic functions are beneficial in improving user engagement
Findings
-
Customers found it frustrating when they think that the app has outdated interface design among all banking apps and it’s one of many reasons they even consider switching to other banking apps.
-
Customers hope to have more control over their accounts by having the ability to manage transaction limits, removing unused favored accounts and reviewing account expenses.
Primary Research
Lack of good design, basic functionality and clear navigation are what the users mostly dissatisfied of
I conducted quantitative and qualitative research on people who use the banking app frequently to extract some useful insights on the experiences they have while interacting with it.
Research Questions
-
How many years have you been using the Pbe banking app?
-
What is your experience with the Pbe banking app? Why?
-
How do you feel when you're using the Pbe banking app?
-
What do you think of the overall design of the Pbe banking app? Why?
-
What are some challenges that you have while using the app? Please explain.
-
Any tips that you think would improve the quality of the app?
Functionality
![image.png](https://static.wixstatic.com/media/0a5a5a_ecc51f946e76472db488fd2d88b88d0e~mv2.png/v1/fill/w_320,h_209,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_ecc51f946e76472db488fd2d88b88d0e~mv2.png)
Interface design
![image.png](https://static.wixstatic.com/media/0a5a5a_2483f537fcd541c0b8129c1c2228ce27~mv2.png/v1/fill/w_320,h_320,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_2483f537fcd541c0b8129c1c2228ce27~mv2.png)
Main Insights
Most participants are dissatisfied with the outdated design, limited functionality and slow login/transaction process.
Based on the trends on my affinity map above, I’ve noticed there are recurring themes associated with what, how and why the participants felt mostly dissatisfied with the banking app
Theme 1:
Visual contentment
Participants felt the visual element of the
app lacks proper design and looks outdated.
They compared the design to other banks. (e.g. MAE, HLB etc)
Theme 2:
Functionality
Participants thought the app is only good for savings, that's it.
They were dissatisfied when they aren’t able to perform basic tasks (e.g manage transaction limit) . They need to transition to the bank’s official website to do so.
Testing & Improvements
1 key improvement in the design
Based on the feedback from my participants, I continued to iterate my design over the span of 2 days with 1 key improvement:
![Gif-no loading.gif](https://static.wixstatic.com/media/0a5a5a_67e71c8ff7ef4e72be30a8dc13381766~mv2.gif/v1/fill/w_190,h_369,al_c,usm_0.66_1.00_0.01,pstr/Gif-no%20loading_gif.gif)
![Gif-loading.gif](https://static.wixstatic.com/media/0a5a5a_048c6cf47b484f44a7d5414a9b52ddd6~mv2.gif/v1/fill/w_201,h_399,al_c,usm_0.66_1.00_0.01,pstr/Gif-loading_gif.gif)
Adding loading screens
-
Users would know any banking process performed is in on its way to the next/final stage.
-
Visual feedback to increase the quality of experience of the users.
The Final Screens
The final product
![1.png](https://static.wixstatic.com/media/0a5a5a_41184ef9d10b4b069ce12ebcc94b767a~mv2.png/v1/fill/w_211,h_429,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/1.png)
![7.png](https://static.wixstatic.com/media/0a5a5a_da4281d30e7c462b94e68cc40c7dfd1d~mv2.png/v1/fill/w_211,h_429,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/7.png)
![11.png](https://static.wixstatic.com/media/0a5a5a_187fc124afae4ba3a933b41c67a2cb5d~mv2.png/v1/fill/w_211,h_429,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/11.png)
![12-5.png](https://static.wixstatic.com/media/0a5a5a_e414d78e4eec4c76a0d5cd3485f918bf~mv2.png/v1/fill/w_211,h_429,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/12-5.png)
![15.png](https://static.wixstatic.com/media/0a5a5a_fc64c2ea3ee54edba71caaa955c09938~mv2.png/v1/fill/w_211,h_429,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/15.png)
![52.png](https://static.wixstatic.com/media/0a5a5a_268e56d915df477cb6cacc25903df9a0~mv2.png/v1/fill/w_211,h_429,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/52.png)
![51.png](https://static.wixstatic.com/media/0a5a5a_acbe423bbc294526a37eb7c147ee2890~mv2.png/v1/fill/w_211,h_429,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/51.png)
![41.png](https://static.wixstatic.com/media/0a5a5a_dfb70767196848d699b861d18609bdb7~mv2.png/v1/fill/w_211,h_429,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/41.png)
Style Guide
Product Design Style Guide
![Style guide 1.png](https://static.wixstatic.com/media/0a5a5a_a2059602b8e64808ad8d9b56c2b11408~mv2.png/v1/fill/w_944,h_854,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Style%20guide%201.png)
![Style guide 2.png](https://static.wixstatic.com/media/0a5a5a_b1b1f25eae9240d685df911fa47f69e7~mv2.png/v1/fill/w_926,h_838,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Style%20guide%202.png)
Conclusion & Lessons Learned
What did I learn from this project?
This project is my first UIUX case study and the experience I had is extremely invaluable! Here are some of the reflections and lessons learned during the process.
1. Functionality and design goes hand-in-hand. I got the opportunity to learn and implement UX concepts while working on the interface designs. What matters most is how to design experiences that'd make users achieve their goals effectively.
2. Not to let personal biases to affect my user research. It's very important to actively keep a clear mind while conducting research since I tend to develop confirmation biases toward a subject.
3. The design consistency. Consistency in visual hierarchy, buttons, margins and paddings, components, font usage etc are inevitable in developing a viable product.
4. Set up deadlines! Setting deadlines for each milestones to be achieved clearly helped me to achieve mini project goals one-by-one without feeling overwhelmed.
Thank you so much🩵
Let's get in touch via⬇️