Design 1 Detailed Screen Descriptions

Screen 1

    When the user first enters the app, they are prompted to register or login (if they have already registered for an account). Clicking on “register” goes to screen 2. Clicking on “login” goes to screen 3.

Screen 2

In this activity, the user inputs in an email, password, and password confirmation, and then press the “create account” button. If the feedback is positive, they will be directed to screen 4, otherwise they will be prompted to re-input some field and try again.

Screen 3

    The user enters his username and password and clicks “login”. If successful, he will be directed to screen 4, otherwise, he will be prompted to re-enter information.

Screen 4

    This is the main menu view for the user and allows him to navigate to one of five new screens: “Create Budget”, “Enter Income/Expense”, “View Your Budget”, “View Shared Budgets”, and “Share Your Budget”.  All of these are represented by clickable buttons.  At the bottom of the screen the user can click on “Notifications”, which will pop up with a window telling the user if a new budget has been shared with him or if he’s overspent in a certain category (among other notifications).

Screen 5

    In this activity, the user either creates or modifies an existing budget. The user enters an initial budget on top. The user also creates categories and enters in budgets for those by clicking on the “add category” button and filling in the fields that appear. When the user clicks “create budget”, he will be directed back to screen 4 if the form validates. If the numbers don’t add up, he will be prompted to re-enter incorrect fields.

Screen 6

    This screen allows the user to enter a one-time or recurring income or expense.  The user selects whether the item is an income or expense, selects a particular category (if the item is expense), enters the amount, and then sets whether or not the item is recurring (and selects either “once”, “daily”, “weekly”, or “monthly” as the rate of recurrence).

Screen 7

    This screen displays the user’s spending and remaining budget for each of the pre-set categories in a list view.  The user can click on any of the categories and view a detailed breakdown of when he spent money in that category in the given month.

Screen 8

    This screen is the detailed breakdown of spending in a particular category.  It shows a list view of every expenditure for that month within the category; clicking on “Return to Main List” will return the user to screen 7, while clicking on “Graph” will send the user to Screen 9 and clicking on History will send the user to screen 10.

Screen 9

    This screen shows the user’s spending in bar graph form - along the x-axis we have a plot of categories, while the y-axis shows money in dollar amounts.  Clicking on “History” will send the user to Screen 10 and clicking on “List” will send the user to screen 8.

Screen 10

    This screen shows the user’s history of monthly spending over the past few months for each of the pre-set categories.  Clicking on “Graph” will send the user to Screen 9 and clicking on “List” will send the user to screen 8.

Screen 11

    This screen shows all of the budgets that have been shared with the user.  Clicking on one of the listed budget will send the user to screen 8 (list view of the budget).

Screen 12

    This screen shows up when the user clicks on “Share Budget” from screen 4 or the menu buttons. The user will be prompted to enter in the username/email of whom he is sharing his budget with. After the user clicks “Share” a popup confirmation will appear that the user will have to check before actually submitting the request