Finance Planning Web Application

Designing a bespoke financial planning tool based around an interactive cashflow modeller.

January - May 2015

Image of two smartphones containing the memorial visuals.

The Setup

A midlands-based agency engaged me as a user interface design consultant for a bespoke retirement planning tool called NowPlan.

This web app was designed for financial advisors to use when consulting with clients about their financial security leading up to and throughout their retirement years.

My role

Senior UI Designer

I played a pivotal role in crafting a seamless and visually appealing user interface for this bespoke retirement planning tool.

My responsibilities spanned design aesthetics, functionality, and user-centricity.

I went beyond creative styling, influencing the app's core user interactions, enhancing the accessibility and insightfulness of retirement planning for financial advisors and clients alike.


  • Collaborating on UI design direction.
  • Creating UI element mood boards.
  • Sketching and wireframing content.
  • High-fidelity visuals.
  • Presenting visuals to stakeholders.
  • Stakeholder Management
  • Iteration and refinement


  • A fully functioning, high-fidelity MVP for realistic user testing sessions and investment.

Project team

  • Product Owner
  • Client Delivery Manager
  • Scrum Master
  • Modelling Developer
  • Business Analyst
  • Senior UI Designer (myself)
  • Angular Developer

Digital Toolset

Image of the Cashflow Modeller in an ipad

The Challenge

The agency set its sights on crafting an MVP that would not merely impress but inspire potential investors, unlocking the gateway to full project realization.

The challenge at hand was nothing short of monumental: to birth a stylistic, user-centric web application capable of empowering users to navigate the complexities of financial planning, from the prelude to retirement and beyond.


As part of an agile team of professionals, I embarked on a transformative mission: shaping the future of retirement planning.

NowPlan, a bespoke web application for financial advisors, held the key to redefining financial security during one's retirement years

As Senior UI Designer, my role transcended aesthetics; it was about curating an interface that seamlessly married form and function, translating complex financial scenarios into accessible insights.

Daily stand-ups and retrospectives punctuated our sprint-driven rhythm, marking progress toward our collective vision.

I laid the groundwork with low-fidelity sketches and digital wireframes and high-fidelity visuals brought them to life.

Collaboration and design driven by secondary research were our guiding stars, culminating in the handoff to the Angular Developer.

Our approach wasn't just about solving a problem; it was a symphony of innovation, weaving a future where retirement was synonymous with confidence and security.


Collaborating onsite within the 7-strong team, I worked through the following 4-stage process.

Process Menu

1. Discovery
  • Researching the Market Need
  • Visual Research
2. Definition
  • The Initial Challenge
3. Design
  • Low Fidelity Wireframes
  • Mid Fidelity Wireframes
  • Iteration to High Fidelity
  • Key Results Deveopment
  • Final Design Concept
4. Delivery
  • Final Deliverables

1. Discovery

Researching the Market Need

Before I joined the project, the client had embarked on a meticulous journey of market research and competitor analysis.

Over a span of six months, they delved deep into understanding the pressing market need for a bespoke retirement planning web application.

Their insights and findings laid the foundation upon which the project would flourish.

The client's commitment to research yielded a wealth of valuable documentation, each piece bearing the essence of their comprehensive studies.

These documents, a testament to their dedication, were a treasure trove of insights that I had the privilege to access and delve into during the project's discovery phase.

This data-driven approach not only set the stage for an informed and purposeful project but also reinforced the client's dedication to creating a solution that would truly address the needs of their target audience.

As I began to digest this extensive research, it became clear that the project was not just about design; it was about responding to a real and significant market need, a need that would drive our collective efforts to deliver a transformative retirement planning tool.

Visual Research

Recognising the monumental task at hand I embarked on a journey of visual research.

It was more than just gathering images; it was about curating inspiration that would breathe life into the components of the application.

I sought out visuals of components such as the following:

  • Sign-in
  • Credit summary dougnut charts
  • Financial charts and graphs
  • Left-hand menu
  • Death notice listings
  • Listing removal
  • Dropdown filter menus
  • Add credit
  • Credit confirmation

With thorough effort, I selected each piece to spark creativity.

These carefully curated visuals found a home on the client's office wall, forming mood boards that housed a world of UI elements, both in light and dark themes.

What made this process truly impactful was the involvement of the client's employees.

I invited them to share their thoughts using a sticky dot voting system and a comments book, transforming the wall into a canvas of collective creativity.

Together with the team, I delved into the results, an engaging and insightful process that ultimately shaped the best user interface design direction.

