Design 2 Detailed Slide Descriptions

Screen 1a (login screen)

    The welcome screen when the user first enters the app will prompt them to register or login. They are required to enter a valid username and password, which clicking the “login” button will confirm. Clicking the “login” button will also bring the user to Screen 2. Clicking the “register” link transforms the screen to Screen 1b, where the extra “confirm password” text field is added in and the button and link names are switched.

Screen 1b (registration screen)

    When the user is registering, he is prompted to enter a username/email, password, and password confirmation. He will receive instant feedback if the passwords do not match and will be directed to try again. Clicking the “register” button will bring the user to Screen 2, if registration is successful, otherwise, the he will be prompted to re-enter incorrect fields. Clicking the “login” link transforms the screen to Screen 1a.

Screen 2 (view budget)

    This screen shows a list of all the budgets you can view(your budget and any budgets shared with you). If you do not yet have a budget, there will be a button telling you to create one. The action bar on top shows up on Screens 2-8. It provides easy access to modifying/create budgets, entering income/expenses, and viewing budgets(current screen).

Screen 3 (create budget)

    The user can navigate to this screen by pressing the “budget” icon on the action bar on top of screens 2-8 or from Screen 2 if this is his first time creating a budget. In this activity, the user can enter in multiple recurring incomes and enter in categories and set budget amounts for each category in order to create a budget. To enter multiple incomes, the user can click on the “+” icon.

Screen 4 (Add income/expense)

    In this screen, the user is able to add an income or expense to his budget. For each new income item, the user will enter in the amount and choose the recurring rate(once, daily, weekly, monthly, etc). He will be able to add more incomes by pressing the “”. Underneath the income section is the expenses section. For each new expense the user adds, he will enter the amount, recurring rate, and choose a category from the drop down menu that this expense belongs to. He will be able to enter multiple expenses at once by pressing the “” just as with incomes. He can press the “save budget” button to save his additions and then get taken back to screen 2. If the user wishes to edit previously entered income and expenses, he can click on the “edit old” tab and be brought to Screen 5.

Screen 5 (Edit income/expense)

    In this screen, the user is able to edit old income/expense items. There are two toggle-able sections: “income” and expenses”. Clicking either will expand a table view of all previously entered items for that section with date and amount columns. When the user clicks on an item, a popup(screen 5a) will appear for him to edit the income or expense.

Screen 5a (Popup for editing purposes)

    This popup will contain fields with pre-populated amounts that the user can change as he edits the previous income/expense. Similar to how new expenses/incomes are entered, the user inputs in an amount, selects a recurring rate, and selects a category for the item. Clicking the “edit expense” button will bring the user back to Screen 5.

Screen 6 (View budget this month)

    This is the main screen for the user to view his budget and current expenditures for each category for the current month. The user can navigate to this screen by clicking on the “view budget” icon in the action bar that is on top of screens 2-8. This view contains expandable sections for each category. Once expanded, the user can see a table of expenditures(date and amount) for that category. If the user wants to see a history of past expenditures, he can click on the “history” tab, which brings the user to Screen 7. The user can also share his budget by clicking the “share budget” button, which brings the user to Screen 8.

Screen 7 (view budget history)

    This screen shows a graph of the user’s past spending, showing how much money the user spent on all the categories over the past few months. The user will be able to drag or click for more data.

Screen 8 (share budget)

    This screen is used for the user to share his budget with selected people. He can navigate to this screen from the “share” button in Screen 6 and Screen 7. The user can input in multiple email address to share his budget with. Clicking the “Share budget” button will bring up a confirmation popup that the user will have to check before actually submitting.