How we developed a mobile banking app and reduced time-to-market with React Native

Mobile Banking App Development

As the world is getting increasingly digital, banks are moving online. So let's discuss the digital transformation in banking.

A Head of Services at Akveo is talking about seven tips we’ve accumulated while developing mobile banking apps.

Client Overview

Our client is a market leader bank. The client wanted to turn their technical department into a separate SaaS-service for developing digital banking products.

Challenges

The banking domain in the client’s region is extremely dynamic and competitive. On average, there are more than 20 banks per country, so user acquisition costs are incredibly high. In such circumstances, any bank that wants to beat the competition has to be prompt, flexible, and able to offer unique solutions for its customers.

That’s where the story of a successful collaboration with Akveo begins. The client started forming an internal technical department, and invited Akveo to be a part of the bigger team as top-notch experts in mobile development.

Goals of the project

The customer intended to become the first bank in its country in terms of digital services. To do so, the bank’s technical department had to prove its ability to build solutions fast and on budget. With that goal in mind, the team of Akveo decided to use a cross-platform solution. The React Native framework became a sort of “silver bullet” that allowed us to build up Android and iOS applications out of a single codebase. Plus, the framework provides the opportunity for frequent releases and upgrades. As a result, the solution’s time-to-market has decreased significantly.

Scope of work

The platform-agnostic mobile app development is distributed for both iOS and Android platforms.

Mobile development using React Native for the cross-platform solution using Bitrise as CI/CD;
Manual and automated testing setup using Python 3, Pytest, Appium, Sauce Labs - both UI and API tests;

The product was built from scratch and evolved from an MVP to the eventual commercial version.

Solution

Akveo built the mobile application’s client-side to provide a fully digital experience for existing and new customers. With the app, users can:

Control debit and credit cards (order, set up limits, freeze/unfreeze, etc.);
Create and manage virtual cards for e-commerce and mobile purchases;
Quickly pay contracts or bills;
Create and manage term deposits (including a term deposit calculator);
Create and manage standing orders to pay individuals or settle utility bills;
Saving account for everyday payments change;
Create and execute any local or international transfer;
Transfer between accounts;
Scan and save all your bills and receipts;
Experience a smooth and user-friendly banking app;
Enjoy enhanced financial graphics reflecting earnings and expenses;
Customizable dashboard for each user;
Dark, corporate and light app themes available;
Safely execute all banking transactions with fingerprints authentication and OTP (one-time-password);
24/7 live support (chat and phone);
Create account flow and identity confirmation logic in the app;
Siri integration;
Apple Watch integration.

Technology Stack

The team built the application using React Native technology. This framework allows creating platform-specific versions of components to share a single codebase and business logic across platforms. Thanks to the framework, our team can maintain two platforms simultaneously and keep a high level of development efficiency. The development team concentrated on business requirements but not on low-level platform infrastructure tasks that reflected the development rate.

The application also uses different well-known and reliable libraries that have become a standard of React Native development practices. React-navigation, mobx, moment, react-native-ui-kitten are a small part of the third-part solutions used in the application. Although most of the development is performed on React and JavaScript sides, the technology supports using native APIs in the shared codebase. The application uses that availability a lot, and they are implemented with the help of:

Different types of biometrics authentication such as FaceID and TouchID;
The camera takes pictures of different kinds of codes and receipts;
Keychain access to store sensitive user data;
File system access to save not that sensitive users and the application service data;
GPS services and maps to help users to fill different forms and locate near objects on the map;
Network state to enable the unique offline logic of the application;
The application state performs passcode functionality, restricting access to the application's secured section after closing or hiding it.

Along with a cross-platform codebase, the application contains a wide variety of features implemented on the native sides. An example of these features are:

Siri support. The application integrates with the virtual assistant and allows interaction with the application by voice;
Apple Watch application. It allows users to use the application’s basic functionality with their watch devices;
Variety of scanners. Include credit cards, passport/national ID, IBAN, and other types of scanners;
Camera verification flow that allows performing face scanning to make sure the person is real. Plus, special services define if the person is the same as in the photo.

Push-notifications are an essential part of the vast majority of modern applications. This technology keeps users aware of their accounts, events, support services activity, or just marketing messages.

The application uses standard mechanisms on every appropriate platform but collects messages from several services. For instance, Braze, a special third-party platform, provides a wide range of functionality, including push notification services, analytics, users, and marketing campaign management. Along with standard marketing and advertising push messages, the application implements one of the most effective mechanisms from a targeting perspective - geofencing. It is a location-based service that sends users relevant messages if they enter a predefined location or geographic area.

From the starting project point, analytics was one of the cornerstones of the application. The application uses such services as Google Analytics, Adjust to collect events and analytics data. The application is using special services for tracking such cases. Crashlitycs and Firebase services provide rich information for the development team to understand crash reasons and fix them.

To provide a better user experience, we implemented deep-linking. Deep links let customers open up specific content pages and pass through custom data. The technology can be used in push notifications and email marketing to provide users with relevant content and increase conversion rates.

Pricing Model: T&M

Team: the Akveo team included ten people at peak time:

1 project manager;
7 mobile software engineers;
2 manual QA engineer;
1 automated QA engineer;
1 business analyst.

The bank team in the mobile app-related department included:

1 product owner;
1 support engineer.‍

Key Results

The mobile app provides an easy way to switch from offline banking to a digital experience. The solution includes tons of useful features to manage cards, bills, transfers, loans, deposits in a couple of touches, not to mention excellent security and 24/7 customer support.

When a mobile application is compromised by malware, there's a good chance users might fall victim to digital fraud. That is why we developed the client's application according to security best practices. In particular, the application is implementing SSL pinning - a technique used on the client-side to avoid a man-in-the-middle attack by validating the server certificates again even after SSL handshaking.

The application uses a security library, which integrates into the applications and provides a rich collection of security mechanisms such as obfuscation, repackaging, debugger, jailbreak, root or emulator detection anti-keylogging, and many other features.