This collaborative journey was a testament to our commitment to not only meet but exceed the expectations of the project, turning ideas into a visually captivating reality.

Light UI Design Elements
Moodboard containing light UI design elements
Dark UI Design Elements
Moodboard containing dark UI design elements
Mixed Components
Moodboard containing mixed components

2. Definition

The Initial Challenge

Cashflow Modeller

The objective was to develop a core concept for a cashflow modeller tool that would allow users to model, plan and manage their finances prior to, into and throughout their retirement years.

Based on competitor analysis and other secondary research methods (including the visual research mentioned previously), we developed a modular design layout split into sections displaying the following elements in hierarchical order:

  • Key results (before and after cashflow modelling)
  • Cashflow charts (including a legend)
  • Expenditure Priority
  • Timeline
  • Menu of Interactive ‘What Ifs’ icons

The basic idea behind this concept was to afford users the ability to tap and swipe (on mobile) or click and drag (on desktop) icons from a menu of ‘What Ifs’ onto the timeline.

This timeline would span from present day until a time in the future designated by the user.

The What Ifs icons represented different scenarios the user might encounter or instigate during their life over that timeline period, things like:

What if I...

  • Sell a provision
  • Downsize my house
  • Buy a provision
  • Defer state pension
  • Increase or decrease my total expenditure

Once they do this they would be prompted to fill in a very short data capture form for the system to obtain their basic financial details intrinsic to each particular What If scenario.

After entering the data for each What If, the particular chart and key results displayed at the time would adjust to display the remodelled future cashflow.

3. Design

Low Fidelity Wireframes
Sketching to Balsamiq

In the heart of a close partnership with the Business Analyst and the collective wisdom of the team, we embarked on the creative journey of shaping the Cashflow Modeller.

It was not merely a solitary task but a harmonious blend of ideas and discussions, ensuring that every component, layout, and interaction resonated with precision.

Our process was one of continuous refinement.

Layout sketches emerged as the initial seeds of concept, with each iteration reflecting the collective wisdom of our discussions and decisions.

These evolving blueprints guided us to the next stage, where we crafted low-fidelity digital wireframes with great care using Balsamic.

It was a dynamic process, where ideas took shape, and every stroke of design was imbued with the spirit of collaboration, turning our collective vision into tangible, user-centric reality.

Cashflow Modeller Screen
User story 1 solution rationale - image 1
User story 1 solution rationale - image 2
Decision Support Tools
- Risk Suitability

During the project's early wireframing phase, I embarked on a vital task — sketching and refining additional screens essential to the application.

These screens were instrumental in providing users with decision support tools, aiding them in the complex realm of financial data capture.

One noteworthy creation was the Risk Suitability tool, a powerful visual aid designed to vividly convey the varying risk levels associated with the diverse portfolio scenarios generated by the cashflow modeller.

User story 1 solution rationale - image 1
User story 1 solution rationale - image 2

Mid Fidelity Wireframes

Cashflow Modeller -
Charts Design Development

Using the low fidelity wireframes as a starting point and based on the visual research, I developed concepts for the different charts to be displayed on the Cashflow Modeller screen.

These charts included:

  • Gross Income
  • Assets and Liabilities
  • Annuity and Drawdown

As you can see below these concepts included interactive tooltips containing financial data at certain points throughout the charts.

I designed elements such as ‘Market Performance’, ‘Inflation Adjusted’ and ‘Projection Basis’ as radio buttons, although these went through various iterations throughout the wireframing process.

Gross Income Chart
Mid fidelity Gross Income Chart
Initial Visuals & Colour Matching

We spent a considerable amount of time looking at the colour palette for the chart legend.

It was clear that we’d need to use a contemporary, flat colour-scheme.

Initially, I came up with the idea of matching these colours to the What Ifs icons.

However, after much deliberation, we decided, that, although this was a good concept, it would be too complex to achieve and might even confuse some users.

Assets & Liabilities Chart
Mid fidelity Assets and Liabilities Chart
Net Income Chart
Mid fidelity Net Income Chart

Iteration to High Fidelity

Directing our attention to the visuals below, we witness the iterative evolution of the Cashflow Modeller screen's UI design.

With vivid clarity these illustrations depict the transformation of on-screen elements, progressing from their early mid fidelity wireframe stages to more advanced, high fidelity visuals.

Iterations from mid fidelity to high fidelity
Risk Suitability Screen & Interactions

I transformed the initial sketches and Balsamiq low-fidelity wireframes into a refined high-fidelity user interface

This process was marked by a careful integration of the screen within the application's new design framework, ensuring a seamless blend of functionality and visual coherence.

