Client
The Client is a fintech startup from Pakistan. It is a member of Y Combinator startups and is currently worth $100 million.
Project Idea
According to the World Bank, Pakistan ranks third in the world in terms of residents without any bank accounts whatsoever, and that is about 100 million adults. The country doesn’t yet have the banking services and mobile apps that we are so used to — they are only beginning to shape up.
The Client asked for our help in creating a finance app for the first online bank in Pakistan. They wished to build an innovative and highly practical service that would solve an extremely ambitious task: promoting banking services in Pakistan and making digital payments accessible for its people.
As for their target audience, the startup chose millennials, being the most tech-savvy users. Since millennials travel a lot and interact with people all over the world, English, which incidentally is the first official language in Pakistan (the second is Urdu), became the main one in the app.
Challenges
A super app from scratch on a tight schedule
It took us less than a year to create a finance app with all the features popular among users of banking apps.
Numerous third-party integrations
Since the fintech solution had to be developed very quickly, we opted to use ready-made SDKs for several features. In particular, we used ID WISE and I2C, the solutions built by other fintech startups. As a result, we implemented a lot of integrations, each with their own specifics.
A bleeding-edge product
The bank was looking for an innovative product. Consequently, it was striving to incorporate the latest technology: the most recent version of Flutter, freshly minted on the market of SDKs.
Results
We designed and released a minimalistic, cutting-edge banking app for millennials. With only a couple of taps, users can create a virtual card and use it when shopping the same day.
Online users now have access to all the must-have features that Pakistani banks have never had before:
- Signing up and signing in through remote verification
- User account
- Ordering a physical card
- Transaction history
- Bank-to-bank transfers
- Intrabank transfers by phone number
- Setting limits on cards
- Paying bills
- Quick support chat
- Push notifications
Solutions
Flutter and other cutting-edge technologies
From the get-go, the Client wanted to build a fintech app powered by the cross-platform framework, Flutter. The choice of Flutter had nothing to do with the economy—today, it’s one of the most dynamically evolving technologies in mobile development. The bank wished to make a bleeding-edge project.
We wrote the app from scratch. The bank stuck to their vision throughout the entire project. That’s why it became the first project to migrate to the most recent versions of Flutter and use the latest technologies. To name a few, it was the first time we used Redux, a library that manages application states, in a project powered by Flutter. Redux is used to load and store user data: accounts, cards, etc.
It was also the first project where we used our own solution, a library called Elementary that helps build a clear and transparent architecture in a Flutter app.
Besides that, Flutter provided an easy way to address a distinctive feature of the region—Urdu, the second official language in Pakistan. The app was developed in English. The backend offered no support for Urdu. But thanks to Flutter, if there is a name in Urdu in a phone book, the app displays it the right way. In addition to that, users can fill out their account info in Urdu without the risk of errors in the app.
Learn more about Flutter app development >>
The client team was always open to suggestions and ready to try out any new solutions. The process of implementing these was two-sided. The CTO was constantly monitoring the market looking for new technologies, while the Surf team examined the capabilities and limitations of each one and incorporated them into the project, if feasible.
Backend built together with the client team
The Kotlin-powered backend was a collaborative effort of the bank and Surf teams. What makes this project stand out is that we never drew a line between the client and developer teams. We tackled each stage as a single, tight-knit team.
What makes this backend special is that it is more of a middleware that ensures integration with I2C, a bank processing platform.
Numerous SDK integrations
One of the traits the app is that it incorporates numerous different SDKs. The reason being, the bank wanted to have the project ready as soon as possible and was looking for ways to implement features using the existing solutions. On the one hand, this approach paid off — we handed in the app in less than a year. On the other hand, we had to integrate it with a great number of third-party services.
Here are the most crucial ones:
I2C. I2C is also a system created and developed in Pakistan. It offers a basic set of features needed to carry out banking operations, such as creating a card, transferring funds, applying for a loan, etc. The app uses I2C not only for its key banking operations but also to onboard users. Once checked at onboarding, the data is sent to I2C to open an account.
The integration with I2C had many nuances. For example, the service didn’t support multicards. Not all the features we needed were available in the system. That being said, we had to actively engage with I2C as we integrated the service, while they had to tweak it and add capabilities to suit us.
IDWise. Here’s another solution created by a startup called IDWise. It offers a handy way to carry out remote onboarding in a banking app. Users don’t need to go to the bank; instead they can take a photo of themselves and their documents and submit them for verification. In turn, IDWise transfers the data to NADRA, a Pakistani platform providing public services, which verifies user identity.
Zendesk. We integrated the app with an online chat called Zendesk and created a separate token for it.
App design and improved UI kit
When the Client first approached us, they already had a UI kit custom-made for them by a third-party contractor. However, the project evolved so fast, with changes happening practically online, that the design contractors found it hard to react quickly and keep their finger on the pulse of all alterations. In the end, the bank assigned the design to our team.
Our design team not only planned how to implement this or that feature in accordance with the established concept of the UI kit. They kept the UI kit up-to-date and contributed their own solutions.
Scrum workflow
Building a finance app for the Client, we followed a methodology called Scrum. With it, developers can swiftly and efficiently build a trailblazing product. The method, however, has some nuances. First off, it’s team-centered and requires a different approach to task allocation within a team. All team members, both at the bank and Surf, had an incredibly high level of engagement. Each member of a team had to be proactive, take responsibility for their decisions and make them quickly.
Besides, we received quick feedback from the client, primarily through face-to-face interactions and not via written messages, which is also characteristic of Scrum. At meetings, teams would often make decisions on the product straight away, and sometimes developers would even write code online. After that, QAs quickly tested everything with manual tests.
Throughout the entire project, we had to swiftly respond to the client. After each sprint, we submitted builds to the client for review and quickly fixed the bugs they found.
Surf analyst
All the features essential to a mobile bank
We implemented all the go-to features of an online bank.
Signing up and signing in through remote verification. To implement this feature, we integrated the app with an onboarding system called IDWise. Users don’t need to actually go to the bank. Instead, they can fill out the application on the mobile app, take a photo of their passport, take a selfie and submit it all for verification via IDWise. As soon as it is confirmed, the information goes to the backend, where it is double checked by a bank manager. After that, the app will show users their new accounts and virtual cards.
An intuitive home page showing transaction history. This one shows information about an account, its balance, and a transaction history.
User account. This section shows user info. Here, users can also add their e-mails and addresses to order physical cards. In addition, it is where users can request an account statement.
Account info. This section provides detailed information about the card and account details.
Ordering and activating a card. We added this feature by integrating the app with a bank processing service called I2C. As soon as they get registered, users are provided with a virtual card, which they can immediately use to pay for their purchases. However, if they wish to order and activate a physical plastic card, customers need this section of the menu.
Bank-to-bank and intra-bank transfers. Bank-to-bank transfers are also mediated by I2C. To integrate it with the backend, we designed a separate API. In addition to that, we added transfers between cards and accounts of the bank via phone number and p2p transactions, which are now extensively used to make direct p2p transfers of crypto currency that don’t involve mediators.
Card configurations. Users can set limits on expenses for their cards.
Paying bills. Users can now pay their household bills, subscriptions, and other tickets and fines right within the app.
Customer support chat. Here, we used an out-of-the-box solution (Zendesk) and integrated it into the app.
Push notifications. The app shows push notifications, which we integrated using a third-party service called OneSignal. That being said, we initially planned to implement the notifications using Airship. However, as we later found out, the service couldn’t provide a notification center. Therefore, we chose a better fit.
Product analytics and error analysis
To provide user analytics, we integrated the app with a service called Segment.
To top it off, we also used a service called Sentry, which is a free tool for remote bug monitoring.
100% Test Code Coverage
The project has the most test coverage among all the Flutter projects made by Surf (of which we have more than 10). The developers wrote unit tests for each feature.
Support in structuring the project growth process
At the very beginning of our collaboration, the project barely had anything documented. We had to work without the standard product roadmap and backlog, guided only by the high-level user stories provided by the product manager. And more often than not, these ignored the nuances of mobile app development. This was due to the fact that the project was growing and changing very rapidly.
However, as the project grows in functionality, and the team expands, it gets harder to upgrade the project and stay in control of it without documentation. That’s why we put in a lot of effort to introduce some of the best practices of finance app development into this project, as Surf has 12 years of experience in mobile banking app development. For instance, we streamlined the delivery management process. What that means is we switched to two-week long sprints and let the PM define the procedures (at which point do we move on to a certain step of a sprint and which activities can prove that). For example, when a build report is due by the QA team, which day is the release day, when the product manager is expected to submit release notes, etc. By the start of each sprint, we had to put together the artefacts and design the features to be implemented.
When the time came to transfer the project in-house, we put together and handed in detailed documentation describing the existing features and artefacts, including the backlog and design for the features we only planned to implement. QA handed in the tests, documentation, and knowledge base. With this approach, clients are able to onboard an in-house team and keep upgrading the product in a streamlined and consistent way. This proved effective time and again in every successful project Surf has ever made in fintech app development.
The result
The mobile finance app has already been released and is available in stores as an early access program. It currently has over 3,000 users and issues payroll cards for its staff. Now it is an in-house project.
