Money Advice Service. Pension calculator.

The Money Advice Service had seen an increase in mobile traffic. And had built a responsive website. The pension calculator was the first product to be built following a mobile-first approach.

The goal for the first iteration of the pension calculator. Was to highlight any shortfall in a user’s state and private pensions against their target retirement income. And encourage users to take action to reduce any shortfall.

  1. Methodology
  2. Discovery
  3. Sketches
  4. Wireframes
  5. Prototypes
  6. Testing
  7. Iterating
  8. Results


Following an Agile process the team wrote user stories together. Had daily stand ups. And retrospectives every 2 weeks. As the User Experience Designer I worked a sprint ahead.


Working with a pensions subject matter expert. The team carried out an audit of the existing pension calculator. We also did a competitor analysis of existing pension calculators.

Internal and industry research suggested pension products and terminology confuse people. This confusion was an opportunity to design a simple product. With the goal of highlighting a users shortfall.


Exploring the use of a simple chart to highlight a shortfall in retirement income.

Initial sketches. Exploring potential use of data visualisation.



  1. Layout options for a simple chart to highlight any shortfall.
  2. Pension pot breakdown layout. Showing contributions that make up a users pension pot.
  3. Layout options for displaying probability of pension pot size. Including monetary values, percentage and a visual representation of total pot sizes.

Paper prototype

Used for early user acceptance testing. Allowing the team to iterate on layout and flow quickly.

HTML Smartphone prototype

Built using Axure. Enabled further user acceptance testing. Helped team members and stakeholders get a feel for the product. Before developers committed to writing code.

Smartphone prototype

The prototype contained

  • Basic functionality
  • Presentation of horizontal chart
  • Early version of copy
  • Minimal design


Gorilla testing took place on an ad hoc basis. Lab based user acceptance testing took place every 2 weeks.

Summary of results of early prototype testing
Tested Results
Action plan
  • Need to present private, state pension and target income chart within the action plan
  • Need for simplified call to action
  • Confusing number of options as to what the user should do next
  • The phrasing of the copy in the 1st person felt patronising to some users
  • The importance of descriptive headings
  • The need for concise body copy
  • Highlighted ambiguity around input labels
  • Too much copy
  • Small percentage of participants read it
Target income Approximately 70% of users understood the need to reduce any shortfall. Matching state pension and pension pots to their target income.
Pension pots Approximately 50% of people knew the value of their existing pension pots.
Likely retirement income 5 monetary values on the screen is a lot of information for users to process.
Adjust likely retirement income Not immediately obvious to users that they could adjust previously entered figures.


Analytics indicated high user drop off on the “Adjust likely retirement income” screen. The team felt this screen was crucial in the pension calculator journey. And had hoped it would have reasonable user engagement. This screen became the focus of our iterations.


Display inputs and already entered figures in an accordion.

Accordion prototype


If a user can see all of their previously entered figures. And is able to adjust the figures while seeing the results of the adjustment. They are more likely to interact with the inputs.


Previously entered figures displayed in accordion section header. The functionality to adjust figures presented within the accordion sections. Any adjustments made by the user communicated by

  • Upwards indicator
  • Downwards indicator
  • Dash indicating no change has taken place
  • Inappropriate input highlighted in red

Hiding functionality within the accordion sections. Gives the screen a clean, focused feel. Making it less confusing for a user to interact with.

Single screen

Present inputs in a simplified single scrolling page.

Single screen prototype


Presenting inputs vertically. With concise content and simplified instructional copy will reduce cognitive load for the user. Making a user more likely to engage with the inputs.


The layout would present a single section of inputs on screen at any one time. Making the interaction more focused. The following added focus to interactions

  • Concise copy
  • Improved toggle functionality for monetary and percentage inputs
  • Labels for minimum and maximum slider values

The prototype was built to be responsive.


The process allowed us to test early and often. This meant the team had opportunities to learn throughout the process. Resulting in a product that met its goal.

The prototypes helped the team get feedback at design show and tells. And company wide showcases. They demonstrated the direction the product was taking. Allowing for feedback from the wider business.

The prototypes provided context for copywriters. Enabling them to write focused copy. Finally the prototypes educated stakeholders on the process of a building a product using a mobile-first approach within an Agile environment.