Here's my stab at this UI. The dashboard consists of metrics where one can quickly see the progress they've made toward their current goal (shown in blue). The green portion of the meter indicates how much the user has added to their savings during that month and then finally the red dashed portion indicates how much money was spent that month. The red dash is present to show the user what progress they could have made if they didn't spend the money to perhaps encourage saving more the next time around. In addition to the graph lines there are numeric values for a quick assessment of how much was added and spent during that month.
Each graph/meter is relative to a savings account dictated by the user. For example, the current example shows savings for a car down payment but the user is able to add and transition between various accounts to see how much they've saved toward their goals.
Another feature I was contemplating while devising this scheme is the addition of a financial adviser that takes form of a character. Since part of the brief was to make the app fun, I tried to come up with a cartoon character that conceptually matched the app's purpose.
A few things I'm not sold on for this first pass:
- While the color is meant to "lighten" up the mood and make things "fun", I'm not entirely sure about it. Perhaps I need to experiment with a few other colors but I kind of like the version without it better. I also feels it helps with legibility slightly.
- I currently show the ability for the financial adviser/character to appear at the top of the dashboard at times and say short phrases. In this mode/format, I'm second guessing the placement of the character.
- Then finally the font for the numbers works well at a larger scale but once it shrinks down it becomes a bit thin and tough to read. So I'm still playing with fonts.