TaskUI/UX design for the web and mobile versions of a personal budget manager
ProcessDescribing the functionality of the app in general terms, Home Budget allows users to manage their expenses and incomes, creating the extended database for tracking financial flows or changes and getting comprehensive stats. The app was planned to have two variants: the web version presented with an informative dashboard and the mobile version giving simpler information and enabling to add new data quickly and easily. For both variants of interfaces, the designers agreed about the dark background of the layout and the fonts which would have the high level of legibility for both letters and numbers.
DashboardThe web dashboard was aimed at presenting extended stats for the particular period. The choice of generally dark interface enabled the designer to create the attractive layout with prominently visible colored details drawing users' attention to the interactive zones of key importance. With the dashboard, the users can get the data about their expenses and incomes processed and shown as a variety of statistics for a particular period. As we can see, different blocks of data are organized around cards. The presented page features the overview of the core blocks for the period of the recent week. The horizontal menu in the top part presents the navigation zone enabling the user to set the default periods of overview such as last week or last month as well as choose the custom period they are interested in. The cards present such information blocks of data:
- the menu with quick access to popular categories of expenses
- information on total expenses and frequency of transactions
- the list of popular transactions
- the cloud of expenses and weekly average rate in comparison to the previous period
- the line graphs of expenses and income for the chosen period graded by day on the horizontal axis and sums on the vertical axis
- the map with the pins marking the most frequent locations of spending money
- the block of recommendations based on financial operations of the period.