The progression from basic conceptualization to the advanced design underscores a commitment to creating an intuitive and engaging user experience, particularly in assessing financial risks.

Risk Suitability screen high fidelity
Key Results

The visuals below demonstrate the potential display of an overview of Key Results (post-modelling) along with more comprehensive details for each one within a pop-up tooltip device.

Risk Suitability Key Results
Key Facts

Here you can see how the application could potentially display an overview of the Key Facts, again, post modelling, as well as more detailed information for each one in a pop-up tooltip.

Risk Suitability Key Facts

Key Results Development

As seen in the previous visuals for the risk suitability screen, I had developed the key results considerably from those in the mid fidelity wireframes.

Throughout that development phase, from sketching through to digital development, I explored various representations, initially experimenting with pie charts before refining them into the donut chart device showcased below.

Percentage of Target

After re-modelling of the cashflow charts occurs the percentage figure displayed within the chart would adjust to reflect the new financial status.

The coloured stroke around the chart would animate in a clockwise manner to the new percentage position and either an upward or downward arrow would reflect the positive/negative nature.

The aesthetic of this result would be further reinforced by the use of red or green rendering.

Key Results development images
Pop-Up Tooltip

As mentioned in the Key Results section previously, in order for the user to gain a better understanding of their financial position according to the remodelled scenario, I designed a tool-tip device housing more detailed data including the percentage of target chart.

This tooltip would pop-up when the user taps or clicks on each donut chart.

Pop-up tooltip development images

The final design decision was to present the key results in a neutral base grey colour, a hue that prevailed before any cashflow modeling.

Key Results final design

Final Design Concept

Cashflow Modeller Screen

Displayed below is the definitive design concept for the Cashflow Modeller screen, complemented by detailed annotations that emphasize its core elements.

Cashflow Modeller final design
Using The What Ifs Group Menu

The visuals below illustrate how the user activates the What Ifs group menu and interacts with the What Ifs icons in order to affect the Cashflow Modeller.

This is achieved by tapping on and swiping an icon from the scrolling menu onto the time-line canvas.

The user can then tap that icon to reveal and interact with a data capture modal, entering related financial information which, after they tap the green ‘Activate’ button, will remodel the cashflow charts and key results.

By tapping the orange ‘Advanced’ button, they will activate the Decision Support tools menu and decide how they want to progress from there. They can also close this modal by tapping the red ‘Cancel’ button.

Single What If on an icon image
Single What If on an Icon

When the user first swipes a What Ifs icon onto the timeline it appears in a grey colour.

It is only after they have filled in the required information on the data capture modal that it renders in the brand blue colour.

Tapping once on the icon reveals the name of the What If in a red tooltip.

Single What If on an icon image
Several What Ifs on an Icon

The user can add several What Ifs at a single point on the timeline.

Doing this will simply result in the icon bearing the grouped What If symbol and a red circular badge displaying the amount of What Ifs assigned to that time slot.

The user can tap on the icon to reveal a group What Ifs menu for that point on the timeline

Several WhatIfs on an icon image
Accessing all What Ifs within the scroll menu

The user can access all of the What Ifs icons within the bottom menu by tapping on the left and right arrow navigation icons or by swiping the menu left or right

Accessing all the What Ifs in a group image

Finished Concepts Responsive Design

The following visuals provide a clear depiction of how I developed the Cashflow Modeller concept across different screens, ensuring a seamless and responsive user experience.

Several WhatIfs on an icon image
Image 1
Image 2
Image 3
Image 4
Image 3
Image 4
Cashflow Modeller screen on a MacBook

Decision Support Tools

As previously highlighted in this case study, I created concepts for the decision support tool 'Risk Suitability' to enhance the decision-making process while users complete the data capture forms within the Cashflow Modeller.

The visuals below portray this tool, carefully developed within the final user interface design, adapted with elegance for both tablet and smartphone displays.

Risk Suitability
Risk Suitability screen final design
Risk Suitability Screen on a smartphone
Risk Suitability Screen on a smartphone
Risk Suitability Screen on an iPad

I also developed concepts for other decision support tools such as the Pension Planner and Annuity and Drawdown.

Pension Planner
Pension Planner screen final design
Pension Planner - Attitude to Risk
Pension Planner - Custome Plan
Pension Planner - 100% Drawdown
Pension Planner - 100% Drawdown

Register & Sign In

These screens allow the user to register a new account or sign in to their existing account.

Register & Sign In screen on iPad
Pension Planner - Attitude to Risk
Pension Planner - Custome Plan
Pension Planner - 100% Drawdown


