...
Screenshots: (1a) Welcome and login; (1b) Welcome and registration; (2) View budgets / home; (3) Create/modify budget income; (4) Enter new income/expenses; (5) Edit old income/expenses; (5a) Edit individual expense popup; (6) View budget for current month; (7) View budget history; (8) Share budget
Walk-Through For Our Scenario of Design 2:
Luke logs into the moneymaker app and is greeted by screen 1a. He selects “register” and is lead to screen 1b. He enters his email (skywalker@imperial.edu) and creates a password, then selects register. He is lead to screen 2, where he selects “budget” (note that this is not “Your Budget”). He is then lead to screen 3. In the income box he adds 300.00 and sets it to occur monthly.. Under the “food” category he enters $175, under clothing he enters $75, and he adds a new category that he calls “recreation” and assigns $50 (all of these per month). He selects “Save Budget”, which returns him to Screen 2.
Luke wants to share his budget with his father, so he selects “Your Budget”, which leads him to Screen 6. He selects “Share Budget”, which leads him to screen 8. He enters his father’s email iamyourfather@deathstar.com and hits “Share Budget” (Vader ignores this email for a while). Luke quits his app. Periodically throughout the month he adds his new expenses by signing onto the app (which brings him from Screens 1a->2), clicking on “income/expense”, and adding the expense in screen 4 ender expense, selecting the appropriate category, entering the amount, leaving the “Recurring” setting as “Once”, and clicking “Save Income and Expenses”.
When Luke spends too much money at the Cantina, he logs into his MoneyManager app (Screens 1a->2) and selects “Budget”, which leads him to Screen 3. He re-allocates his budget, allocating “Recreation” $70, “Clothing” $55, and “Food” $175. He then asks his father to give him more money. Vader decides to finally check out his son’s budget before making his decision, so he creates an account (Screens 1a->1b->2) He then selects “Luke’s Budget”, which leads him to screen 6. From screen 6 he navigates over to view the history of spending by clicking on “History”, which leads to Screen 7 (since his son has only used the app for one month, this graph would only have a single point for each category and would thus not be very interesting.) Vader decides to give his son an extra $50 this month, and tells him so. Luke logs into his MoneyManager app (Screens 1a->2) and selects “Income/Expense”, where he adds a new one time income of $50 and clicks “Save Income & Expenses”. Since this is a one-time income, he does not adjust his budget.
Analysis of Design 2:
This design greatly reduces the amount of navigation that goes on (for example, the process for viewing a shared budget requires you to simply login and click on the name of the budget); this is optimized for the parent going to view his child’s budget, particularly a parent with multiple children using the app. This means that this particular version of the app is quite efficient. It includes a safety check that allows the user to go back and edit expenses or income that they had previously inputted, and you can change who you’ve saved your budget with at any given time which gives the user greater control about who can see his budget at any time.
In introducing an actionbar to improve navigation, we have taken up a certain amount of space and cluttered up the UI. In user testing we’ll need to determine whether or not user’s value having all of the important actions available from every window, or if they really only care about certain actions. Additionally, by using an action bar rather than a main menu, the particular actions are not clearly marked, which reduces learnability (even in the scenario write-up we noted that the user might confuse what the actions of clicking on “Budget” and clicking on “Your Budget” in screen 2 would do). The expansion feature on screen 6 (to allow the viewer to see detailed expenses in a particular category) means a user could expand all of the options and quickly make the window very long, requiring a lot of scrolling - this is fine for a student who is comfortable enough with apps to scroll quickly and know what’s going on, but is not ideal for a parent.
Overall, this UI prioritizes efficiency (and to some degree safety) over learnability. This is good for our student users, but not as great for our parent users, so user testing would help determine how well they're able to cope with this compromise.
Design 3
Screenshots: (1a) Welcome and login; (1b) Welcome and registration; (2a) Home screen for users without a budget; (2b) Home screen for users with a budget; (3) Create/modify budget categories; (4) Enter expenses; (5) View summary of budget; (6) View expenses for specific category; (6a) Edit individual expense; (7) View budget history; (8) Share budget