FPR deelnemersportaal

Navigating the future of pensions with clarity

Client

Blue Sky Group

Period

March 2026 - present

Tools

Figma

Project type

Sales pitch

Project Description

I led the design for the FPR participant portal at Blue Sky Group, a major player in the Dutch pension sector. The project focused on transforming a complex financial environment into a smooth, user-friendly digital experience. This transition was particularly vital due to the new Dutch pension act (WTP), which demands greater transparency and clearer communication for every participant. Throughout the process, I worked closely with stakeholders to balance strict regulatory requirements with a fresh, modern aesthetic. The result is a portal that provides participants with a real sense of security and real-time financial regie over their future.

Introduction

As Design Lead, I directed the UX/UI strategy for an integrated pension portal created for Blue Sky Group (BSG), the pension administrator for KLM employees. Designed to align with the Netherlands' New Pension Act (Wtp) and tailored to the Flexible Premium Scheme (FPR), the product was built as a scalable white-label solution using the 'Delftsche' Design System.

The transition to the new pension framework presented complex decisions for KLM employees, with critical touchpoints like the risk profile assessment posing high friction in a heavily regulated setting. By stripping away complexity and focusing on visual clarity, the portal transforms dense financial projections into an accessible experience, successfully bridging the gap between complex regulatory rules and user autonomy to enable confident, informed decisions about their financial future.

The UX Approach

To transform confusion into clarity, I focused on reducing cognitive load across key decision flows while maintaining system scalability:

Frictionless Journeys: Redesigned key interaction points, converting technical regulatory requirements into self-explanatory, accessible visual flows.
White-Label & Systemic Consistency: Leveraged the 'Delftsche' Design System to deliver a flexible white-label architecture, ensuring seamless brand adaptiveness without compromising usability.
Scenario Visualization: Translated intricate financial scenarios and market fluctuations into dynamic, easily digestible visual interfaces.
Empowering Choice Architecture: Designed tools that allow participants to actively manage their investment risk, explore potential outcomes, and set personal retirement expectations.

Briefing

With the transition to the new Dutch pension framework (Wtp), employees are moving to a flexible premium scheme (FPR), requiring a new pension portal built from the ground up. The primary objective is to streamline high-friction decision points, such as the complex risk profile assessment, and transform dense financial projections into clear, accessible flows. By replacing regulatory complexity with self-explanatory visual interfaces, the portal must bridge the gap between strict compliance and user autonomy, empowering participants to confidently manage their investment risks and retirement expectations.

My responsibilities

Requirements & Business goals

Translating technology, goals, and needs into product requirements while ensuring effective integration and alignment with Wtp regulations.

Design Systems

Creating customized components with fonts, colors, button states, and other UI elements for the 'Delftsche' DS.

Multidisciplinary collaboration

The end result has been accomplished through collaborative efforts and the shared expertise of multiple specialists.

Design with A.I.

AI facilitates rapid design iterations and produces efficient results.

Accessibility (WCAG)

We emphasized accessibility standards during our product development to create a design that is inclusive for everyone.

Deliverables

Develop wireframes, high-fidelity designs, and prototypes for stakeholder presentations.

Prototype video

This interactive prototype demonstrates a complete participant journey within the new Wtp pension portal built for Blue Sky Group (BSG) using the Delftsche Design System (powered by TJIP). The flow simulates an end-to-end user scenario for participant Joost van Veen as he inspects his retirement standing and updates his risk strategy:

