Retirement Feature

Financial Applicaton

Roles: User Interface Design | Front End Development

Disclaimer: To disguise the identity of the digital product and service provider I will be referring to it as Fundwise.


Fundwise is a financial management tool that provides a central location for the aggregation of data so that users can view their entire financial life in one place.

Project Rationale

In order for users to adjust their pension contributions and or seek financial advice within the workplace solution, they have to contact the company administrative team. Not all companies provide a financial adviser and call times can be long and costly. Instead, the idea is to develop a feature that allows the user to make informed decisions without the dependency of a financial adviser or the standard process.


Working with the development team I was able to collate and interrogate user data to gain insight into the user types, traits and behaviours. This information was used to generate system personas, which provided a baseline for the design and styling of visual elements and interactions. Market research was conducted to understand what features competitor products were offering, their level of usability and how they were incentivised.


  • Responsive designs for mobile and tablet
  • A visual for the cost of delay
  • Creation of assets, icons and visual elements

The business had already loosely defined desktop wire-frames to suggest the ideal layout, information hierarchy and the order of data capture.

Early mobile and tablet wireframes

Custom Views

Research showed that the majority of the app’s users were men in their 50s, however, one of the business goals was to try and encourage a younger audience to start thinking about their retirement early, so they introduced a balloon concept that would rise and fall in line with fund changes. To ensure existing users were not alienated I designed alternative funding views that allow the user to view the data in a way that suits them. Data fields were also designed to be completed in multiple ways, providing solutions for device limitations and for those users who prefer to enter precise values.

Retirement Value

This value is the very reason the user is completing the process; to assess, evaluate and action anything that can potentially increase this final figure, making it the most important piece of information on the page. In earlier concepts this figure was much larger and in the alternative view, rested across the central part of the hot air balloon in order to make it prominent. Unfortunately, this idea was later rejected in favour of using the space for brand specific logos. However, to ensure the figure is always visible it was developed to be sticky, allowing the user to view the impact of adjustments made to their investments and contributions where ever they are on the page.

Visual Design

Concepts went through several iterations before settling on the final design, these addressed accessibility issues, layout, the introduction of a call to action button, a stepped approach and the overall look and feel. The balloon and background graphics were designed to sit seamlessly amongst the interface. The cost of delay was represented by a liquid piggy bank that would decrease in volume when contributions were delayed; dynamic values and symbols were used to help coach the user to act sooner rather than later.


Fundwise is a multi award winning financial management tool, which brings together all of a client's financial information in one place, including adviser managed products alongside personal financial information and documents. This financial application currently works on a B2B model, offering clients the ability to customise the look and feel using their own company branding for a fully integrated solution.