MoneyManager - GR2

>> Back to MoneyManager

Team members: Stephanie Chang, Qian Long, Isabella Lubin

Scenario

Luke was born on May the 4th, and is a 19-year-old just entering the Imperial Academy. He is very excited to get away from his family’s farm and begin an exciting new chapter of his life, majoring in Aeronautics and Astronautics and exploring the wonderfully colorful neighborhood of Mos Eisley. However, Luke’s father, Vader, is worried about his son going out on his own. In particular, although Vader trusts Luke not to squander the family fortune, Vader would like to guard against Luke accidentally spending more than he needs to buy groceries, room decorations, or drinks at the local cantina. Vader and Luke agree that Vader will pay for Luke’s housing and tuition, while Luke will have an initial monthly budget of 300 credits for textbooks, meals, and other personal expenses.

Yoda, Luke and Vader’s wise neighbor, tells Vader and Luke about the MoneyManager app, which Luke can use to create a budget and keep track of his expenses. Luke downloads the MoneyManager app on his Galaxy smartphone and creates an account with his skywalker@imperial.edu email address. Luke creates a budget for his first month at the Academy with the categories of “Food”, “Clothing”, and “Recreation” and sets the initial balance in his MoneyManager app as 300 credits, with a recurring allowance of 300 credits at the start of each month. For the given month, he assigns 175 credits to “Food”, 75 credits to “Clothing”, and 50 credits to “Recreation”. Luke then gives his father access to view his budget (by sharing it with iamyourfather@deathstar.com) so his father knows that he is spending his money responsibly and so his father can see if Luke needs more funds. Because Vader has not yet created an account with MoneyManager, he receives an email prompting him to create an account. He does so, and is then able to view his son’s budget.

As the month progresses, Luke inputs his various expenses. He spends 40 credits a week at the grocery store and inputs the expenditure into the app while standing in the checkout line, and spends 50 credits on a new uniform at a local clothing store (again inputting the expenditure while in the checkout line). In the third week of the month, Luke spends one memorable night gambling with bounty hunters at the local cantina and loses 50 credits (with another 20 credits spent on drinks). In the morning, he enters the 70 credits as an expense under “Recreation”. Seeing that MoneyManager reports his “Recreation” balance as negative, Luke then has to rebudget, leaving himself with 55 credits for “Food”, 5 credits for “Clothing”, and 0 credits for “Recreation”. Concerned about his ability to get through the rest of the month, Luke asks his father to view his budget and consider giving him more money.

Vader logs into MoneyManager and views Luke’s budget. Seeing that his son has spent 70 credits in one night on recreation (but remembering his own college years), he agrees to give Luke another 50 credits for the month. Luke modifies his budget to include this new allowance and wisely does not return to the cantina that month.

Designs

Design 1 (click on image to expand)

Screenshots: (1) Welcome screen; (2) Registration; (3) Log in; (4) Home page; (5) Create/modify budget; (6) Enter income/expenses; (7) View budget as summary list; (8) View budget summary details; (9) View budget as graph; (10) View budget history; (11) View budgets shared with you; (12) Share budget

Design 1 Detailed Screen Descriptions

Walk-Through of our Scenario for Design 1:

Luke logs into the 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 from 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”.

When Luke spends too much money at the local cantina, he logs into MoneyManager (screens 1->3->4) and selects “Create/Modify Budget”, which leads him to screen 5. 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 1->2, which lead him to 4). He then selects "View Shared Budgets" and clicks on “Luke’s Budget”, which leads him to screen 7.  From screen 7, Vader navigates around by clicking in a variety of places - he clicks on “Food”, which brings him to screen 8 where he views a detailed list of his son’s spending (he then clicks “Return to Main List” to go back to screen 7). He clicks on “Graph”, which shows him screen 9, a more visual view of how much Luke has spent and has left in each of his categories. Finally, he clicks on "History", which shows him how much his son has spent in the different categories over time (since Luke 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 1->3->4) and selects “Enter Income/Expense”, where he changes adds $50 as a one time income and credits it to his food category.

Analysis of Design 1:

This interface is very learnable, which is particularly good for the parents who might be viewing their children’s budgets. All of the basic options are located on the home screen, so it’s easy to see all the functionalities of the app (in screen 4). All of the screens are optimized for viewing purposes. There’s little clutter, and the very basic amount of information is displayed before you expand for more detail (in the case of going from screen 7 to screen 8) which means that beginning users won’t be overwhelmed. Most of the things in the UI that are meant to be clicked on are clearly clickable and are consistent with other UIs, which again means good learnability.

This UI involves a lot of screen navigation (the path to view another person’s shared budget alone requires you to go from screen 4 to screen 11 to screen 7 to screen 8, which is particularly non-ideal because it’s the path that’s going to be used the most by parents who may not be very experienced using mobile apps). This makes the UI inefficient; the experienced students also have to go through a long process to enter expenses, which is something they’ll likely be doing often, and they can only enter one expense at a time which slows down the process even further. Thus, although the interface is very learnable (good for our new app user group of parents), it’s not efficient, which is bad for our experienced student users.

