Design 2 Detailed Slide Descriptions

(click image to expand to full size)

Screen 1a (Log in)

The welcome screen when the user first enters the app will prompt them to register or log in. They are required to enter a valid username and password, which clicking the “Log In” button will confirm. Clicking the “Log In” 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)

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, he will be prompted to re-enter incorrect fields. Clicking the “Log In” 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 asking you to create one. The action bar on top shows up on screens 2-8. It provides easy access to creating and modifying 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, create 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/expenses)

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 (+) icon. 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 (+), just as with incomes. He can click “Save Budget” 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/expenses)

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 close the popup and bring the user back to screen 5.

Screen 6 (View budget for current 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 Budget” button in screens  6 and 7. The user can input multiple email address to share his budget with by clicking the (+) icon, or click the (-) icon next to each email field to revoke sharing privileges for particular users.