When we were teenagers, we were overwhelmed with all the different banks, accounts, finance concepts and didn't know where to start. We wish we had a friend that could help us walk through some of the confusing banking terms and provide us with easy-to-follow tips to guide us. This is exactly what we hope to accomplish with Finance Bestie.

What it does

Finance Bestie is a financial education tool catered towards young girls between the age of 10 to 15. Our mascot Erika take the user through interactive scenarios of choosing a bank, bank accounts, and spending and saving their money. Users can follow along to learn financial concepts while testing the knowledge they gain in real life scenarios. Erika uses every day language and provides positive encouragement along the way. A recap of the concepts and terms covered is provided at the end of the narrative to reiterate and emphasis learnings.

How we built it

We brainstormed and planned the abstractions before the actual implementations. We drafted our first prototype using We built the front-end interface with HTML, CSS and Javascript. We used custom fonts from Google and created our visuals using We built the back-end using Javascript and Express. Finally, the app was deployed with

Challenges we ran into

One challenge we faced is to figure out how to put our abstract ideas into concrete implementation. We found that not being able to see each other in person makes it hard to communicate our visions. Drawing pictures and story boards helped us make our ideas more concrete and made the implementation easier.

Given our younger audience group, we also had to make sure that the story narrative and content we were creating is applicable to our target audience. We had to pay special attention to the tone we wanted to set and the language used in order to most effectively explain concepts to younger girls.

Some of our members were completely new to HTML, CSS, and other front end technologies. It was difficult for her to first onboard the technical portion of the project. But, with the help and guidance of other teammates she was able to familiarize herself with the basics and contribute to the codebase.

Accomplishments that we're proud of

Our program mostly consists of interactive components to appeal to our target audience. One of the various front-end features we implemented is having the definition of terms appear when the user hovers over the terms by placing their cursor on it; this keeps the display of the webpage clean but still informs the user of all the relevant information.

We also created a collection of images of our mascot to display in our web pages. These images change accordingly to scenarios displayed in the web pages. We kept our target audience in mind when creating images that would appeal to them and support their learning. For example, if the user picks an incorrect option for a scenario, the mascot changes to a sad face; and this sad face is changed to a happy face when the user picks the correct choice. This keeps our web-app more interactive and engaging to our audience.

Due to our tremendous preparation efforts before coding started, we had a clear vision, precise timeline, and clear cut tasks for each of our members. We were able to accomplish everything we intended to do for this Hackathon. We also made the app open to future extension so we can continue to expand it to include more components.

What we learned

We learned that when developing for a certain audience, it is important to always keep our audience in mind and see things from their perspective. This way we would be able to develop programs that truly cater to the target audience. We also learned that planning, visualizing, and strategizing before starting on the code is crucial. Any time spent on the preparation phase is not time wasted and will ultimately save us tremendous time and effort. We also felt that we were able to create a better and more appealing end product because of the time we spent planning and seeking to see things from our target audience's perspectives.

What's next for Finance Bestie

In this version of Finance Bestie, we focused on choosing a bank account and using a debit card. In the near future, we would like to include information on what kind of to credit card to get; how credit score works; and how to maintain and improve credit score etc. we can also make it into a mobile app to make it more accessible. Once we complete these extensions, we would like to market this to elementary school / high school to integrate this into their curriculum, as we feel it is important to introduce how to manage personal finance at an early age. We hope to create a gender neutral version "Finance Buddy" that everyone can use and benefit from. We would also like to collaborate with banks and companies to promote their youth-friendly bank accounts and services.

Share this project: