top of page

Pension Dashboard

Web app Design 

Enhancing Retirement Planning for Enhanced Security and Flexibility


My Role

Product Designer

I was part of a team of 2 that designed the entire project from start to finish.


5 weeks




Desktop Web app

Style=fill, Model=13in M1 Pro.png

In collaboration with Pension Bar, our team embarked on a transformative project aimed at revolutionizing retirement planning for individuals by combining security and flex accounts. The project was developed for presentation to an undisclosed American company, with a primary focus on providing users with heightened security and flexibility in their retirement planning journey.


Project Overview


Due to the sensitivity of the data involved, we are unable to disclose the name of the client, and for reference purposes, we refer to it as "Pensionkasse".


1. Flow Complexity

Creating a simple flow for users to follow, involving streamlining the user journey to minimize complexity and maximize clarity.

2. Complexity of Financial Education

Educating users about the foundations of retirement planning, including comprehensive retirement planning tools without overwhelming users with complex financial data.

3. Decision-Making Complexity

Providing users with decision-making tools such as scenario comparisons and retirement income customization while maintaining simplicity of webapp.

  • Discovery Workshop

  • Design Concepts

  • Problem Statement

  • User Personas

  • User Flow Diagrams

  • Wireframing

  • Iterations

  • Mockups

  • Next step

Arrow 2.png
Arrow 2.png
Arrow 2.png

Design Process

Group 34153.png
Arrow 2.png


Design Concept

We were tasked with creating designs based on the design concept provided by Pension Bar for the retirement planning web app. This concept comprises three primary pages: "Today's Balance," "Retirement Income," and "Conversion."

Today's Balance

  • Create a clear and simple interface to display users' current balances in real-time, emphasizing clarity and simplicity

  • Design the interface with layered information to build a strong foundation for user understanding.

Frame 57797.png
Group 57770.png

Retirement Income

  • Illustrates the transition from retirement savings to retirement income, in a single page. 

  • Employs educational tooltips and information boxes to explain complex financial concepts and retirement planning strategies.

Balance Conversion

  • Enables users to adjust retirement income preferences by converting account balances.

  • Prioritizes user control and flexibility with dynamic sliders and input fields.

  • Provides real-time updates on projected retirement income based on user input.

Frame 57799.png



Sarah Davis  |  35

Young Businesswoman

Emily Johnson, a 35-year-old Marketing Manager earning $75,000 annually at a 1000-employee company, seeks a user-friendly platform to understand pension options and make informed decisions aligned with her retirement goals.

  • Understand pension options: Seeking clarity on available plans, contributions, and benefits.

  • Engage with educational content: Prefers interactive gamified materials to learn about pensions.

  • Plan for the future: Aiming for financial stability and considering working longer for additional benefits.

Pain Points
  • Complexity of pension plans: Finds intricacies confusing and overwhelming.

  • Limited engagement with traditional pension materials: Prefers engaging and interactive presentation of information.

User Flow

The initial user flow outlined below underwent substantial revisions throughout the project lifecycle.

UX FLOW 2 (work in progress).png


Wireframe Sketches


UI Elements Iteration

Certain UI elements, such as sliders, milestone flags, and insight boxes, were iterated multiple times throughout the interface design process.

Insight Box
Group 57788.png
Group 57791 (1).png

Style Guide

Font choices and visual elements adjusted to align with the client's existing branding.

Group 210 (2).png


Design Iterations

For the design iterations, we focused on refining five main features of the app, ensuring optimal usability and user engagement:


Today's Balance


Retirement Balance


Balance Conversion


Leaving Job Early


Scenario Comparison

Initial flow

In the initial flow, Today's Balance and Retirement were consolidated onto a single page, followed by rest of the pages. This approach proved problematic as the flow became lengthy for users. The issue stemmed from the overwhelming amount of information presented at once.

Today's Balance + Retirement Balance

Balance Conversion

Leaving Job Ealy

Scenario Comparison

Iteration #1

