Client
The client is a large foreign-invested bank and one of TOP-15 European banks. We’ll not specify the name due to the terms of NDA.
Project idea
To create a mobile app and help the bank move beyond an out-of-the-box solution
The bank already had a mobile app for natural persons but based on the out-of-the-box solution. The solution kept the bank from tailoring the app to its specific needs, significantly limiting their ability to upgrade and add new options to the app.
Therefore, the bank chose to create their own app and get a much more flexible tool for further growth and increase in conversion rates.
Tasks
Our main task was to create a bank’s own mobile app from scratch and integrate it with the existing backend. The first version should have at least as many functionalities as the previous solution. Here’s functionality the bank needed:
- To update the design, making it more flexible and intuitive.
- To improve the security of the app.
- To implement user analytics to get a better understanding of customer needs and use them to its benefit.
- To implement new client features, integrating them with Know Your Customer (KYC).
To take up these challenges, all the stages of development had to be lined up properly, including analysis, elaboration of the requirements, and integrating the backend team with our mobile developers.
Project implementation
Designing as continuous process
We inherited the UI design from another contractor. It had already been approved by the European headquarters and complied with the brand book — an accepted global design concept for the bank’s app.
We suggested our concept which was appreciated by the client’s team. However, it wasn’t implemented just then: it was decided not to waste resources on design revision for the first release. We focused on the app development thus addressing the main challenge: leaving the out-of-the-box solution behind.
Designing such a complex product is an ongoing process that goes hand in hand with development and undergoes constant improvement. This way it gradually evolves from a mere set of screens into a complex design system
Over the two years of development, we’ve upgraded and improved the initial design and addressed some pain points and previously unaddressed use cases.
For example, on the main screen, along with the bank’s products the banners appeared with individual offers. The bank can place here a loan or deposit offer with favorable terms.
On the left — initial concept provided by another contractor, on the right — the concept adjusted by Surf.
Analysis as crucial part in banking app development
Our business analysts checked the backend capabilities and confirmed it was possible to implement the design.
The step is significant as designers, developers, and business analysts work in close contact to consider all the details and technical capabilities. It is not always possible to make a pretty picture real — sometimes you have to work on the API or adjust the design to the backend capabilities.
We put together the technical specifications describing the app’s behavior in detail where the design and the API docs didn’t make it clear enough.
App development and integration with bank’s systems
We created native apps using Swift for iOS and Kotlin for Android. The architecture used was standard: SurfMVP for iOS, MVI and MVP for Android. This is what Surf uses in all projects.
Our approaches are well documented, which makes it easy to engage new developers in the project or transfer it for in-house development.
In the course of the development process, a lot of time and effort was spent on integration with the backend.
The bank did not have its own backend, they worked with a contractor. In addition, the interaction between Surf and the backend ran through another contractor acting as an aggregator. It pulled together all information from the backend and from the bank’s internal systems (for example, from directories), adapted and transmitted our requests to each other. Such flow required a lot of effort on the part of the project team to implement an app taking into account the specifics of the backend and internal banking systems.
Testing as obligatory part to check code reliability and app safety
Code reliability and safety are crucial for any app, but even more so for banking apps. In order to produce a high-quality solution, we carry out a thorough quality assessment.
The code of this banking app is 100% covered by tests! This is possible due to autotests. Otherwise, testing would take too much time.
The project is covered by 1850 checks and the complete testing takes 36 hours. 65% of tests are automated, while the other 35% are manual as the third-party services are used.
We write autotests in plain language in Gherkin. These are the autotest examples:
Using Gherkin is an effective solution in case the client plans to continue development in-house. Any QA specialist can be easily engaged in performing such tests even without initial technology knowledge.
User analytics as effective tool to analyse users’ behaviour
We implemented user analytics with special metrica service and Firebase. Not to get lost in the amounts of events and data, we started off tracking the main events: entering the app, opening screens. We also analyzed the start and end points of the key funnels such as loan application, card issue, and money transfer. To make the audience segmentation easier, we collected anonymised customers’ data: city they come from and products they use.
This is a standard analytics set for a bank that prevents being lost in information flow. In case of any issue in a funnel, the targeted events can be added to the funnel to get to the root of the problem.
New features for bank’s customers
We started with implementing the same functionality that the old out-of-the-box solution had. But as we developed the app, its functionality expanded. We added a possibility to pay the loan completely or partially, and integrated the app with the Visa Loyalty Program.
The features we implemented:
- Know Your Customer (KYC) allows identifying the counterparty personality before a financial transaction.
- Possibility to issue a digital card instead of the plastic one.
Easy online application for loan and credit card
There is a service for submitting an online application for a loan and a credit card in the app.
For the users, this process looks simple and straightforward.
They fill out a questionnaire and send it to the bank. After a while, they get an answer. If the application is approved, then with specific terms: term, amount, and rate of the loan. The user can immediately agree to these terms or try to change them: increase the term, reduce the amount of payment. After that, they receive the final answer from the bank, draw up a loan, and receive money to the account or choose from which office they will pick up the credit card.
The questionnaire can be saved as a draft and edited. After being sent to the bank the application and its status appear on the My Applications list.
From the point of view of the bank and the mobile app, the online application process requires complex implementation logic and integration with various banking systems.
And namely, it involves:
- bank backend;
- directories from which information is pulled into the questionnaire;
- system to store customer data,
- a service for processing a contact database, where the correctness of the customer address and employer information is checked;
- risk management department to analyze the information and calculate the interest rate.
In addition, there are many pitfalls to be taken into account when implementing an online application.
For example, how will we format the date so that the bank systems process it correctly: yyyy.mm.dd or yyyy\mm\dd?
What data in the user’s questionnaire can be pulled from the reference book, and what should they fill in on their own?
How to notify the user that the status of their application has changed or that the processing of the application will take longer than planned?
Finally, after the user completes the questionnaire, a large json file with about 200 lines with user data is sent to the backend. It must be correctly composed, transmitted and processed.
These are the points we took into account and implemented in the mobile app logic.
Result
We created for the bank native iOS and Android apps with state-of-the-art design and user-friendly interface and cool features for users. In the course of development we applied all the best practices aimed to conversion rate growth. Now the bank is not limited by the capabilities of the out-of-the-box product. It can upgrade the app and adjust it to its business processes — not the other way around.
