EDK All work

Interactive prototype · Financial literacy

FinanciPet

Could caring for a virtual pet make early financial concepts feel less abstract?

View GitHub

In brief

FinanciPet was a pilot web app designed to introduce younger students to saving, spending, budgeting, and interest through a virtual-pet loop. Instead of presenting finance as a set of definitions, the prototype made each concept part of caring for a pet and managing its small everyday world.

Figma workspace showing FinanciPet animal characters, room scenes, interface elements, and popups
01The Figma workspace: pet options, room states, bank scenes, progress components, and early interface studies.
FinanciPet web app home screen with a dog, room, navigation, and savings and spending balances
02The implemented home screen keeps the pet at the center while savings and spending remain visible across the experience.

What I did

  1. 01Designed the pet, room scenes, interface states, and page flow in Figma, then translated the visual system into a multi-page browser experience.
  2. 02Built Home, Bank, Shop, Goals, and About pages with HTML, CSS, vanilla JavaScript, and Materialize; used localStorage to preserve balances, purchases, deposits, interest, and goal progress between visits.
  3. 03Created a learning loop in which users earn simulated income, choose a savings percentage, accrue interest, transfer money through the bank, purchase pet items, and see those decisions reflected in progress bars and goals.

Key finding

The prototype connected abstract ideas to visible consequences: spending changed what users could buy, saving advanced longer-term goals, and interest rewarded leaving money in the bank.