Building My10X

Problem: The old 10X online portal and mobile app experience lacked depth and functionality, and users felt it did not allow for proper management of their investments. Fund information and projections were not available, and any changes to their account required assistance and support, resulting in a slow and underwhelming user experience of the product.

Solution: Design and develop a modern client portal that is mobile-friendly and user-centric, empowering clients to administer their investments and plan for their future.

Project Overview

10X approached us to revamp their online portal and mobile app. As a go-to for retirement planning, it was vital that 10X users could manage their investments easily, fully and independently.

Our solution was My10X, a portal enabling clients to plan, invest and monitor their retirement investments and to achieve their retirement goals. While My10X is a mobile-first platform, it can also be accessed via laptops and tablets.

My10X acts as financial advisor, investment manager and financial coach. It helps clients set realistic retirement goals and develop a savings and investment program to meet personalised goals. Clients can also adjust their investment plan for any life events and monitor their progress along the way.

Importantly, My10X proactively communicates with clients, reminding them about savings goals and advising on how to improve outcomes. It also reaffirms and congratulates clients for taking the right steps in their investment journeys.

Feature Highlights

• Simple, mobile-friendly, card-based layouts
• Interactive retirement planning tool
• Referral programme
• OTP based login
• Tailored content

Technical Requirements

To ensure the success of My10X, the following technical requirements needed to be met:

• Mobile-friendly
• Low latency
• Secure

Technology Used

To achieve our goals, we chose the following tools:

• ASP.Net MVC Application hosted in Microsoft Azure.
• SQL for data storage.
• ReactJs, Redux, React-Router and Webpack to build a Single Page App.
• JSON Web Tokens (JWT).
• Azure Application Insights.
• Segment.io
• Orka integration.
• NML CMS integration.
• Entity Framework.
• Microsoft's Unity for dependency injection.
• Redis for caching.
• HiQPdf for generating PDFs from HTML templates.
• DotLiquid for templating statement PDFs.

We used ReactJs, Redux and React-Router to build a single-page application (SPA). This means the entire client-side application is contained in one cacheable script that can quickly transition between multiple ‘pages’ without the need to make full web requests as is done traditionally.

Data needed for rendering the application pages is retrieved as needed as JSON from the server and shared between pages.

We chose Redis as a caching technology. We cache often-used data that is unlikely to change regularly to avoid having to make additional database or web service calls. There are also various instances from within My10X where we cached the results of API calls to Orka.

Additionally, we also cached database calls from Orka, either to its own database or the external source database. Redis provides a great improvement, reducing time to fetch data from hundreds of milliseconds to less than ten.

Architecture

For the My10X application we went about integrating and expanding the existing universal 10X investment API, nicknamed Orka.

Orka acts as a central platform for 10X’s entire data architecture – managing their various services, investment portfolios, and partners. Orka allows the 10X architecture to be infinitely scalable to meet the needs of the market.

The My10X application is a SPA that integrates with Orka in the back-end. Users are authenticated against Orka and all API requests to Orka that involve client information need to present a JSON Web Token (JWT) as part of the request. These tokens not only verify that a user has been authenticated against the API, but also ensure that users do not access each other’s information.

There is no need for the My10X application to persist any data since user accounts and investment information is stored behind the Orka interface.

As such, the My10X application has a very lightweight architecture consisting of the front-end application and back-end controllers that act as an intermediary between the front-end application and Orka.

Integration with Orka

The web application communicates with the universal investment API, Orka, which we built to process applications and update 10X’s internal systems. The data layer is built using Entity Framework code’s first methodology, which allows for increased portability and scalability.

All incoming requests are secured using HMAC encryption. Systems integrating with Orka are given an API key and App ID, which are used to generate an authentication string.

During the development of My10X, the capabilities of Orka were vastly expanded. It can now authenticate and manage users, retrieve and update investment information, and process transactions.

Design

My10X was designed by Isoflow.