Building a Seamless Customer Portal: Overcoming Challenges and Enhancing Flexibility

After the success of a major project, we were tasked by a leading insurance company to build their customer-facing portal, which would include the majority of their micro-insurance products in a self-service workspace.

Challenges:

1. Reducing Complexity: Our strategy to address the complexity within our system is evident as you navigate through the pages. While maintaining a consistent structure, each page exhibits its own distinct styling. Flexibility was key during development, as each brand occasionally necessitated unique, product-specific features. This approach initially tackled complexity but revealed limitations when a third language was introduced, prompting a structural redesign for specific products and compromising component reusability. Accommodating brand-specific requirements, such as logos, further underscore these constraints.
2. Service Migrations: Building a new client-facing frontend required migrating many micro-insurance product services to work with the new frontend. This migration posed a significant challenge, primarily due to the labour involved. Developing a new backend and transitioning services to the updated frontend system became a meticulous task. However, the process was intermittently hindered by trivial issues such as grammatical errors, leading to disruptions in testing and smooth operation.
3. Screen Resolution Compatibility: Ensuring compatibility with various screen resolutions is paramount in enterprise system development. Despite continuous efforts, challenges arose during the transition from staging to QA, SIT, UAT, or production environments. Testers frequently reported bugs related to cosmetic issues, such as mispositioned elements. Often, these issues stemmed from discrepancies in the testers’ PCs rather than the application itself, sparking discussions about the specific screen resolutions that should be accommodated.

Implementation:

1. Ground-Up Implementation: Given the project’s nature and scope, we built a ground-up implementation for both the frontend and integration pieces. We identified patterns and consistency in the designs, allowing us to build a bespoke dynamic form generator that could render forms, handle validation, and apply appropriate business logic.
2. Angular and Reactive Forms: We implemented textbook Angular and Reactive Forms on the frontend, promoting maximum type safety, efficient bundling, component utilisation, and dynamic routing to handle various permutations and combinations in the customer-facing portal.
3. Custom Integration Platform: We built a custom integration platform on Node.js, which could connect to a legacy system and execute commands using Express middleware. This resulted in a middleware that could communicate using modern standards while running all the legacy services, shortening response times and network hops.

Results:

1. Frontend Success: The Angular phase yielded a well-structured interface, characterised by reusable components. This approach streamlines maintenance and facilitates future expansions, significantly reducing the likelihood of errors. By adhering to best practices in frontend development, our team ensured a robust foundation for the user interface.
2. Backend Success: In the backend development phase, we established a clear and structured architecture in alignment with enterprise standards. This architecture facilitates seamless integration with legacy API calls and accommodates new API functionalities. Custom tool sets were employed to maintain consistency and uphold coding standards, ensuring backend system integrity and reliability.
3. High-Quality Solutions: The successful implementation of both frontend and backend components using Angular and Node.js underscores our commitment to delivering high-quality solutions that meet the evolving needs of our clientele. The structured approach adopted throughout the development process enhances system performance and sets a precedent for future projects.