Introduction
Vue.JS Compound Interest Calculator was developed out of a personal interest in finance and investment. The motivation was to enhance existing financial tools, making them more intuitive and user-friendly.
Goals & Objectives
The primary objective was to address the challenges faced by users of the Money Smart compounding calculator and deliver a superior user experience, both in terms of UI and functionality.
Research
The original Money Smart compounding calculator had several UI and UX issues:
- Navigation: The cluttered page made it challenging to locate and navigate to the tool.
- Initial View: The tool's initial presentation was confusing, with some elements resembling input fields but not functioning as such.
- Inputs: Input fields did not maximise the available space, especially noticeable on mobile views. Also, some input fields could be selected even when clicking outside the box.
- Results Display: The results section appeared as a large input field, causing confusion.
- Learning Curve: The tool had a slight learning curve, with certain fields starting blank and only showing red outlines to indicate necessary inputs. There was a lack of clarity on the type of data that needed to be entered.These challenges were highlighted through analysis and testing. A list of assumptions was then developed to guide the redesign process.
Design & Ideation
To address the identified challenges, the following solutions were ideated and implemented:
- Aesthetics: The original colour palette was busy and not complementary. A minimal and brighter colour palette was adopted to reduce visual disruption and highlight key data points.
- UI Improvements:
- Input fields were redesigned to be full-width, making better use of the available space.
- Alignment issues were resolved.
- The design of the results section was modified to ensure it didn't resemble an input field.
- The data was pre-filled on page load to provide context to the user.
- Clicking outside input boxes was restricted to prevent unintended selections.
- UX Enhancements:
- Clutter was reduced by stripping away unnecessary text and information, leaving only the essential tool.
- All input fields were pre-filled with dummy data, reducing the tool's learning curve.
- A separate, optimised section was created for the results, making it more prominent and easy to interpret.Each of these design choices was tested to ensure they addressed the original challenges effectively and enhanced the overall user experience.
Product Development & Iteration
Creating a tool that would seamlessly cater to users required a thorough and iterative approach. The development process was broken down into stages, each focusing on a specific facet of the project:
1. Prototype Creation with Google Sheets
Understanding and replicating the required equations was the first step. After researching, I discovered the equations I needed from Vertex42. Utilising these, I constructed a working prototype in Google Sheets, adjusting the equation syntax for accuracy. This prototype served as an MVP (Minimum Viable Product) to validate the basic functionality and the underlying math.
Note: Initially, I considered using the equations from thecalculatorsite, but it lacked the capability to account for additional investments.
2. Design Initiation
Armed with the MVP, the next phase was to visualise the tool. I began by adopting a Bulma template found online. The elements were refined to meet the intended design vision. Static dummy data was introduced to simulate the final appearance, ensuring the design was both functional and aesthetically pleasing.
3. Transition to Vue.JS
To transform the design into a dynamic tool, I turned to Vue.JS. I refreshed my knowledge with a free Scrimba tutorial, which I find to be an efficient learning platform. The primary focus was establishing two-way binding for inputs, a crucial feature for user interaction. I then integrated the equations from the Google Sheets prototype, modifying the syntax to suit the Vue.JS environment. It was paramount that the data behaved consistently with the Vertex42 compound interest calculator, ensuring the tool's reliability.
4. Data Visualisation
With the data components in place, the next challenge was its visual representation. Deciding on the right graph type was essential for user comprehension. I opted for a stacked bar chart, mirroring the style of the Money Smart calculator. Vue-chartjs was the library of choice, as I found relevant examples that eased the development process. Combining insights from a static stacked bar chart example and a reactive bar chart, I crafted a dynamic visualisation that updated based on user inputs. The culmination was the integration of this chart into the main application, accompanied by a loop to generate yearly data.
5. Refinements & Deployment
Once the core functionalities were operational, I honed the tool's aesthetics, adjusting colour schemes and adding a disclaimer for clarity and compliance. After deploying the tool, I recognised the need for continuous improvement. Future iterations will address areas like input validation and making the graph reactively refresh without button interaction.
Results
The redesigned Vue Compound Interest Calculator offers a superior and streamlined user experience compared to its predecessor. Notably, the Australian Government launched a new Beta version of the Money Smart Compounding Calculator that seems to have integrated some of the features and assumptions proposed in this project.
Reflections
This project was not only an exercise in improving a tool but also a journey of personal growth and skill enhancement. It underscored the importance of user-centric design and the value of iterative development. The project also highlighted the significance of continuous learning and staying updated with industry standards.
