Single Mobile App for Several Banks

Getting ready for transition to mobile

The Client came to us with a high-level product backlog. But it referred to the business requirements not optimized for a mobile product. Surf analysts did a great job adjusting those requirements and preparing them for technical implementation.

Another issue was that the bank infrastructure processes did not match a mobile interface. Some processes were not digitized being carried out in the paper format.

Many interface solutions faced technical constraints. Building the back end with processing went parallel to creating the app. It required much effort on the part of Surf analysts.

In this project, we used Remote Config. It allows changing the app capabilities without updating the complete service and waiting for the app to be uploaded to a store. The process ran as follows: Surf released a feature, but users had no access to it. The bank adjusted its backend to the feature. Together we tested its function, and only then the feature became finally available to users.

In many cases, Surf not only suggested a UI solution but helped the bank adjust their business flow to the mobile development requirements, and work out a way to change data structures and the output process. For instance, to get a loan, the bank clients had to fill out several forms, take them to the bank, and schedule a meeting with an expert to apply for the loan. The forms were extremely long, had loads of items, and did not suit a mobile app. Based on their mobile expertise, Surf analysts helped the bank adapt the forms and make them shorter and our designers arranged the UI elements of the application in a user-friendly way. So, the clients can now apply for a loan online.

Optimization aimed to launch the app in half a year

The Client intended to launch the first version of the app within as little as six months, which is a very tight schedule for a complex project like this. That’s why we needed to get continuous development up and running while doing our best to speed up and optimize the process due to:

● fast approval of the new screen mockups with the Client,

● instant transfer of the finished design to developers,

● ensuring access to the latest relevant information and possibility to work simultaneously to both developers and testers.

The app consisted of 300+ interconnected screens, which meant any changes introduced to the interface had to be consistent.

To unify and accelerate the process for both designers and developers, all control elements, text styles, and standard blocks were put on a separate page. The team used the unified elements and wasted no time changing the screens.

We worked in 2–4 week iterations: designers got down to a new feature as soon as the previous one was transferred to developers. The Client approval was also performed step-by-step. Thus, we succeeded in meeting the tight deadlines and even got ahead of them. For example, we developed a deposit calculator even before the bank put together the list of rates.

These were parallel Android and iOS development and open standards that enabled us to meet the deadline.

At some point, the mobile bank even left behind the web version in terms of functionality

Adjusting product style to mobile development

As the project started, the Client was in the process of creating a style for its digital products. First of all, for the website. We designed the mobile app based on that style, but we had to adjust it to mobile development specifics.

While we were making the prototypes, the restrictions came up that had to do with back-end settings and the specifics of the bank in-house processes. Therefore, the first version of the app had the basic features only. The first version design was also concise: in dark tones using the bank brand colors.

With time, the design has changed a lot. The new version became “lighter”, brighter, and fresh. We changed the visual component step-by-step: added new elements, changed the colors and fonts.

The new design was integrated gradually and seamlessly for the users.

Our designers have meticulously planned and thoroughly tested out every element of the interface. For instance, the carousel we originally intended to implement for payments wasn’t visible and it wasn’t obvious what a user had to do to change the account they pay from.

Therefore, we suggested a different solution: adding some interface elements, the controls, to choose where to transfer money to and from. In addition to that, we added a comment to each element so that users understand what they have to do. They can tap on a control and open a list of all the bank products they have to pick the account they need to send money from.

Ensuring app stability

It’s crucial that a banking app is stable and has no bugs. To avoid bugs, we check every new release with autotests and manual tests to make sure all the user scenarios work, i.e. the data are updated and received from the server without any delays, users can easily perform any transactions or learn about new products the bank offers.

Before the first app release, we carried out 824 manual tests on payments, transfers, and statuses of all the products and new features. 

Result

The Client’s Group got a banking app with a user-friendly interface and a modern design constantly updated to meet the latest industry standards.

User activity in payments and transfers grew by 20% compared to the old app.

Search for ATMs and bank branches

By default, the map in the app finds the closest ATM based on the user’s geolocation data. We added filters by types of operation, working hours, and possibility to search in a certain radius. For example, ATMs can be filtered by their distance from an underground station. Users can also build a route to an ATM or a branch.

One of the most complicated aspects about arranging ATMs on the map is to visually show that there are several ATMs in one place. Moreover, the partner ATMs shall be shown as well.

For this purpose, we developed a service merging all the points on the map into clusters whenever you zoom out. A tap on the point opens a pop-up sheet with a list of all ATMs and the operations available. The map was adapted to the bank brand colors.

Payments with QR codes

To help bank clients pay their bills with QR codes, we added a QR code scanner into the app.

Online loan application

Initially, the bank clients couldn’t apply for a loan online and had to go to a branch office with a set of documents instead. From this point of view, an online loan application was one of the crucial features we had to implement in the app.

The first version of the application was not user-friendly as the bank processes hadn’t been adapted to the mobile interface. The application form had many questions that made you think it was easier to go to the bank.

Currently, the flow is much simpler and more user-friendly, but it took a significant revision of the complete process.

For instance, at the first stage, the bank wasn’t ready to cut back on many questions. But the Client agreed that the form had to be revised when we demonstrated prototypes displaying what it was like for a user to fill out such a lengthy and complicated form.

To optimize the loan form, we suggested breaking the application process into several consecutive steps:

• We divided all questions into topic sections. For example, a section on employment includes questions about both the employer and the income.
• We cut back on the number of questions and deleted the questions that the bank needed for their statistical analysis but not for the application approval.
• We eliminated all the unnecessary fields.

Personal offers to promote new bank products

Looking for a way to notify clients about new products and services to boost their sales, the bank had decided to add to the app personal offers in the form of info messages sent to bank clients. The information can be about a new deposit account, approved loan rate, or news, for example, the possibility to add your card to Apple Pay.

Since the messages themselves are generated and stored in the bank CRM system, we integrated it with the app through a bus and WebApi.

Users’ reaction to the messages may vary and the app reacts differently in each case:

• If the user deletes the message, the app never shows it again.
• If the user marks the offer to read it later, the message appears again a few days later.
• If the user is interested in the offer, a bank employee will call them, and the offer disappears from the list.
• If the user does not accept the offer within a certain period, the offer will disappear.

Security requirements compliance

A banking app must meet all security requirements and keep the app user-friendly. For the balance to be achieved, every use case shall be worked out in detail. A screen of operation SMS verification may serve as an example. 

If the SMS code appears on the screen automatically the user does not have to do anything, not even confirm the operation. This is convenient for a user but isn’t correct in terms of security.

To meet all the requirements, we suggested a hybrid solution. If the SMS code is entered automatically, the user has to tap a button to confirm that. If the user enters the code manually, it doesn’t have to be confirmed, the confirmation button is hidden, and the code is sent without it.

The solution allowed us to meet the requirements set by the bank security service and keep the interactive element contributing to the better user experience.

Online chat

An online chat enables clients to contact the bank without leaving their homes or waiting for the call center to respond. The chat for the bank clients was based on a service that suits online interaction with clients via any channel of communication and can be integrated with CRM and HelpDesk. The chat supports text messages and allows attaching photos and documents.

Loyalty program

Client’s mobile app has a loyalty program which is a must-have for a modern bank.

Whenever clients buy something, they get cashback in bonus points. The app shows the users how many bonus points they already have and how many are expected to be granted.