Stanlib Onboarder

Design, UX, Front-end Development, Custom Software Development

A digital client onboarding tool to improve acquisition of new Stanlib customers without requiring input from financial advisors.

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.

Stanlib Onboarder landing page

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
Stanlib Onboarder funds page
Stanlib Onboarder identification page

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.

Stanlib Onboarder details page


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:

DMA Onboarder architecture

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.