...
Walk-Through of our Scenario for Design 1:
Luke logs into the MoneyMaker MoneyManager app and is greeted by screen 1. He selects "Register", and is led to screen 2. He enters his email (skywalker@imperial.edu) and creates a password, then selects "Register". He is led to screen 4, where he selects “Create/modify Budget”. He is then led to screen 5. In the budget per month box, he enters $300. Under the “Food” category he enters $175, under "Clothing" he enters $75, and he adds a new category that he calls “Recreation”, assigning $50. He selects “Save Budget”, which returns him to screen 4. On this screen, he selects “Share Your Budget”, which leads him to screen 12; he enters his father’s email, iamyourfather@deathstar.com, and hits "Share" (Vader ignores this email for a while). Luke quits his app. Periodically throughout the month he adds his new expenses by signing into the app (which brings him to screens 1->3->4), clicking on “Enter Income/Expense”, and adding the expense in screen 6 by clicking Expense, selecting the appropriate category, entering the amount, leaving the “Recurring” setting as “Once”, and clicking “Add to Budget”.
...
Walk-Through For Our Scenario of Design 2:
Luke logs into the MoneyMaker MoneyManager app and is greeted by screen 1a. He selects “Register” and is led to screen 1b. He enters his email (skywalker@imperial.edu) and creates a password, then selects "Register". He is led to screen 2, where he selects “Budget” (note that this is not the same as "Your Budget"). He is then led 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”, assigning $50 (all of these per month). He selects “Save Budget”, which returns him to screen 2.
...
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 are able to cope with this compromise.
Design 3 (click on image to expand)
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
Walk-Through for Our Scenario of Design 3
Luke logs into the moneymaker MoneyManager 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 2a (since he is a first time user), where he selects “Create a Budget”. He is then lead to screen 3. 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 then selects “Save”, which takes him to screen 2b.
...