FAB Bank
Mobile banking
First Abu Dhabi bank, is one of the biggest banks in the middle east. From the mobile banking you can manage your accounts and credit cards without going to a bank branch.
Challenge & goals
How can we improve the app’s customer experience to become a full digital bank in order to reduce the calls to customer service and the visits to the bank physical branches?
The goal is to improve the app from where the customers can manage their accounts and also apply, cancel and personalize all their products without having to call or go the branch. In order to create a smooth experience, we need to enhance the current app creating a design library, this way we can short the delivery times and fix the inconsistencies in the app.
My role
I was involved in this project from the beginning as a part of the product design team, working closely with the business team, product owner, stakeholders and developers. I took ownership of the new features to introduce from the start to the implementation of the live mobile app. I collaborated to make the app experience more intuitive and easy for the users to interact with daily tasks.
Research
The first step to solve the problem, is to do research to see where we are going to aim the app. Every optimization starts with competitor research. We looked for successfull digital banks cases like N26, Revolut, Liv and Monzo, in order to see what is out there and how can we include the digital experience seamlessly to the existing FAB app. We did the research to bring a solution to current needs and also to build a future proof mobile app.
High level flow
The second step is creating the high level flow. When a new feature needs to be introduced, I worked in collaboration with the bank teams to understand the flaws of the current journeys. We gather in several meetings, to lay out the potential journeys and all its steps. The most important part of this step is to align with everyone, regarding what to do next.
Wireframes
Based on a complex BDR and the fact that we are working with an existing app, we need to identify what components we have and which ones we need to create for upcoming functionalities, we sketched wireframes for this new journey using existing and new component ideas. This way we can test ideas quickly, iterating and refining the product on the go.
Design system
In this case we had a design system to start with, so we expand on it adjusting old components and creating new ones to satisfy the application new directions. We create the system being aware of colors and functionalities. As a bank app, our user target is very large, so we need to make sure to use color contrast and sizes for accessibility.
Development step
After the design process, we have a final walk-trough meeting about the new feature with the development team and the business team to have a final review of interactions and capabilities before it goes live.