Introduction
Vue.js Compound Interest Calculator was developed from a personal interest in finance and investing. The goal was to improve on common calculators by making them more intuitive, accessible, and user‑friendly.
Goals & Objectives
The primary objective was to address usability challenges found in the MoneySmart compounding calculator and deliver a superior experience in both UI and functionality.
Original MoneySmart Calculator
Research
The original MoneySmart compounding calculator showed several UX and UI issues:
- Navigation: The page felt cluttered, making the tool harder to find and use.
- Initial view: Elements appeared like inputs but weren’t interactive, causing confusion.
- Inputs: Fields didn’t maximise available width, especially on mobile; clicking outside boxes could still focus inputs.
- Results display: Results looked like a large input field, creating ambiguity.
- Learning curve: Some fields began blank and only signalled required input with red outlines, without clarifying expected data.
These findings guided a set of design assumptions used to drive the redesign.
Design & Ideation
- Aesthetics: Reduced a busy palette to a minimal, brighter scheme to highlight key data.
- UI improvements:
- Full‑width inputs to better use space, especially on mobile.
- Resolved alignment issues across the form and results.
- Reworked results so they no longer resembled an input.
- Pre‑filled data on load to provide context.
- Prevented accidental input focus from outside clicks.
- UX enhancements:
- Stripped non‑essential content to reduce clutter.
- Pre‑filled all inputs with sensible dummy data to lower the learning curve.
- Separated and optimised the results area for easier interpretation.
Product Development & Iteration
1. Prototype creation with Google Sheets
After researching, I used equations from Vertex42 to construct a working MVP in Google Sheets, adjusting syntax to suit Sheets and validating the maths and behaviour.
Setting up calculations in the Google Sheets MVP
Initially I considered equations from thecalculatorsite, but they didn’t account for additional investments.
2. Design initiation
I began with a Bulma template, refining components to match the intended look and feel. Static data was used to simulate the final appearance and confirm layout decisions.
3. Transition to Vue.js
I refreshed Vue fundamentals and implemented two‑way binding for inputs. The spreadsheet equations were integrated and adapted for Vue.js, with outputs verified against the Vertex42 calculator for consistency.
4. Data visualisation
A stacked bar chart (mirroring MoneySmart’s approach) was implemented using vue-chartjs. By combining a static stacked example with a reactive chart pattern, I produced a visualisation that updates based on user inputs, supported by a loop generating per‑year data.
5. Refinements & deployment
With core functionality stable, I refined colour choices and added a disclaimer. Post‑deployment, I identified follow‑ups such as stricter input validation and making the chart refresh without button interaction.
Final version of the Vue calculator
Results
The redesigned Vue Compound Interest Calculator provides a cleaner, faster, and more understandable experience. Notably, the Australian Government’s MoneySmart team later released a Beta version of their calculator that appears to incorporate several of the UX improvements and assumptions explored here.
MoneySmart relaunch (Beta) as of 18/10/23
Reflections
This project blended user‑centred design with iterative development and continuous learning. It reinforced the value of clear assumptions, pragmatic prototyping, and validating behaviour against trusted references.
Source: Compound Interest Calculator