Design 1 Detailed Screen Descriptions
(click image to expand to full size)
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 “Log In” 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 “Log In”. 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 entering an 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. Each bar is split into two portions to reflect total budget for that category, subdivided into total spent remaining 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 budgets 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.