1. Dashboard (Overzicht): Upon logging in, Joost lands on his primary overview page, displaying a high-level summary of his total account value (€48,350), expected monthly pension (€1,840), monthly contribution (€387), and interactive portfolio performance growth (+6.4% YTD).
2. Pension Projection (Mijn pensioen): Navigating to the pension projection page, Joost reviews his expected retirement capital modeled under official Wtp guidelines. He explores probabilistic scenarios—Pessimistic (€1,120/mo), Neutral (€1,840/mo), and Optimistic (€2,780/mo)—alongside an interactive multi-year capital trajectory graph up to age 67.
3. Portfolio Breakdown (Portefeuille): Moving to the portfolio screen, he inspects his current asset distribution (Equities 68%, Bonds 18%, Real Estate 8%, Alternatives 4%, Cash 2%) via an interactive donut chart, complemented by institutional-grade risk indicators (Volatility, Sharpe Ratio, Max Drawdown).
4. Fund Explorer (Beleggingen): On the investments page, Joost reviews all 8 active funds receiving his contributions. He tests the layout flexibility by toggling between the visual Grid View (featuring mini sparkline trends) and the data-dense List View (showing explicit risk tags and allocation bars).
5. Risk Assessment Flow & Profile Update: From the prominent call-to-action banner, Joost initiates his 2026 Risk Profile Assessment (risicobereidheidsvragen). By answering a guided questionnaire measuring his risk appetite, the system determines he is willing to accept higher market volatility. He approves updating his profile to Aggressive (Offensief) and is seamlessly redirected back to his updated investments dashboard.

Key functionalities

Overview (Dashboard)

Establish immediate trust, reduce financial anxiety, and surface critical mandatory tasks without overwhelming the user.

UX & Interaction Details:

Top-Level KPI Architecture: High-contrast summary cards present essential figures first: Total Account Value (€48.350), Expected Monthly Pension (€1.840), Monthly Contribution (€387), and Time Horizon (28 years until retirement).
Interactive Trajectory Graph: Replaces static balance tables with an interactive line chart tracking capital growth over time. Time-range toggles (3M, 6M, 1Y, 3Y, All) allow users to evaluate performance across both short-term fluctuations and long-term trends.
Prioritized Action Center ("Actie vereist"): Uses an intent-driven notification system to highlight pending regulatory tasks. A prominent alert card draws immediate attention to setting the 2026 risk profile, ensuring compliance while reducing drop-off rates.

My pension

Demystify future retirement outlooks under the Wtp regulation by shifting user mindset from fixed promises to probabilistic scenarios.

UX & Interaction Details:

Three-Scenario Projection Cards: Clearly displays expected outcomes across Pessimistic (€1.120/mo), Expected (€1.840/mo), and Optimistic (€2.780/mo) market conditions, helping participants understand potential risks and upsides.
Dynamic Growth Projection Chart: Visualizes long-term capital accumulation up to age 67. Hover interactions reveal precise scenario breakdowns at any given age (e.g., age 58), giving participants instant context.
Milestone Progression ("Uw pensioenreis"): Breaks down a multi-decade journey into digestible milestones (ages 45, 55, 60, and 67) to show how capital evolves as retirement approaches.
Integrated Self-Service (FAQ): Accordion elements addressing common Wtp and FPR questions are embedded directly into the page flow, reducing support ticket volume and preventing context switching.

Portfolio

Provide full transparency into underlying assets, fund distributions, and risk parameters for more financially engaged participants.

UX & Interaction Details:

Performance Overview Bar: Highlights total portfolio value, YTD growth (+7.6% vs. benchmark), total deposits (€32.140), and net investment returns (+50.4%), clearly demonstrating the value of long-term compounding.
Interactive Asset Allocation Chart: An interactive donut chart categorizes asset classes (Equities, Bonds, Real Estate, Alternatives, Cash). Hover states instantly display precise euro amounts and portfolio percentages.
Risk & Volatility Indicators: Translates institutional-grade risk metrics (Volatility, Sharpe Ratio, Max Drawdown, Beta) into clean, digestible data blocks with informative tooltips, making complex financial risk digestible for non-experts.

1/2

Investments

The Investments (Beleggingen) view provides full transparency into active funds within the Flexible Premium Scheme (FPR). The core UX goal is accommodating different user mental models by offering dual view modes (Grid vs. List), allowing participants to inspect returns, costs (TER), ESG ratings, and risk levels at their preferred detail level.

Portfolio Analytics Header:

