HSI

BaerHaviour – Capturing and Interpreting User Behaviour: Towards Better Product Development Through Data

Initial situation

Wealth Navigator (WN) is an internal FinTech tool at Julius Baer, designed to automate compliance tasks and generate investment strategies for Relationship Managers, Assistant Relationship Managers, and Investment Advisors. While its predecessor, DiAS, improved productivity, it lacked integrated tracking and analytics, making it difficult to understand how users interacted with the system. This limited the ability to evaluate feature usage, identify pain points, and align development with user needs. With a globally distributed user base, direct interviews and surveys are impractical, and development has relied on expert-driven rather than data-driven insights.

WN aims to modernise the user experience but faces similar limitations unless mechanisms for capturing and analysing user behaviour are implemented. The absence of structured tracking results in limited insights into user behaviour, feature adoption, and workflow effectiveness, making it hard to identify usability issues or measure the value of features. The system’s micro-frontend architecture and diverse user base further complicate the identification of common workflows and friction points.

Problem statement / Project goal

This bachelor thesis addresses the need for greater visibility into user interactions with WN. The goal is to develop a technical proof-of-concept (PoC) solution called BaerHaviour, enabling product managers and stakeholders to gain actionable insights into user behaviour. The project establishes an architectural foundation for tracking, processing, and visualising behavioural data, and includes a complementary Figma prototype to explore how such data can be presented in a clear, decision-oriented interface. The PoC and prototype focus on two key user journeys: the Modular Offering Proposal Journey and the New Advisory Session Journey.

The main research questions are:

  • Data Collection: What are the most relevant user behaviour data points for assessing how well WN supports users, and how can these be captured?
  • Data Processing and Structuring: How can methods for processing and structuring captured data be adapted to provide actionable insights?
  • Information Visualisation: How can user interaction data be visualised to support stakeholder decision-making?

The methodology combines stakeholder interviews, literature review, technical exploration, and prototyping. The solution design defines the metrics catalogue, information architecture, and data handling approach, leading to the implementation of the BaerHaviour PoC and the Figma prototype. Usability testing and stakeholder validation support the results and recommendations.

Dashboard
Session Metrics
Journey Metrics
Drilldown Sessions
Session with Timeline
Figma Wealth Navigator Insights
Figma User Activity Table
Figma User Details
Figma Session Details
Figma Journey Details

Solution developed and its benefits

The BaerHaviour solution consists of a technical proof-of-concept (PoC) and a UX/UI concept. The PoC demonstrates a scalable, modular architecture for capturing, processing, and visualising user interaction data within WN. The UX/UI concept, developed as a Figma prototype, explores how behavioural insights can be presented in a user-friendly, decision-oriented interface.

  • Tracking Approach: A custom, framework-agnostic tracking library (baer-haviour) was developed as an npm package. It captures a wide range of user interactions (clicks, navigation, API performance, validation errors, and custom events) across React and Angular components. The tracker is modular, supports scoped tagging, Shadow DOM, and configuration-based extensibility. Data is sent asynchronously via the Beacon API for minimal performance impact.
  • Backend Processing Pipeline: Captured events are validated, enriched, and aggregated into Sub-Journeys and Composite Journeys using configurable patterns. Aggregated and raw data are stored in a relational schema, supporting traceability and flexible analytics. Aggregation is decoupled from real-time operations for performance and exposed via API endpoints.
  • Frontend Architecture: The Angular 18 frontend uses a modular, widget-based dashboard architecture with feature-based components and scalable state management (NgRx). Routing is lazy-loaded for performance. Widgets can be grouped and extended as new insights are added.
  • UX/UI Concept: The Figma prototype aligns with Julius Baer’s design system and focuses on usability. It uses high-level overviews, interactive visualisations, progressive disclosure, reusable layouts, and clear navigation. Usability testing and stakeholder validation confirmed the interface is intuitive and supports decision-making.

Stakeholder validation with five participants confirmed the solution’s practical relevance and usefulness. The metrics and visualisations were rated as helpful and significantly more useful than previous ad-hoc methods. The approach enables a shift from reactive to proactive identification of UX and workflow issues.

Key terms

  • User Behaviour AnalyticsTracking and analysing user interactions
  • UX/UI DesignFigma prototype, usability, decision support
  • Frontend TechnologiesAngular, React, Micro-Frontend (MFE Architecture), NPM Library, Beacon API
  • Backend Technologies.NET Core API (C#), MSSQL Database
  • Data ProcessingEvent validation, enrichment, aggregation
  • Financial TechnologyWealth Navigator, Julius Baer

Customer

Figma User Details

Giuliano Bana, Solution Architect

Julius Baer Bank

Hohlstrasse 602

8048 Zürich

zum Unternehmen

Team

  • Larissa Martins Sequeira
  • Marco Ruch

Advisors

  • Prof. Martin Kropp
  • Fabian Affolter