Primary Flow

Today's Balance

Retirement Balance

Balance Conversion

Optional Flow

Leaving Job Ealy

Scenario Comparison

Today's Balance and Retirement were separated, and advanced functions like Leaving Job Early and Scenario Comparison became optional. Although this iteration improved user experience however the client highlighted that the Conversion page was  underutilized, especially by early-career users.

Iteration #2

Primary Flow

Retirement Balance

Today's Balance

Optional Flow

Leaving Job Ealy

Scenario Comparison

Balance Conversion

The final flow streamlined the process by prioritizing Today's Balance and Retirement Balance, followed by Account Summary/Next Step. Optional functions such as Leaving Job Early, Balance Conversion, or Scenario Comparison were made easily accessible. This approach enhanced user flexibility and control over their retirement journey.

Today's Balance

The initial design of the first page, Today's Balance, underwent simplification to prioritize the most essential elements, ensuring clarity and ease of use for users.

Initial Design
Another Message Box Option.png
Final Design

Retirement Balance

In the initial design, the balances were arranged in a vertical layout that lacked clarity. To improve user comprehension, we revised the layout, opting to prominently display retirement income on this page instead of leaving job early. We also enhanced clarity by incorporating icons and colors, while adjusting element sizes. 

Initial Design
Initial Page – Retirement Selected.png
Final Design
30079 (1).png

Balance Conversion

The initial slider lacking precision and clarity. We refined the design by narrowing the slider. Additionally, we introduced consistent icons for improved visual coherence and expanded the accompanying text to enhance user comprehension of the conversion process.

Initial Design
Flex & Secure Conversion.png
Final Design

Leaving Job Early

Leaving job early has its own dedicated page instead of only a section within a single page. Additionally, it now includes a comparison feature, illustrating how much the user will receive at a specific time compared to their retirement income.

Initial Design
Initial Page – Leave Job Selected (Details Open).png
Final Design

Hand-off page

In the final design, users can access comprehensive features like Balance Conversion, Leaving Job, and Scenario Comparison to view updated results. Additionally, they have the option to access their portal for further actions.

Initial Design
Final Design
30080 (2).png


Final  Design

The project solely focused on wireframe development without creating a prototype.

Macbook Pro.png

Checking Balances

Upon app onboarding, the journey begins with today's balance, followed by retirement savings.


Users can adjust the age slider to instantly visualize retirement savings and income. Depending on the selected age, users unlock benefits.


For instance, retiring after 60 entitles users to medical benefits.

Balance Conversion

Balance conversion is a feature within the advanced function menu, enabling users to customize the lump sum and income they receive at retirement.

Macbook Pro-1.png

On the page, users can view their projected retirement balances for both income and lump sum options.


User can adjust the slider to tilt towards either more security or more flexibility to observe the corresponding changes instantly.

Style=fill, Model=13in M1 Pro (1).png

Leaving Job Early

Based on data, we  figured  that approximately 30%

of users opt to leave their jobs earlier than retirement age to access funds.


Upon selecting a departure date using the slider, they can see their balance at the early departure date.

Desktop copy.png

Also, user can see how their balances change if it stays in the plan till retirement. This functionality empowers users to understand the impact of early withdrawal decisions on their finances and retirement plans.

Scenario Comparison

Users can compare various scenarios, including retirement income, retirement balance, or the balance upon leaving a job. 


users can compare scenarios by viewing and analyzing a base scenario along with up to three different ones.


Users have the option to download or save the data within the app's account summary.

In Summary 

The task involved designing a retirement planning dashboard for Pension Bar, integrating security and flex accounts to enhance retirement security and flexibility.


We then created wireframes, refining them based on feedback and usability testing. Collaboration with the client and continuous iteration ensured alignment with project goals and user expectations.


The final product is a user-friendly retirement planning dashboard featuring Today's Balance, Retirement Projection, Account Summary, Conversion Page, Leave Job, and Scenario Comparison. 

Pension Web app
bottom of page