{"id":2938,"date":"2017-04-07T17:12:54","date_gmt":"2017-04-07T14:12:54","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=2938"},"modified":"2023-08-14T19:52:58","modified_gmt":"2023-08-14T19:52:58","slug":"case-study-home-budget-app-ui-for-finance","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-home-budget-app-ui-for-finance\/","title":{"rendered":"Case Study: Home Budget App. UI for Finance"},"content":{"rendered":"

Benjamin Franklin once said: \u201cBeware of little expenses; a small leak will sink a great ship.\u201d Management of finance and accounts has been an actual issue for a long time; still, for the recent decades, it has got a new perspective with the advent of modern technologies and the internet which is becoming more and more accessible. It presents a new challenge for designers and developers in terms of digital products which will help people to track and manage their money flows both professionally or just for themselves.\u00a0<\/span><\/p>\n

 <\/p>\n

This theme built up the foundations for a new UI design concept created in terms of Tubik UI Fridays<\/a>: one of the creative sessions was devoted to Home Budget, the application for finance management. The creative team of UI\/UX designers Ernest Asanov and Dima Panchenko and motion designers Kirill Erokhin and Andrey Drobovich worked under art direction by Sergey Valiukh. Let’s review what design solutions were presented for the task.<\/span><\/p>\n

 <\/p>\n

Task<\/span><\/h2>\n

 <\/p>\n

UI\/UX design for the web and mobile versions of a personal budget manager<\/span><\/p>\n

 <\/p>\n

Process<\/span><\/h2>\n

 <\/p>\n

Describing 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.\u00a0<\/span><\/p>\n

 <\/p>\n

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.\u00a0<\/span><\/p>\n

 <\/p>\n

Dashboard<\/span><\/h2>\n

 <\/p>\n

The 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.<\/span><\/p>\n

 <\/p>\n

\"Dashboard_home_budget<\/span><\/p>\n

 <\/p>\n

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.\u00a0<\/span><\/p>\n

 <\/p>\n

The cards present such information blocks of data:<\/span><\/p>\n