Finnova Investment Cockpit
About the project
Finnova AG is a leading Swiss provider of core banking software, serving private banks, wealth managers, and investment firms across Switzerland and internationally. The Investment Cockpit represents a modern approach to portfolio management, designed specifically for Swiss banking requirements and regulatory compliance.
- Built for Swiss private banks and wealth management firms
- Integrated with Finnova's established core banking ecosystem
- Designed for professional portfolio managers and relationship managers
The application required sophisticated financial modeling capabilities, real-time data processing, and an intuitive interface that could handle complex portfolio structures while maintaining the precision required for institutional wealth management.
- Angular-based modern web application architecture
- Advanced data visualization for portfolio analytics
- Real-time integration with market data and core banking systems
- Responsive design optimized for professional workflows
What we did
My work on the Finnova Investment Cockpit encompassed the complete design and development lifecycle, from initial UI/UX concepts to production deployment within the Finnova ecosystem.
- UI/UX Design System: Created a comprehensive design system with reusable components optimized for financial data visualization and portfolio management workflows
- Portfolio Analytics Dashboard: Designed and implemented advanced data visualization components for portfolio performance, asset allocation, and risk metrics analysis
- Angular Development: Built a modern, responsive web application using Angular framework with TypeScript for type-safe financial calculations
The technical implementation focused on creating a seamless integration with Finnova's core banking infrastructure while delivering an intuitive user experience for portfolio managers.
- Real-time Data Integration: Implemented live data feeds from Finnova core banking systems for up-to-date portfolio valuations and market data
- Portfolio Rebalancing Tools: Developed sophisticated algorithms and interfaces for portfolio optimization and rebalancing recommendations
- Configurable Reporting: Created flexible reporting system allowing banks to customize portfolio reports for their specific client requirements
Reactive Store
Angular 2 - 16 was based on RxJS Observables. The app was initially based on the NgRx store approach. This worked well for some types of applications, but it quickly felt clunky in our application. In response to a slowdown in velocity and challenges writing test coverage. I championed a more reactive approach. We evaluated the Redux way, and I concluded that MobX was the best fit.
- Simple conceptual model
- Central definition of derived state / computed properties
- Low boilerplate
We ended up with test improvements and greater clarity. Today the soltuion should be based on Signals, which is the modern reactive solution for Angular.
Legacy Oracle Context vs Cloud
The Backend is ultimately an Oracle On-Prem Solution running a Schema refined over decades and holding decades of banking data. Finnova created an API layer to the core banking engine, which our App interfaced. Our solution created a traditional SpringBoot App running against the Core Banking API to translate and cache data to provide the performance profile required for our App. Rather than optimise caching HTTP requests, it cached response values in the midtier across responses at a more granular level. The deployment was done with a simple set of containers running on Kubernetes, configured with OpenShift. It included Frontend, Midtier, Prometheus, Grafana, Jenkins to provide a standardised rollout approach across client banks. The deployment is done on a mixture of private cloud and on premise.
The DTO’s in the midtier were compiled along with the API to a frontend TypeScript library. I picked this due to its rich mapping options. When translating between languages it’s important not to loose expressivity, and making it feel natural to the language. Mapping types well from Java DTO to TypeScript enables coding the client without switching mental state.
On the Java side we used Lombok @Data annotations, which today would probably be Java Records.