Overview

Client’s business

Our client’s business supports entrepreneurs by simplifying complex financial topics such as tax planning, savings, dividends, pensions, and insurance. Their cloud-based platform is designed for financial advisers who guide business owners in making well-informed financial decisions.

The service features modules for simulating profit withdrawals, tax implications, and future financial scenarios like retirement and savings planning.

Client’s customers

Their service serves a wide range of clients, including accounting & advisory firms, and pension & insurance providers.

Application/Platform solutions

The web application is designed to improve financial advisory services through in-depth owner analysis. The tool assists advisors in gaining a comprehensive understanding of ownership structures, leading to more informed and personalized client recommendations.

Key features

The platform lets advisors build complete client profiles and run interactive simulations across tax, savings, pension, and risk modules to support tailored financial planning. Each module visualizes outcomes such as profit strategies, long-term ownership effects, savings growth, retirement scenarios, and income-loss risks to guide informed, tax-efficient decisions. White-labelling allows firms to apply their own branding for a seamless, professional client experience.

UX modernization and customization by LiteBreeze

LiteBreeze collaborated with them to deliver new user-facing features in a scalable, maintainable way. The contributions focused primarily on an information gathering feature, user experience and interface improvements, and design language integration.

Highlights of the initiatives

• Replaced Covalent Teradata UI library

  The legacy Covalent Teradata UI library, previously used for rendering graphs and components, was replaced with a more flexible solution. Tailwind CSS was adopted for its utility-first and responsive design capabilities, while custom styling layers were added to meet advanced UI requirements. This shift enabled granular design control, improved maintainability, and supported a scalable frontend architecture aligned with modern frontend standards.

• Responsive customer information gathering module

  Implemented a mobile-first customer facing interface, allowing brokers to gather and process insights efficiently. The system uses AI-generated profiles to summarize information for easier interpretation. This feature also helps brokers ensure they have complete customer information in place prior to the meeting with them.

• Dynamic white-labeling system

  Implemented real-time branding flexibility using CSS variables. This allows client firms to personalize and customize their version of the tool, adjusting logo, colors, and interface elements, to align seamlessly with their brand identity and support effective brand management.

• Design Language System (DLS) integration

  Carefully embedded a scalable DLS that did not disrupt existing components. The implementation involved a 4-point spacing grid and consistent UI tokens to elevate visual coherence.

• Optimized SCSS architecture

  Leveraged SCSS maps and dynamic class generation to streamline design updates and reduce UI maintenance effort.

• Reusable UI components

  Developed standardized Angular components to accelerate new feature rollout while maintaining uniform design patterns across the application.

Technical information

It is a Single Page Application (SPA) developed using Angular 14, leveraging its dependency injection system and reactive programming model for enhanced performance and maintainability. The application ensures a seamless user experience by integrating Angular Material and Tailwind, which provide a consistent and accessible design across multiple devices.

Backend integration: The application communicates with a RESTful API that powers its backend operations, ensuring efficient data exchange. Custom APIs have been implemented to handle complex business logic, providing a robust and scalable backend architecture.

Data visualization: This tool incorporates FusionCharts and ChartJS, enabling intuitive and interactive data representations. This visualization enhances data-driven decision-making, making complex information more accessible to users.

UI frameworks & styling: The application’s frontend is built with Angular Material, ensuring a modern, responsive, and accessible user interface. Additionally, Tailwind CSS is utilized for flexible and lightweight styling, enabling rapid UI development while maintaining design consistency.

Real-time communication: Socket.io is integrated for real-time updates, ensuring seamless communication between users. This enables features like instant data synchronization, chat functionalities, or live notifications.

Internationalization & localization: This project is designed to support a multilingual audience, utilizing ngx-translate for dynamic language switching. This feature ensures adaptability for global users, making the platform inclusive and widely accessible.

Form handling & user interaction: Interactive forms are built using Angular Reactive Forms, providing a dynamic and responsive data entry experience. The application also integrates ngx-slider and @ngneat/edit-in-place, allowing users to seamlessly edit and manage form inputs without disrupting their workflow.

Performance optimization: To enhance performance, the application uses Lodash for efficient data manipulation, reducing processing overhead for large datasets. Additionally, RxJS observables optimize asynchronous operations, ensuring a smooth and responsive UI without blocking the main thread.

UI enhancements & custom components: Several third-party libraries are utilized to enhance user interaction and UI capabilities. The integration of ngx-color-picker allows for intuitive color selection, while tinymce-angular provides rich text editing capabilities. Additionally, ngx-mat-errors enhances form validation, ensuring clear and user-friendly error messages.

AI integration

This project includes a modular AI system to give advisors faster, clearer insights into each client before meetings.

This AI pipeline is built using Python, containerized with Docker, and orchestrated via Kubernetes. This architecture ensures scalability, reliability, and smooth deployment across environments.

Key Benefits

• AI-generated summaries: Instantly convert raw data into readable insights, reducing advisor preparation time.

• Enhanced client profiling: Understand customers through natural-language summaries.

• Scalable AI processing: Containerized with Docker and orchestrated via Kubernetes for high-performance information analysis.

Next priorities

Extend the project to support other customer types: The platform will be extended to support advisory to other customer types. This involves adapting data structures, visualizations, and UI flows to deliver deep, personalized insights at the individual level, building on the existing foundation.

Simplification: The current interface for viewing customer insights will be restructured into a leaner version. This update aims to present key information more clearly, reduce navigation effort, and provide a more intuitive, streamlined user experience.

Enhanced customer insights management: More efficient and flexible methods to get customer insights will be introduced, enabling organizations to add their own secret sauce to the capabilities of the tool.

UI/UX improvements: The application will undergo a series of UI enhancements to ensure design consistency, improve user experience, and maintain a high-quality interface across all features.

Angular version upgrade: The current system is built on Angular 14. The next major technical initiative involves migrating to the latest stable Angular version, enhancing performance, security, and maintainability while leveraging the latest framework capabilities.

Full responsiveness for the main application: While the customer insights feature is already optimized for mobile devices, the main application will be redesigned to be fully responsive, ensuring seamless functionality across all modern devices and screen sizes.

Key lessons learned

Importance of UI consistency: Inconsistent UI elements can degrade user experience. A well-defined Design Language System is crucial for ensuring a cohesive interface.

Scalability in theming: Traditional Angular Material theming had limitations in runtime customization. Transitioning to CSS variables allowed dynamic, scalable white-labeling.

Efficiency in design system updates: Using SCSS maps and loops streamlined the integration of new design updates, reducing manual intervention.

Reusable and extensible UI components: Developing core UI components in a modular way simplified maintenance and white-labeling without breaking functionality.

Structured approach to UI layout: Implementing a 4-point grid system ensured uniform spacing, enhancing visual alignment and usability.