Core KPIs: High-level cards display Total Funds (8), Weighted 1-Year Return (+9.8%), Average Expense Ratio (0.37% TER), and ESG Score (78/100).
Control Bar: Features instant search (by name/ISIN), category pills (Aandelen, Obligaties, Vastgoed, Cash), and a layout toggle (Grid/List).

Grid View (Visual & Analytical Exploration)

Designed for visual comparison and pattern recognition across asset classes.

Key Visual Features:

Individual Sparkline Trends: Each fund card features a clean mini-trend graph showing price performance over time, giving immediate feedback on market trajectories.
Quick-Scan Metrics: Highlights essential metrics for each holding: Current Value (€), Allocation (%), YTD Return (%), 1-Year Return (%), and a subtle color-coded risk indicator icon.
Category Badging: Color-coded tags visually separate asset classes (e.g., green for Aandelen, blue for Obligaties, orange for Vastgoed/Alternatief).

List View (Data-Dense & Comparative Scan)

Tailored for power users and detailed financial scanning, optimizing data density and vertical alignment.

Key Visual Features:

Explicit Risk Labeling: Replaces sparkline visuals with explicit risk tags (e.g., Hoog risico, Gemiddeld risico, Laag risico, Zeer laag risico) for immediate clarity on volatility exposure.
Visual Allocation Bars: Features dynamic progress bars beneath each row, visually representing allocation percentage relative to the total portfolio size.
Scannable Row Hierarchy: Standardizes data columns (Value, Allocation, YTD, 1-Year) across all holdings, enabling fast line-by-line comparison across the entire fund mix.

1/3

Risk Profile Assessment

The Risk Profile Assessment Flow (Risicobereidheidsvragen) addresses one of the highest-friction compliance requirements under the New Pension Act (Wtp). The primary UX goal was to transform a mandatory, legally dry questionnaire into a guided, reassuring digital experience that empowers participants to align their investment choices with their personal risk appetite.

1. Onboarding & Expectation Setting (Introduction Screen)

Minimizes drop-off rates by setting clear expectations regarding time investment and structure before the user starts.

Key Features:

Scope & Time Estimate: Clearly communicates that the questionnaire consists of 10 questions and takes roughly 5 minutes.
Current Status Indicator: Displays the active profile (Neutraal, set on March 12, 2026) to establish a baseline.
Categorized Breakdown: Outlines the four structured themes (Persoonlijke situatie, Beleggingskennis, Risicobereidheid, and Doelstelling) so participants know what to expect.
Regulatory Disclaimer: A distinct callout box clarifies that results serve as a personalized recommendation before final confirmation.

2. Guided Assessment (Question Screen)

Reduces cognitive overload by presenting questions one at a time, using relatable hypothetical scenarios rather than complex financial jargon.

Key Features:

Progress Tracking: Combines a top step indicator (Vraag 6 van 10) with a real-time running score bar (Huidige risicoscore: 33/120) to provide continuous visual feedback.
Relatable Scenario Testing: Evaluates emotional reactions to market downturns (e.g., a sudden 25% portfolio drop) using clear, humanized option cards with supportive icons/emojis.
Single-Select Interaction: Large, accessible radio cards improve clickability and reduce visual clutter across desktop and mobile views.

3. Confirmation & Impact Analysis (Confirmation Screen)

Ensures informed consent by highlighting the direct consequences of changing profiles before submission.

Key Features:

Clear Outcome Badge: Prominently highlights the newly calculated profile (Offensief) with a positive status badge.
Before-and-After Comparison Table: Displays a clear side-by-side summary detailing changes in risk score (64/120), expected annual returns (7-9% p.j.), maximum expected loss (~30% in 1 year), and effective date.
Visual Asset Allocation Bar: Immediately visualizes how the new profile shifts underlying assets (75% Equities, 12% Bonds, 8% Real Estate, 4% Alternatives, 1% Cash).
Rebalancing Disclosure & Confirmation: Outlines execution terms (rebalancing within 3 business days, annual change limits) right above the final Definitief bevestigen action button.