Centsability

• 

  End of the day summary

• 

  Out of the best 2, pick the best 1!

• 

  Pick the best 2 out of 5 strategies!

• 

  A note with the customers information and problem

• 

  Choose your avatar!

• 

  About Centsability

• 

  Explain the best solution to the customer

• 

  A new customer has arrived!

• 

  Start screen!

• 

  Game rating on your advice and input

• 

  The first customer has arrived

Inspiration

Financial literacy is a growing problem, especially for young people. The FINRA Foundation’s 2021 National Financial Capability Study found that only 14% of adults under 35 answered all three financial questions correctly, compared with 47% of those over 66. Centsability is here to close that gap by helping younger people make sense of their cents.

What it does

Centsability was built on the popular childhood game we all know and love, Papa’s Freezeria! In this game, customers come to the user with financial related issues and the user must identify the problem, provide strategies, and reason why the strategy is most useful. In a sense, this is a flipped learning format. For each customer there are 4 steps. During the problem identification step the user provides a written response that identifies the core issue. In the next step, the user has to choose the two best strategies from the 5. In the 3rd step, the user has to choose the best strategy between the two. In the final step, the user presents the strategy to the customer and has to reason why it is the most beneficial. This flipped learning allows the user to understand financial issues and what strategies to apply. Censability gamifies financial literacy learning in a fun and engaging way!

How we built it

For the UI/UX, we used a combination of Figma for inspiration, and ibisPaint X for layering and adding specific details to the scene. With Figma, we generated scenes and general avatar appearances. Using ibisPaint X, we drew details such as the thought boxes, start screen logo, altering the general avatar appearances, and touching up scenes. IbisPaint X was also used for compiling different elements, like thought boxes and characters, onto the scene itself.

Centsability is a React + Vite frontend with a Node/Express backend, all in JavaScript. The backend builds each customer's problem using Capital One's Nessie API. Gemini grades the two typed answers, the customer's problem and the player's reasoning. Each answer is checked against the customer's real numbers. API keys stay in the backend and are never in the browser. Inputs are capped and rate limited. If Nessie or Gemini fails, canned scenarios and keyword grading keep the game running. The frontend and backend are separate Vercel projects, linked by a rewrite in vercel.json. This allows us to deploy onto Vercel.

Challenges we ran into

When using Figma, often times the prompt outputs would not match what we wanted the project to look like. However, to combat this we used ibisPaint X to modify the outputs so that the UI/UX matched our vision.

We also ran into issues with Nessie’s shared mock data since it was inconsistent, with empty accounts, missing transactions, and no interest rates or categories. This made it difficult for us to rephrase and utilize so we used the other part of the Nessie API which included making customers manually. So we created our own customers in Nessie and the game reads their accounts and transactions live.

Accomplishments that we're proud of

We're proud that we were able to implement a full game day with a visually appealing UI/UX. Since we were a two person team, we were slightly worried about time constraints and possibly not finishing our project. However, we're really happy that our game came out successful and it even taught us some things about financial literacy when we were playing it!

What we learned

We learned how to utilize figma for design and generation! We also learned how to deploy our project onto Vercel instead of hosting locally and linking the front end and back end without leaking any API keys. It was also our first time using the Nessie API so we needed to run through a few js scripts to figure out what the data looked like and how we could use it in our project!

What's next for Centsability

In the future, we’d also want to pull mock customer data from Nessie as well. Additionally, we would want to add more characters with different financial dilemmas, such as loans, credit scores, and investment. We also look towards using the stars earned towards purchasing decorations for the avatar and desk! Another possibility would be to implement Centsability in elementary or middle schools as an engaging financial literacy education tool!

Built With

• claude
• cursor
• figma
• gemini
• ibispaintx
• nessie