Bangkok Bank Public Company Limited is one of the largest commercial banks in Thailand. Its branch network includes over 1,165 branches as of September 2018, within Thailand, with 32 international branches in 15 economies, including wholly owned subsidiaries in Indonesia, Malaysia, Singapore and China
Bangkok Bank
Overview
Role
As the lead UX designer for UXIC team. I took the initiative to lead the project with the head of design from Bangkok bank and Design manager from Publicis sapient. I worked with the team of user researchers, user interface designers, ux writers, data analysts and product owners
Problem Statement
- How might we design a seamless and intuitive experience for the customers to easily navigate their way through the app?
- How to increase user engagement and educate users about the banking product?
Key issues
- Hard to find previous transaction
- Promotions and Offers are not noticeable
- The quick balance feature is out of reach
- Unable to find some features such as Cardless withdrawals and Scan Payments
User feedbacks
Would like to have something like MY HOME PAGE because transfer, withdraw, scan and quick balance are the most frequent daily use button so they should be more outstanding than this.
Would like to see the account, account balance, transfer button, and scan button easily
Solution
My team and I had identified the key areas that needs to be improved according to the data from the analytics team. Our solution was to:
- A complete revamp of the home page with a dedicated section for Quick balance, Favorites section, Quick banking links, Promotions and offers
- The scan feature has been embedded into the home navigation making it easier for the users to make payment and carry other tasks
- Introduction of a new menu called “more” embedded in the navigation bar where all the banks products and service offerings will be displayed making it easier for users to find their preferred menu
- New user journey, userflows, wireframes, wireflows, and interfaces were designed according the proposed solution
- By conducting several tests to help the team understand the level of knowledge the users had of the features provided by the Bangkok bank and with the help of data collected from the tests, a new sitemap will be created along with the implementation of the new strategy
- Tests such as tree testing were conducted to test the new proposed sitemap, design concepts and the product strategy to ensure it provides a better experience for the users compared to existing product
Setting up the strategy
We implemented a key strategy to transform the user experience by introducing innovative features and enhancing existing functionalities. For instance:
- Revamping and reorganizing the Information architecture of the app making it easier for the users to navigate around the application
- Recognizing the surge in scan payments, we integrated the scan feature into the bottom navigation bar, allowing users to make scan payments effortlessly.
- Introduction to a new section called “More Services,” where all the bank's offerings are categorized into relevant groups. This change simplifies the process for customers, making it easier for them to locate and utilize the services they need.
Research phase
In this process we aim to understand:
- Understand user’s mental modes and how they group features
- Understand the user’s perception regarding the banking terms
- Identify new user behavior during the test
Card sorting test
During this phase, we conducted a card sorting test involving 12 participants who engaged in tasks on a Trello board. Our team had organized all features without any specific order. Participants were assigned 3 tasks. This testing aimed to gather insights into user preferences and perceptions regarding the layout and organization of features. The outcomes of this exercise will guide us in refining the structure and design the new sitemap, ensuring a more intuitive and user-friendly experience based on participant feedback. The tasks included are:
- Explain what a particular feature is and what does it do?
- Group the features provided by the Bangkok bank app that are relatable according to their understanding
- Name each group created during the 2nd task
Information architecture
The results from the card sorting test led to the creation of the new sitemap of the application. The most noticeable changes are:
- 9 out of the 12 participants have named a category “Accounts” and sorted similar cards/feature under this category
- 10 out of the 12 participants have named a category “Investments” and sorted similar cards/feature under this category
- Introducing layers with intuitive menu names to the sitemap
- Grouping features that belong to a similar menu such as every product related to investments will be placed under Investment tab and for feature such as “open investment account” will be placed in both Investment tab and Accounts tab
- Suitable entry points to make it easy for the users to access the features
- More generic and intuitive menu names which makes it easier for the users to understand the features
Sitemap Validation
In order to ensure the new sitemap provided an easy pathway around the app, the team and I organized tree tests to validate the new sitemap along with our assumptions. The results from the test had confirmed that the improved sitemap produced better performance than the previous sitemap. The new sitemap outperformed the previous sitemap by 75% which kick started the wave of improvement within the team. Here are noticeable results:
Concept Design
While the tests were being conducted, the user interface team and I worked designing new concept designs for the “Home” menu and “More services” menu which upon approval from the management will be the new look of the app and put forth for development.
Old version of the app
Home Screen
Banking Screen
Investments screen
Settings screen
New version of the app
Home screen
Banking screen changes to More services
Investments screen
Settings screen
