Project Story: Integrating the Round-Up Feature

Inspiration

Our inspiration came from a simple, yet powerful realization: we all want to keep more of our money, but everyday habits and circumstances often get in the way. For example, this week alone I purchased from a Queen’s College vending machine seven times. When my funds start running low, I usually think back on these purchases and feel disappointed, wishing I had put that money into savings instead.

This personal experience, combined with observing the challenges many face when it comes to saving, motivated me to explore how technology could make saving effortless. I was particularly intrigued by the round-up concept introduced by Acorns, where every small purchase is rounded up and the difference is automatically invested.

What I Learned

During the development of this project, I learned that:

• Behavioral Finance Matters: Small daily habits can have a big impact on long-term savings.
• User Experience is Key: Integrating features directly into an app removes friction and increases adoption.
• Modern Web Technologies: Leveraging HTML5, CSS3, and JavaScript allowed me to build a responsive, dynamic simulation of a banking app that demonstrates this innovative savings mechanism.
• Simplifying Complex Processes: By eliminating extra steps (advertising, linking accounts, incurring fees), we can make financial tools more accessible and user-friendly.

How I Built My Project

The project was built as a simulated banking app using:

• HTML5: To structure the application and present different screens such as login, home, and the round-up savings feature.
• CSS3: To style the app, using modern features like Flexbox for layout and transitions for smooth animations.
• JavaScript: To handle user interactions, simulate transactions, and implement the round-up functionality. The logic ensures that every purchase subtracts the exact cost, and when the round-up feature is activated, the difference is added to a savings account automatically.

I designed the interface to be dynamic and intuitive, allowing users to view their savings history while interacting with the primary banking functions. By integrating the round-up feature directly into the banking app, we removed the need for extra steps and improved the overall user experience.

Challenges I Faced

Some of the challenges I encountered included:

• Balancing User Interface Elements: Ensuring that the primary and secondary screens were centered and shifted appropriately was a delicate balancing act.
• Optimizing for User Experience: Integrating the round-up feature directly into the app without overwhelming the user with additional steps required iterative testing and fine-tuning.
• Technical Hurdles: Handling dynamic updates in real time, especially for the transaction logs and account balances, demanded careful attention to JavaScript logic and state management.

Conclusion

By learning from personal habits and leveraging modern web technologies, I was able to build a project that simplifies saving. Our solution, by integrating the round-up feature directly into the banking app, removes unnecessary barriers and makes saving effortless for users—all with just one simple opt-in.

Built With

• css
• css3
• html5
• javascript