Building the STANLIB Onboarder

Problem: The onboarding of financial clients for STANLIB tax-free savings accounts is a slow and cumbersome process, discouraging new clients and burdening financial institutions in admin and overhead costs.

Solution: Design and develop a web application so that new clients (new investors) can apply for a STANLIB tax-free savings account online.

Project Overview

STANLIB approached us to design and build an onboarding web application where users could apply for a tax-free savings account online.

Our solution was a custom-built, single-page onboarding web application where users could easily apply for an account online.

Feature Highlights

• Single-page application (SPA)
• Projected returns graph on investment
• Submit South African ID document or Smart ID via file upload or real-time photo
• SVS verification on ID document
• SMS notifications
• Save and resume functionality on application
• Track web application usability with Google Tag Manager

Technology Used

The Stanlib Onboarder application was built using the following technologies:

• ASP.NET Core MVC
• JavaScript
• jQuery
• Google Tag Manager

We chose ASP.NET Core MVC as our development framework to give us the best foundation to work from in handling server processing and integration with Silica's Web API.

Due to a strict time constraint, we decided to build the front-end with vanilla JavaScript and jQuery. This time constraint could be met because of our highly experienced front-end developers who are able to meet and possibly exceed today's standards of front-end without the use of JavaScript framework libraries.

In order to improve user experience, Google Tag Manager was used to track how users utilised the onboarding web application.

Architecture

The STANLIB onboarder application can be described as having a three-layer architecture, consisting of the presentation layer, the application layer, and the data layer:

Our decision to design and build the presentation layer as a single-page application using vanilla JavaScript and jQuery resulted in a responsive and lightweight user interface without the bulk of a JavaScript framework.

We also created custom JavaScript modules to facilitate integration between the presentation and application layer.

To build the application layer we used ASP.NET Core MVC. This can be thought of as the business layer which has multiple custom-built modules to handle separate responsibilities (such as validation and business rules), but has three main module categories:

• Security modules – responsible for the authorisation of the application layer to securely communicate with the data layer
• Processing modules – responsible for executing the steps required for a specific action and invoking other modules to assist in the process
• Data layer communication modules – responsible for the communication between the application layer and the data layer

The data layer is an application programming interface (Web API) provided by Silica, which handles their internal Line of Business (LOB) services and data. The data layer acts as the single source of truth for the overall web application.