Design 3 Detailed Screen Descriptions

(click image to expand to full size)

Screen 1a (Log in)

This login/registration mechanism is the same as in Design 2. Please refer to that section for more detail. After the user clicks “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” 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 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 4) or view his entire budget (goes to screen 5). There is also an expandable list of budgets shared with 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” returns to the previous page without saving, and clicking “Save” brings the user to 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 2b or by clicking the “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 discard changes or click “Save” to save the expenses. If save is successful, the user is brought back to the home 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” 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 6. The other tabs on top (“History” → screen 7, “Edit” → screen 3, “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 6a). The user can also click on the other tabs to navigate to “History”, “Edit”, and “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 “Delete” and “Save” will ask the user for a confirmation. Clicking any of “Delete”, “Save”, and “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 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 discard changes, or click “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” tab in screens 3, 5, 6, 7 - basically, when the user is in the “View” mode.