...
(click image to expand to full size)
Screen 1a (LoginLog in)
This login/registration mechanism is the same as in Design 2. Please refer to that section for more detail. After the user clicks “login”“Log In”, he is either brought to Screen 2a (first time user, and users who have not yet created budgets), or he is brought to Screen 2b (recurring users).
Screen 1b (Registration)
This is the same registration mechanism as in Design 2. After the user clicks “register” “Register” and is successful, he is brought to screen 2a.
Screen 2a (Home view, budget not yet created)
This is the home view of the app. The user can navigate here from login/registration or from the “home” icon in the action bar on screens 2-8. In this home view, there is a button for the user to create a budget, and underneath that, there is a expandable list of all budgets shared with the current user. Clicking on any of the budgets listed takes the user to Screen 5.
Screen 2b (Home view, budget created)
This home view is for recurring users who have already created budgets. The user will see a basic summary of his current budget (how much money he has left) and will have the option to enter in an expense (goes to Screen screen 4) or view his entire budget (goes to screen 5). The rest is the same as Screen 2a, where there is There is also an expandable list of budgets shared budgetswith the user.
Screen 3 (
...
Edit budget)
This view lets the user edit his budget. He can enter in a total budget amount, set categories, and enter in amounts for each category. Clicking “cancel” clears the forms“Cancel” returns to the previous page without saving, and clicking “save” “Save” brings the user to Screen screen 5 , if there are no errors, ; otherwise, the user will be prompted to correct the errors.
Screen 4 (
...
Enter expenses)
This view lets the user enter in expenses. He can navigate here from Screen screen 2b or by clicking the “enter expense” “Enter Expense” icon in the action bar on screens 2-8. The mechanism for entering an expense is basically the same as the other designs, but the user can also enter a date for the expense. The user can click “cancel” to clear the form “Cancel” to discard changes or click “save” “Save” to save the expenseexpenses. If save is successful, the user is brought back to the home screen (Screen screen 2b).
Screen 5 (Summary of budget)
This view shows a summary of the user’s (or someone else’s) budget). If it is not the user’s budget, the “edit” “Edit” tab on this screen will be grayed out, so the user cannot edit it. The user can navigate here through a variety of ways, but mainly from the home screen (2b) or via the action bar. In this view, the user sees the total budget and the amount left. He can see a list view of each categories and the corresponding amounts in those. Each category is also expandable, and clicking them will bring the user to Screen screen 6. The other tabs on top (“history” “History” → screen 7, “edit” “Edit” → screen 3, “share” “Share” → screen 8) takes the user to the corresponding screens.
Screen 6 (
...
Detailed table for a category)
This view shows a detailed table of the expenditures for a category. The user can edit a previous expense by clicking on a row in the table, which will bring up a popup (Screen screen 6a). The user can also click on the other tabs to navigate to “history”“History”, “edit”“Edit”, and “share”“Share”.
Screen 6a (
...
Popup to edit expense)
This view is a popup for the user to edit a previous expense. He can change the amount, category, and date, or delete, cancel, and save the expense. Clicking all “delete” “Delete” and “save” “Save” will ask the user for a confirmation. Clicking any of the 3 button (“delete”, “save”“Delete”, “Save”, and “cancel”) “Cancel” brings the users back to screen 6.
Screen 7 (
...
History)
This view lets the user see previous budget expense history and is the same graph as described in design Design 1 and Design 2.
Screen 8 (
...
Share)
This view lets the user share his budget with others by inputting in their email addresses. The user can click “cancel” to clear the form“Cancel” to discard changes, or click “save” “Save” to save the people the user is sharing with. If the user is viewing someone else’s budget, he will be able to see who the budget is shared with, but will not be allowed to edit the list. The user can navigate to this feature by clicking the “share” “Share” tab in Screens screens 3, 5, 6, 7 - basically, basically when the user is in the “view” “View” mode.