Traditional Banking Apps are usually in a tabular form. They show users' personal financial data straightforwardly but provide little information on the flow of data. We realize one's financial situation needs to be captured in a way that presents clearer image on the lifecycle of the user's transactions. In such way, not only the users are able to know where their money come and go, but also the analysts can gain better insights to provide analytics on users' financial situation.

What it does

  1. It provides better visualization by capturing users' money flow and lifecycle.
  2. It provides summaries by looking at users' expenses and compares with the average of the same expense category in the neighborhood.
  3. It provides suggestions on investments according to the amount of money users have in hand.
  4. It provides suggested amount of money users should save based on users' personal financial goals(e.g want to buy a car in a year).

How I built it

On the UX side: our UX designer first created a mobile version of prototype of our product. By designing this prototype, we have a better vision what are the core functionalities and additional features our product has. On the backend side: we use the object "Bubble" to represent users financial situation. "Bubble" have 3 different types: 1. a "Income Bubble" represents the source of money, 2. a "Pool Bubble" represents the place users store their money, and 3. a "Cost Bubble" represents how users spend their money. Each "Bubble" object has the attribute amount of money and we calculate the percentage it takes according to the source of this money. We host our database in Firebase. API: we used NCR's banking API to retrieve the accounts(corresponding to the "Pool Bubble") of users and transactions(corresponding to the "Cost Bubble"), parsed them into the "Bubble" objects and stored them in the database. On the front-end side: we use html and css combining with Bootstrap to create our web app. And used Node.js to retrieve data from the API and database to display to the users.

Challenges I ran into

One of the challenges we ran into was how are we going to represent the money flow so that they mostly accurately capture the flow of information users would like to see. Then we came up the idea of using "Bubble" to represent the information. The size of the "Bubble" represents the amount of assets users own or expend. And edges between bubbles are used to capture the information. One of the technical challenge I ran into was I'm not familiar with Node.js and the API call was just not working in our App. Secondly, the data we have at our hand was too limited to build a powerful model that provides best suggestions and analytics on users' financial situation.

Accomplishments that I'm proud of

We have a clear vision and design to provide solutions to the problem at hand. And personally, I learned a new language to make API calls to retrieve data and parse it into the object that captures and data we want.

What I learned

How to write in Node.js and use it to make API calls.

What's next for Bubble Budgie

Let the edges between bubbles be objects so that they can have width corresponding to how much money flow in and out of each bubble. If we can get a large amount of data, it's possible to train a AI model to make predictions on users' financial situation and provide more powerful suggestions and analytics. Let users provide financial goals and set up threshold of how much money they would like to save at end of each month so that our model can make personalized suggestions and analytics to users.

Share this project: