Case Study: BCA Mobile Redesign
About
BCA Mobile or m-BCA is a mobile banking app from the largest private-owned bank in Indonesia. This app was built to help customers interact with their banking activities. Because of the sheer size of BCA in Indonesia, with a substantial number of customers, which is around 22.5 million users (as of June 2020), this app is automatically installed within their customers’ mobile phones. With so many customers, ranging from young until old, and each one has different needs, BCA Mobile has to be able to fulfill those requirements.
Problems
Since it launched back in 2012, BCA Mobile has mostly remained the same. BCA Mobile has not gotten its most-important update, which is the revamp in its UI and UX design. While many features have been added to enhance the app’s usefulness, but unfortunately, because of the lack of redesign in the UI and UX department, most users are left in confusion. All in all, we think BCA Mobile can’t keep up with the users’ demand, especially in this modern era. In order to fix this problem, we divide our design process into two stages:
Step 1 — Discovery
We use user interviews in order to gain qualitative data and understand users’ goals, needs, frustrations, and motivations.
Step 2 — Design
We design the BCA Mobile’s revamped UI and UX using Figma, Adobe Photoshop, and Adobe Illustrator.
Step 1 — Discovery
User Persona
To validate the issues that our team has stated before, we decided to get insights from real users through user interviews, but since the pandemic has started, we could not be able to get it from other people, and so we decided to get it from our parents, which are also frequent users of BCA Mobile. Additionally, the responses that we got from our parents were also aligned with the problems that we have stated before. Therefore, here is the user persona that we have created.
Sitemap
By interviewing BCA Mobile users, it helps us to identify the pain points that often confusing. Based on that, we tried to reconstruct the sitemap by paying attention to the pain points and tried to remove all the confusion. We decided to remove and merge the previous category grouping (m-Payment and m-Commerce), and also integrate the previously decentralized inbox system into a Notification tab. Here is the new sitemap for BCA Mobile.
User Scenario
By interviewing BCA Mobile users, it helps us to identify the pain points that often confusing. Based on that, we tried to reconstruct the sitemap by paying attention to the pain points and tried to remove all the confusion. We decided to remove and merge the previous category grouping (m-Payment and m-Commerce), and also integrate the previously decentralized inbox system into a Notification tab. Here is the new sitemap for BCA Mobile.
Step 2 — Design
Design System Principle
To maintain the consistency of this design process, we created the design system principle, which includes the typography, color set, and icon set. By doing this, we can make sure that our design will be consistent throughout the whole design process. Here we also include our project file if you are interested to see it!
Final Design
Homepage
The previous homepage design which has a very outdated design is no longer looks appealing nowadays. Furthermore, the waste of screen real estate makes this app looks boring.
With this redesign, we changed the positioning, and the overall color, which changes the overall looks. We also added several sections to the homepage so that there can be more information for the users.
Notification
The decentralization system of the previous inbox does not only cause a lot of headaches to the users but also is very redundant because every category has this menu.
With this redesign, we changed the structure of those, and also integrating them into a single menu, and place it on the homepage. We also put in a filter feature to help users find a specific transaction easily.
M-Transfer
Before the redesign, for users to perform a fund transfer, especially if the account number has not been registered yet, the users are required to go through several screens first. This is very time-consuming and not convenient for the users. The users are also expected to have a balance for sending a premium SMS.
With this redesign, we combine all the pages into a single page, so users can get a more straightforward experience. We also simplified the process by eliminating the requirement to send a premium SMS to add an account number.
M-Payment
In the previous design, BCA Mobile made the distinction of having two separate categories with similar use. This not only causes confusion to the users but also creates redundancy throughout the entire system.
With this redesign, we decided to merge those two categories and make it into a single page. With these changes, we hope that we can help address one of the many problems that users face.
M-Admin
In the previous design, there were two different administration pages that almost have the same feature. Those pages are ‘Akun Saya’, and ‘m-Admin’. As a result, it was quite hard to find a specific setting since the settings were not on the same page.
With this redesign, we chose to integrate those two pages and make them into a single page. With this change, we hope that the users will have a better experience inside this app.
Final Thought
Finally, here is the end of this case study. It sure was a heck of a journey to reach this point. I would like to thank our instructor, Mr. Tobias Warbung, S.Sn., M.Ds., who helped us in this process from the beginning until the end, and to my teammates who have contributed to this project. They are Annetta Carolina, Kenneth Jonathan, and Kent Martin Tanujoyo. They also have their version of this case study. Please visit them if you are interested!
I would also like to acknowledge that this case study is not perfect, and there is still plenty of room for improvement. Hence, we are very interested in your feedback! If you have any feedback, please kindly contact us!
Lastly, thank you for reading this case study until the end! Au revoir!
P.S. You can also read this case study in my website here!
