Introduction

After reviewing the design, I am not fond of the current layout. To begin with, the sidebar was initially meant to filter transactions based on their respective categories. However, I have come to the realization that the functionality is complex. Hence, I prefer to remove this feature.

Additionally, I have decided to remove the category icon feature. The category icon is redundant and requires additional space to maintain. Instead, I will implement a color picker to represent each category.

In the next section, I will elaborate on the changes.

Design Changes

I have changed the design prototype from using Figma to Google Sheets. The reason is that the layout is simple enough to be represented in a column and row format.

Main Page

New main page

  • Options “Add category” and " Add transaction" are now located in the sidebar.
  • Include a section for total earnings and expenses.
  • Add a scrollbar in the transaction detail section.

Add Category Page

New add category page

  • The sidebar remains in the new design.
  • Change “Icon” to “Color”.

Add Transaction Page

New add transaction page

  • The sidebar remains in the new design.
  • Change title from “Add Data” to “Add Transaction”.
  • Move the date section to the bottom.

Backend Changes

Category

  • Remove category_icon field.
  • Add category_color field.

API Changes

  • Remove the API endpoint for uploading a category icon.
  • APIs related to categories no longer include the “category icon” variable.