BCR: an interactive 50/30/20 budget calculator embedded in bcr.ro

Only 38% of Romanian citizens are keeping track of their expenses and are prioritizing them correctly, according to a study conducted by BCR and Unlock Market Research.

BCR has a mission to improve Romania’s status when it comes to financial literacy. Together, we contributed to improving two educational platforms: one directed towards all Romanian citizens and the other for new entrepreneurs wanting to learn or improve their financial skills. These two digital platforms are Școala de Bani (Money School) and Școala de Business (Business School). Additionally to these courses, podcast episodes, and articles provided throughout the years, BCR came up with an incredible campaign to improve financial literacy for Romanians.

Aside from the media assets needed for the Financial Intelligence campaign, the idea of a Financial Calculator came to life as well. The calculator is a small piece in a great puzzle of improving financial literacy in Romania. The tool is interactive, where users can identify their current status compared to the 50/30/20 budgeting rule. After evaluating their status, users can get in touch with a financial advisor to help them identify their habits, overspending areas, and cut off unnecessary costs.

As a landing page, the Financial Calculator breaks the usual pattern of the bcr.ro website with a fresh, colorful and playful design, making budgeting fun.

The app lives in an iFrame, so we had to write some lines of code into the bcr.ro website. We used React, SASS, CSS modules and ChartJs. We used CSS variables to easily access them from JavaScript and postMessages to send and listen to messages from/to BCR’s website. Moreover, we didn’t use a design system to avoid a big build and save some loading time. And since Adobe Experience Manager (AEM) is BCR’s Content Management System, we’ve added this tool to it.

This small addition is one of many to come in BCR’s journey towards improving financial literacy in Romania.