Case Study: Redesign BNI Mobile Banking App
Disclaimer : This is a personal final project at Dibimbing.id. Here I share the process from start to finish in completing this project.
Introduction
Hello, my name is Bintang. Currently, I’m studying UI/UX Design at Dibimbing.id. While studying UI/UX Design, I learned many things such as Design Thinking, Wireframing, Making Mockups, Design System, Prototyping, Usability Testing and many more. In my final project, I would like to discuss a case study redesign the BNI Mobile Banking application.
Overview
In the current pandemic situation, banking activities through mobile banking services can be a solution for many people to carry out financial activities, without the need for excessive social activities. BNI Mobile Banking is a banking service facility that makes it easy for you to transact directly via your smartphone, safely, easily, and quickly.
Problem Statement
This new BNI Mobile Banking application updates the application, version 5.0 on June 30, 2021. I am very happy because many features have been added, so that it can make it easier for me to transact. But I feel the appearance of this application needs to be improved, to make it more comfortable and easy to use. Then I researched and read the BNI Mobile Banking Application feedback review on the App Store, to find out what users think about this application. I found some unfavorable reviews and comments. Users criticize the updated application, it looks unfriendly, messy, and the application still often crashes. Therefore, I chose this application as a case study for the final UI/UX design project. This final project aims to identify user problems, improve the interface of the application and provide a better user experience.
Role: UI/UX Designer
Scope: User Research, Analyzing, User Flow, Information Architecture, Wireframing, Mock-up, Design System, Prototyping, and Usability Testing.
Timeline: 4 weeks
Tools: Figma, Miro
The Process
In the process of this final project, I apply the Design Thinking method (Empathize, Define, Ideate, Prototype, and Test).
Step 1. Empathize
At this stage, I empathize with users to understand and know the user’s problems, so that I can find solutions to help them achieve their goals.
Feedback Observation
In this step, I observe the feedback review from the BNI Mobile Banking Application to find user problems. Here are some feedbacks in the app store:
Research Plan
Background
Some users criticized the BNI Mobile Banking application which was just updated on June 30, 2021, because the display was not user friendly and messy. Therefore, I want to understand in depth the user’s opinion, the problems faced by the user and understand the user’s expectations of the BNI Mobile Banking application.
Objective
Explore the use of the BNI mobile banking application
Methodology
Qualitative (In-Depth Interview)
Sample Specification
- 5 Users of the BNI Mobile Banking Application (use the app at least once in the past month)
- National Scale (Nationwide)
- Female/male
- Age 18–40 year
Key Information Area
Discussion Guide
Conducting the Research
At this stage, I deeply understand user behavior, user opinions, problems encountered, and user expectations in using the BNI Mobile Banking application. In this pandemic situation, the research process is carried out online using zoom, on 8–14 August 2021.
Step 2. Define
Affinity diagram
After conducting the interview, the insights obtained from these results are represented using Affinity diagrams. Affinity diagrams are used to collect and group ideas, opinions, problems, and solutions.
To make it easier to find out the pain points experienced by users when using the BNI mobile banking application, these problems are grouped in the following affinity diagram below:
User Persona
User Persona is a fictional character that represents the target user, which is collected from real user interviews. It aims to conduct research in making products that are comfortable and become solutions to problems faced by users.
User Journey Map
User Journey Map is an important design tool for understanding the product from the user’s perspective. The user journey map describes the visualization of the steps taken by the user to reach the goal.
Competitive Analysis
Competitive Analysis is a research method by comparing applications with competitor applications. Competitive Analysis is carried out to find out the weaknesses of an application and present differences that can give more value to the application creatively.
Problems
After the interview to five users and conducting analysis using affinity diagrams, user personas, user journey maps, and competitive analysis, found several problems faced by users when using Mobile Banking application BNI :
1. Interface of applications
“Sudah bagus banyak fitur yang ditambahkan, namun tampilannya kurang banget..”
The new mobile banking application updates the application, users are very happy that many features have been added. However, users hope that the display is made more modern, and user friendly for all types of users.
2. There is no notification if there is an incoming transaction
“Gak ada notifikasi dari aplikasi, kalau ada yang transfer”
The user is annoyed that he has to log in repeatedly, to check the incoming transaction. The user expects a notification from the application, if there is an incoming transaction. So the user does not need to login to check incoming transactions.
3. Difficult to view transaction history
“Ribet lihat riwayat transaksi, karena harus filter dulu. Ada periode, terus jangka waktu. Setelah isi periode, harus isi jangka waktu juga? bingung aku. Maunya dibuat simple aja..”
Users find it difficult to see transaction activity, because they have to filter first. Users want the appearance to be made simple, so that it is faster and easier when viewing transaction activity.
4. Can’t find transaction receipt download feature
“download bukti tf sebelumnya dimana sih? dicariin gak ada”
The user doesn’t know where to download the previous transaction receipt. The user thinks that the previous transaction download feature doesn’t exist. From this problem, I will change the transaction receipt download feature, so that users can access it more easily.
5. Unable to find the forgot transaction password feature
“Saya pernah lupa password transaksi, kemudian saya mencari fitur lupa password transaksi. Di pengaturan ada fitur “Ubah/Lupa Password Transaksi”, tapi harus input password transaksi lama, sedangkan saya lupa password.”
Users have difficulty when they forget the transaction password. In the “settings” menu there is a “Change/Forgot Transaction Password” feature, but on this page it is only specifically for changing transaction passwords, so user have to enter old password.
Step 3. Ideate
User Flow
User Flow is used to describe user steps to complete tasks in using the product. The following are Transaction/Transfer User Flows, Download Receipt Transaction, and Forgot Transaction Passwords:
Information Architecture
Information Architecture is a method used to manage all flows, content, and design requirements in an application.
Wireframe
Wireframe is the basic framework before making a mockup, which serves as an overview of the design being worked on. Here is the wireframe for the redesign of the BNI mobile banking application:
Mockup
After creating the wireframe, I made a mockup. A mockup is a deeper concept for conveying various aspects of visual design, such as images, colors, and typography. The following is a mockup design to redesign several pages on the BNI mobile banking application:
- Based on the results of interviews, users want notifications from the application if there is an incoming transaction, so users don’t need to log in to check. Following are the results of the design:
- Based on the results of the interview, the user has difficulty and confusion when accessing the history page.
- Based on the results of the interview, the user doesn’t know the location of the “download receipt transaction” feature.
- Based on the results of the interview, the user couldn’t find a page to reset the transaction password, if the user forgot the password.
Design System
Design System is a collection of design components that can be used repeatedly, resulting in a consistent design and simplifying work.
Step 4. Prototype
I created a prototype using Figma. This prototype includes user journeys in transactions, viewing transaction history, downloading transaction receipts, activating/deactivating notifications, and forgetting transaction passwords. Please click the link below to try the prototype:
Step 5.
Usability Test
Usability Testing is the last stage in the process of working on this case study. This stage serves to determine whether the design made is in accordance with user expectations. The Usability Testing process is carried out online using the Zoom application, with the same respondent criteria during the In-Depth Interview process.
Task Given
I ask users to perform tasks by giving them scenarios, such as:
Task 1: View transaction history
Scenario 1: “Imagine that you have just received a money transfer, how do you view information, such as sender name, amount, transaction date and time. ”
Result 1: In this task, all users managed to view the transaction history. To view detailed information, the user selects the transaction “Diterima”. Users are very happy because there is a color difference between “Diterima” and “Terkirim” transactions, so users can easily distinguish. On the display is clear, there is a name, date, time, nominal, and description. Users are also happy because there is a filter feature to view by category.
Task 2: Download Receipt of Transaction
Scenario 2: “Imagine that you just sent money, then you forget to download the receipt of transaction. What did you do to download the receipt of the transaction?”
Result 2: In this task, all users have successfully downloaded the transaction receipt. The user sees the history of sent transactions, then clicks the “unduh” button.
Task 3: Find Forgot Transaction Password feature
Scenario 3: “Imagine you want to send money, but you forget your transaction password. What did you do so you could reset your password, so you could send money?”
Result 3: In this task, all users managed to find the “forgot transaction password” feature which is located in the settings on the profile. Users are happy because the flow is very clear.
Task 4: Turn on notifications for incoming transactions
Scenario 4: “You want every incoming transaction to be notified by the application, so you don’t have to log into the application to check. What are you doing?”
Result 4: In this task, some users are confused. The user asks “Does this Push Notification apply to all notifications such as announcements and promotions, or only for incoming transactions?”
Users also think that the size of the toggle button is too small, making it difficult to click.
Therefore, I redesigned the “Push Notifications” feature, with the aim that users can choose to activate or deactivate notifications for transactions, promos, and announcements. Then I also increase the size of the toggle button so that the user is easy when pressing the button.
Design Recommendation :
Conclusion
After doing Usability Testing, the user gave a positive response. Users think that the appearance of the application is simpler and the flow is also clear, making it very easy to access the application. Some user opinions on the results of the redesign of the BNI mobile banking application:
“Bagus nih desain yang sekarang, lebih simple dan menunya gak berantakan dilihatnya.. kerenn!”
“Wah bagus! Pengennya desain aplikasinya gini aja hehe :)”
“Suka sama tampilan aplikasinya, lihat riwayat transaksi juga lebih simple 👍”
“Nah ginikan aku gampang lihat bukti transaksi, gak bingung lagi deh, good Job!”
“Tampilannya bagus dan lebih modern, fontnya juga jelas, desainnya enak dilihat :D”
Closing
From the beginning to the end of this study case, I learned to be more empathetic towards users. Understanding user needs in making a design, so that it can assist users in overcoming the problems they face, and knowing user expectations for the BNI mobile banking application.
“Empathy is at the heart of design. Without the understanding of what others see, feel, and experience, design is a pointless task.”
–Tim Brown, IDEO
I have learned a lot of new knowledge in completing this project. The process of working on this final project will be a lesson for me in the future. Feel free to comments, I am very open to receiving feedback and suggestions. Thank you for your time and attention to read :)
