Mortgage Planner For Sprive

Project Type

Design and development

Industry

Finance, Banking and Insurance

Tech Stack

FeathersJs

About the Client

With a goal to help people live a debt free life, Sprive has dedicated its vision to use technology as a medium to help people manage their debt and reduce the significant impact that it has on their lives. With Sprive, the client looks to promote improved money management with their exclusive app that works in collaboration with major lenders in the UK an enable people to plan, repay and manage their mortgages.

The Problem

The agenda behind Sprive was to provide people in debt with a single platform that could enable them to centralize their debts and manage them with timely payments. They wanted to launch a commercial MVP to support their idea of digitizing loan optimization. The COO of Sprive reached out to the GeekyAnts team through the website enquiry page. Since he was locally available, he visited our premises and had a discussion with us F2F.

Since the requirement was of an MVP, it meant building everything from scratch. Sprive wanted to complete the product in 4 months, which led to intense discussions between us and the clients about the ideal approach to the project with the time constraint in effect. After drafting a Business Requirement document, we presented a ballpark estimate to the client, which was agreed upon. After 3 months of continuous dialogue and intricate planning, the project was finally launched under a fixed timeline plan that was divided into phases, which was the most ideal approach, considering the dependency on 3rd party APIs.

OUR APPROACH

Strategy Analysis Planning UI/UX Development Testing Delivery

Strategy

We partnered with Sprive, a Financial firm, to streamline their processes with Fintech solutions over a period of four months wherein we engaged with the client on a fixed cost and timeline model since time was a primary concern.

Analysis Planning

We decided that React Native and Redux were a great choice for the Frontend, while the preferred technologies for the Backend were FeatherJS and TypeScript.

UI/UX

As the project entailed visualising the product from scratch, our designers implemented designs on which the wireframes would be based through careful research and consideration.

Development

As per our partners requirements, we integrated features like mortgage entry, authentication flow, a dashboard, side drawers, transaction history screen alongside an option for face and fingerprint scanning.

Testing

Throughout the development process, the project was tested regularly at phases or intervals before being submitted to the client for his feedback.

Delivery

The successful outcome of the project has resulted in an application that is ready to be launched in the stores with various new features being implemented.

Team On-Call

As this was an express project that required solid planning and perfect execution, we employed one Project Manager/Architect for understanding the project to the pixel, make solid plans and manage the entire project, one developer with expertise in Frontend and one developer with experience in Frontend. Also, one QA engineer to make sure everything is in working order and does not break.

A cross platform mobile app as a MVP for Sprive.

A stable and secure server to handle all interactions.

Ability to manage, track and pay mortgage installments through secure gateways.

Push notifications, fingerprint scanner and face recognition features.

Development

It was time to get to work. The complete development of this project would include creating designs for the app, implementing them while developing front-end and finally integrating the pieces together and testing the complete product vigorously.

The project lead for this product described this experience as 'An interesting challenge'. The development of the project would include implementation of a cross platform mobile app for iOS and Android, while a stable and secure backend server that could host a large volume of interactions from the base mobile app.

As decided by the engagement model, this project was divided into multiple phases/sprints (6 till now), dictated by the 3rd party dependencies on APIs. Before starting with the actual coding, selecting the appropriate tech stack is a vital decision that has to be made right and is no easy task. To simplify the selection, we divided the app into two software components, Client-side (FE), to provide access and enjoyable user experience and server-side (BE), to make sure that all features are responding to all user requests function properly, securely and efficiently.

Based on this divide, we decided to choose React Native as the ideal framework for the cross-platform development because of its trust, community backing and cost + time efficiency. Redux was the obvious choice of State Management, which helped us centralize states, predict state updates & use pure reducer functions. Since we wanted a solution that would delay the dispatch of an action or dispatch actions only if certain conditions are met (for n/w requests), Redux Thunk was our Middleware and Typescript for its ability of class and module support as well as static type checking. For the Backend, FeathersJS and Typescript were our choices.

The app required a lot of internal calculations to determine interest, total mortgage and monthly payment amounts for users. A separate module for Authentication using Email, security and face/fingerprint recognition security layer as well. Following the Agile method of management, the complete development process was divided into multiple sprints.

The first sprint involved all tech discussions that determined the best options as per requirements, project setup, mortgage entry & the complete authentication flow of the application. The next sprint included implementation of Email verification, SMTP setups, splash screens and icons setup. The next feature that was tackled was the dashboard, side drawers, transaction history screen, Firebase analytics setup and crashlytics setup, followed by Home Valuations, implementing calculator.js and complete in-app flow. Finally, Face and Fingerprint scanning using react-native-fingerprint-scanner SDK was implemented, the app-flow was continued and Trulayer's payment SDK was integrated for secure payments.

Alongside development, the product was put through multiple levels of rigorous manual testing to reinstate confidence in every function of the app and sort out bugs that needed to be fixed. The client was kept in the loop through every stage. The BE & FE were first put through a developer level test round and was also put through an intense User Acceptance Testing phase where the end-user tested the product upto satisfaction and reported any discrepancies, if found which were fixed in the following updates.

Overcoming Challenges

With an application of such value and delicate details, challenges and roadblocks are bound to come across during its development, but it was nothing a little R&D couldn't solve. Since it was a Fintech App, multiple levels of security was crucial and a highly secure service was employed for the same. The integration of this service with React Native was a new concept for us. The team researched a bit on this and came up with a solution to integrate them successfully to help users access their bank's payment gateways securely and check their account details. Normally, RN applications have a single default splash screen. For this app, we added two (the second one was a layer over the first Splash Screen). The first was added onto native side whereas the second on the RN side. This involved a bit of research work as well. The biggest challenge came in the customized integration of Analytics and Crashlytics using Firebase. The need was of records bifurcations based on multiple user data to get them analyzed in a productive way. It was pretty challenging initially, but the team came up with the best possible solution at the end.

In bird's eye view

Versioning for this project was done using the x.y.z rule.
GitLab was used for source code and task management.
All communication was done through Slack, Email & Google Meet.

Final Impression

Sprive is an ongoing project with us and it is planned to be launched soon on the Play Store and the App Store. So far, the client has only positive words to say about the team and their work. They are extremely happy with the level of professionalism and problem solving that we have displayed during our work and their experience with GeekyAnts has been wholesome. They were very gracious to leave an amazing review for us on Clutch. Since the project has not yet reached its completion, we are looking to maintain and improve the quality level that we have set in the past and hopefully retain this wonderful relationship.