My MoneyBox is an app that track the amount of money. The app helps people to manage their money in a easy and quickly way. The users will know everything about their financial state and movements in a glance. They can also mark possible entries and exits to know how to manage the money depending on availability. My MoneyBox has four main features.

  1. Visual feedback thanks to the use of colors users can always understand their financial activities in a glance.
  2. Week budget thanks to that users have a constantly monitoring of their financial state.
  3. Categorization of movements users can associate an expence or an entry to a category, this features allow a better management of the financial movements.
  4. Possible entries and exits it is possible to mark possible entries and exit to know how to manage the money depending on availability.

Interface and interaction modality 

The visual language is mainly based on the use of colors. My Moneybox uses the color to facilitate the quickly identification of the financial state. The association of colors is very simple and intuitive, green is always associate to a positive action while red to a negative action. All the interfaces in the app are related to this color choice.

The sections of the app are:

Home Page : Home page shows the user's week activities with a visual feedback, based on the user's week budget. In the top-left and top-right corner there are the two main buttons of the app: Add money (+) and Take money (-) interface.

Activities: In the activities section the user can see the previous month activities with a visual feedback based on the month budget. The user can browse all the activities divided by category and understand the month balance.

Agenda: The agenda allows the user to foresee the possible expenses or entries. If the user click on one day it will appears the content inside it. The contents display are quantity, hour and comment.

Profile: This section contains all the user’s data. Users can set here week budget, monthly entries and other data related to the profile.


The interface was done using Illustrator. The Prototypes were made using d3.js library. The code editor was Brackets. For the right visualization the browser is Chrome.

Research and Development Content

I analyzed a few applications for managing the financial movements. In some of these applications I found similar problems, mostly related to colors.

  1. The colors are used without an associative meaning, generaly to identify the category or days.
  2. The month or week activities sometimes are presented as a circle diagramm with a lot of color, not easy to understand.
  3. Some of the app can not allow to mark possible entries or exits, but just sign when the financial movement is done.