Basic Financial Data Capture

The Factfind screens allows the user to enter basic details regarding their current financial status prior to any cashflow modelling using the tool.

Fact Find screen on a smartphone
Pension Planner - Attitude to Risk
Pension Planner - Custome Plan


The dashboard presents summary data on the user's most recent financial modelling scenario.

This screen also displays the key results data depicted here in a slide down drawer when the dashboard is viewed on a smartphone device.

Dashboard screen on an iPhone
Dashboard screen on an iPhone

4. Delivery

Final Deliverables for MVP

The Angular Developer played a pivotal role in shaping the technical layout and structure of the UI design in coded build.

Effective communication allowed us to delve into the technical aspects, ensuring the feasibility and acheivability of each UI design element.

With remarkable efficiency, the Angular Developer initiated the MVP framework early in the design process.

As the design evolved and neared its final form, the integration of precise features seamlessly aligned with the conceptual vision.

Once the definitive designs took shape, the asset handover to the Angular Developer was a seamless and efficient process, ensuring a harmonious transition from design to development.

This collaboration underscored the project's success, combining technical acumen with creative vision.


The MVP that emerged from our collective creative problem-solving efforts served as a powerful showcase of comprehensive functionality, compelling visual design, distinctive stylistic elements, and intuitive decision support tools.

These elements collectively transformed the retirement planning process, rendering it more accessible and effective for both financial advisors and their clients.

Our unwavering commitment and determination reverberated throughout the project, underscoring our dedication to the core objective — crafting an impactful and engaging MVP.

This achievement not only secured the vital investment needed for further development but also won the hearts and minds of new customers and internal stakeholders.

Our collaborative spirit and relentless pursuit of excellence paved the way for a significant milestone in the journey of this application.

Final Solution

Solution icon
Enhanced MVP
  • Comprehensive MVP showcasing enhanced functionality, visual design, stylistic elements, and decision support tools, making retirement planning more accessible and effective.
Creative Problem Solving
  • Successful demonstration of creative problem-solving efforts by the entire team, reinforcing our commitment to achieving the core objective.
Investment & Stakeholder Support
  • The triumphant outcome of securing essential investment and winning the support of internal stakeholders, solidifying the project's path to success.


Effective Collaboration
  • The importance of seamless communication and collaboration among team members for successful project outcomes.
  • The need for a shared understanding of the project's technical aspects and creative vision to enhance cross-functional teamwork.
Iterative Design
  • The value of an iterative design approach, from initial concepts to final prototypes, in refining and improving user experience.
  • The significance of incorporating user feedback and making ongoing adjustments to achieve optimal design solutions.
Stakeholder Management
  • The key role of engaging with stakeholders, both internal and external, in securing essential investment and building support.
  • The power of a compelling MVP in winning the hearts and minds of potential customers and gaining buy-in from project sponsors and investors.

Next Steps

1. User Testing & Refinement
  • Conduct comprehensive user testing sessions with target users to gather feedback and identify areas for improvement in the application.
  • Iterate and refine the application based on user feedback, ensuring a user-centric approach to further enhance the user experience.
2. Development & Scaling
  • Continue with the development phase to build out the full-fledged application based on the MVP's success.
  • Scale the application infrastructure and ensure it can handle a growing user base and increased usage.
3. Marketing & Launch
  • Develop a robust marketing and launch strategy to introduce the application to a wider audience.
  • Create promotional materials, conduct marketing campaigns, and strategise a successful launch to maximise adoption and user engagement.
4. Data Analysis & Optimisation
  • Implement analytics and data tracking tools to monitor user behaviour, gather insights, and make data-driven improvements.
  • Continuously optimise the application's performance, features, and user engagement based on data analysis.
5. Ongoing Support & Maintenance
  • Provide ongoing technical support, bug fixes, and regular updates to ensure the application remains reliable and secure.
  • Offer customer support to address user queries and issues, maintaining a positive user experience.
6. Strategic Partnerships & Expansion
  • Explore opportunities for strategic partnerships or collaborations to expand the application's offerings and reach.
  • Consider potential integration with other financial planning or retirement tools to enhance the user experience.
6. Compliance and Regulations
  • Stay abreast of relevant industry regulations and compliance standards, ensuring the application adheres to legal requirements.
  • Periodically review and update the application to remain in compliance with any changing regulations.
6. Feedback Loops
  • Establish continuous feedback loops with users, gathering input on new features and improvements.
  • Prioritise feature development based on user demand and evolving market needs to keep the application competitive and relevant.