Expenses App UI

December 2023 | Creating a UI for a personal expenses app

For the longest time, I've recorded by personal expenses using Google Sheets. Adding expenses on Google Sheets has always been clunky and difficult on my phone, so I decided to create a Google Form to make this easier.

This made adding expenses way easier, especially on mobile. But being a a software and product engineer, I thought I could take this further and create a full-fledged expenses application using a Google Forms and Google Sheets as the backend.

UI Inspiration: Apple wallet

I really like the colors and list view of Apple Wallet. I like to see a quick summary of my month's spendings with the overall colors of the Apple Card.

Initial UI

Left side: expenses view and summary

  • This view shows the spending by month.
  • The "card" on the top shows a breakdown of spending by category through the colors. In this example, the most has been spent on the "Living category".
  • Every individual expense/transaction can bee seen below.

Right side: add expense form

  • An amount can be entered either by typing or by using the buttons.
    • For example, rather than typing "7.35", the user can press the "+5.00", the "+1.00" button twice, the "+0.25", then the "+0.10" button.
    • react-number-format was helpful for the number input.
  • To enter the date, either the date picker, or the quick buttons for "yesterday" or "day-before yesterday" can be used.