This design also has a few safety problems. There’s no way to backtrack and edit (or delete) an expense; although there’s a confirmation message when you enter an expense, this still allows for poor error correction for something that someone might want to be correctable (although lack of correctability has its advantages for protecting against students who might try to fiddle with their expenses after the fact). One major problem in this model is that the distinction between your budget and a recurring income is not particularly clear, so a user could get confused about what to enter where - the ability to enter income was intended to allow students to keep track of their savings, but in other iterations we decided that this made the model too confusing and that we should focus on budget. We intend to ask users which they value during user testing.

The design prioritizes learnability over safety (poor error correction) and efficiency (lengthy navigation), which makes it better for parents who don't know how to use apps and don't mind extra navigation if it's easy to follow, but not as good for students who want to do things quickly.

Design 2 (click on image to expand)

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

Design 2 Detailed Screen Descriptions

Walk-Through For Our Scenario of Design 2:

Luke logs into the 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.  

Luke wants to share his budget with his father, so he selects “View”, 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 into the app (which brings him from screens 1a->2), clicking on “Income/Expense”, and adding the expense in screen 4 under Expenses, 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 local 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, Vader 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 MoneyManager. 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 input, and users can change whom they've shared their budgets with at any given time, which gives the users greater control over who can see their budgets.

The design also includes "+" and "−" icons for users to quickly add multiple categories, income, expenses, or email addresses to share a budget with. This greatly increases efficiency - if a user waits until the end of the week to input all accumulated receipts, he would not have to input each item individually and have to navigate back to the same screen multiple times. This feature is very intuitive and thus learnable as well. In addition, the "+" and "−" icons make it easy for a user to recover from the error of adding an extra category, expense, or email, although accidentally deleting an item is not quite as recoverable.

In introducing an action bar 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 users 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 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

Design 3 Detailed Screen Descriptions

Walk-Through for Our Scenario of Design 3

Luke logs into the 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 led to screen 2a (since he is a first time user), where he selects “Create a Budget”. He is then led 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”, assigning $50 (all of these per month). He then selects “Save”, which takes him to screen 2b.

Luke wants to share his budget with his father, so he selects “View Your Budget”, which leads him to screen 5. He selects “Share”, which leads him to screen 8. He enters his father’s email, iamyourfather@deathstar.com, and hits “Save” (Vader ignores this email for a while). Luke quits his app. Periodically throughout the month, Luke adds his new expenses by signing into the app (which brings him from screens 1a->2b), clicking on “Enter an Expense” (which takes him to screen 4), adding the expense in screen 4, selecting the appropriate category, and selecting “Save”.

When Luke spends too much money at the local cantina, he logs into his MoneyManager app (screens 1a->2b) and selects “View Your Budget”, which leads him to screen 5. He then selects “Edit”, which takes 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->2a). He then selects “Luke’s Budget”, which leads him to screen 5. Within screen 5, Vader can expand a particular category to see detailed expenses in that category (he can then also collapse that category to simplify the view). From screen 5, Vader navigates over to view the history of Luke's expenses by clicking on “History”, which leads to screen 9 (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. Since this is a one-time income and Luke should not count on this extra money in his monthly budget, Luke does not adjust his budget.

Analysis of Design 3

This design incorporates much of the efficiency from Design 2, with some added features. The UI emphasizes adding new expenses as a separate task, as tracking expenses is most important to the student user and it should thus be distinct and easy to find. The home screen for the returning user features entering expenses and viewing budgets (included shared budgets) - this feature emphasizes what both our student and parent user groups value the most, so increases the efficiency of the UI. The user can again edit all previous expenses and can change both who can see his budget and whose budgets he can see, which makes the UI much more safe. This UI also incorporates cancel options for many of the editing tasks, which makes the design more safe as well (a user who accidentally deletes expenses or email addresses can simply click "Cancel" to avoid saving this change). Learnability is somewhat increased in this design over Design 2 (with the very notable exceptions of sharing and editing a budget); important features have very clearly labeled buttons and text fields.

Some features of the interface, such as the Share feature, may be less learnable. The share feature is accessible only from the main “view” budget screen (screens 5, 6, 7, 8), so it is not apparent that this feature exists when the user first enters the app in screen 2. The path to edit a budget (which you do after entering the view mode) is not obviously clear and is thus not very learnable - we made this decision because a user will likely not edit his budget often, but it still could be improved. Screens 5 and 6 present something of an efficiency problem for returning users because they display a large amount of data to scroll through - the user's desire for this data is not yet clear to us.  

This UI removes the idea of income or recurring expenses. We’re not yet sure how important tracking rollover budget is for users, or if they would prefer setting up recurring expenses like rent or simply entering rent each month as they write their check. We think that perhaps the ability to setup recurring expenses and income makes the user less careful with how he tracks his budget. For example, if you track your net balance instead of how closely you’re sticking to your month budget, you might overspend but not really see that it’s a problem, or if you enter rent as a recurring expense you lose the act of physically entering it in each month, which naturally reminds you that you’re losing that money. The idea of keeping a rolling “balance” and recurring expenses are definitely two features we believe need to be explored in user testing.

To summarize: this design is designed to emphasize the tasks that we believe both of our user groups value most - entering expenses (students) and viewing someone else's budget (parents). In an effort to design the UI to emphasize those features, we made design decisions that increased the learnability and efficiency of the UI in some places and decreased it in others. Overall, this design is the safest of our three designs, but extensive user testing is needed to see if the decisions we made about which parts of the tasks are important were the correct decisions.