Budget Smart
Project type:
Mobile App
Services:
Mobile Design,
UX/UI
Client:
“BudgetSmart” is a concept for budget planning application, helping people to manage their personal finances and motivating them to save more. Its main focus is to automate processes as much as possible and give insights while being non-intrusive. Application is design primarily for mobile devices and you can check the it's prototype by clicking the button "see online".
Project goals
Research: The project started with research in order to better define the problem and goals. It consisted of gathering information about potential users and their needs by interviews. The research included also getting to know the competition and leveraging on their best functionalies. Interviews included people with different backgrounds, predominantly having more than avarage income, some paying mortgage, travelers and including professionals in the fields of online payments.
Problems: Most of people’s pain was that they didn’t want to constantly fill information or forget to do it. They prefer to do the math in their heads or use pen & paper occasionally because they felt they are losing a lot of time using apps to track their finances. Another problem for some was that using similar apps they didn’t get any useful insights that lead them to changes in their spending habbits. The conclusion is that for an effective application it has to be designed with the idea of time-saving automation and generating useful actionable tips. Gamification could be used to improve motivation.
Approach: I started with wireframing the initial "Overview" screen and then continued with a higher-fidelity design. Right from the top of the initial screen you can already see indication of some of the features that can make such an app effective - notifications. They can increase engagement with the app and motivate the user by showing: Alerts (overspending), Reminders (push notifications for entering expenses) etc. Essential for such type of applications is the calendar where you can select periods for the metrics. Its placement is on the top because most of the data below depends on its values. I also added a section showing top spending areas. Pie-chart was chosen as it’s most suitable for visual representation of percentage share.
Solutions
-
This screen includes functionality to see sub-category breakdown for each of the main ones. This is very important for getting insights of where your money are spent. One idea for automating processes and saving time for the user is to have lots of predefined categories with icons and the ability to organize them in a tree, with subcategories. This is very important, because it’s one of the main reason people will start using the app right away and not wondering how should they organize and name their category structure. The diagram chart shows spending for the selected period. Thus you can check if you spend more on weekends then workdays or if the period is year, if you spend more during summer than winter. You can also see your average day spending, so you can take action to reduce spending from the same day. There could be also an option from the context menu to see spending breakdown by day/week/month. Of course this screen can not exist without showing the actual recent transactions. Starting with “today”s transactions, they are sorted by date. Again using icons makes it a lot easier for fast scanning. Also showing the account that was used for the transaction is useful.
-
One of the most dreamed functionality for users is the ability to scan their receipts instead of entering them manually. That’s why I seperated the screen with two tabs respectively. Scanning is depending more on the development and technologies and not on UI design. There are already possible Optical character recognition APIs such as are Tabscanner, Taggun. This is also the place that Tag Rules come to save more time. Inspired by competition’s functionality, Rules will enable user to automate tag assignment just by entering transaction’s note, by using “starts with”,”ends with” or “contains” definitions. Ofcourse even without set rules, the application will show suggestions for the most used tags and categories. You can automate further by adding Recurrence to repeating transactions in time like Mortgage, Bills or Salary.
-
Budgeting is the main way to predict and limit your expensed in order to save extra money. It is similar to setting a goal and stick to it, so it’s the perfect place for adding some gamification. It increases user engagement, people enjoy the interactive process full of fun, challenges, and this motivates them. One idea for this screen is to add a Goal Streak, showing the days of the week in a row and color them according to spending/overspending and send them congratulation’s notification if they keep good results. Some of the people I interviewed, needed a clear sign to know how much they can spend per day in order to save money for the selected period. That’s why I added this line showing the calculation for limited day spending.
-
Add new budget screen is very similar to the add transaction, but here you have not a single date but a period. Also you can add more than one tag or category. For example “Lifestyle” budget can include “bowling”, “alcohol”, “gadgets” etc.
-
Accounts screen start with default Cash Wallet and you can add your bank accounts in order to synchronise all bank transactions or online shopping without the need to add it manually. Withdrawing money automatically transfers the sum to the cash wallet. It’s also technically possible for the application to recognize previously used type of payment recepient. So for example if I pay online for an AirBnB, the next time I do it, it will automatically add the expense to the holidays category.
Other devices & screens
