• Created by Unknown User (qlong@mit.edu), last modified by Unknown User (niwen@mit.edu) on May 17, 2012 22:28

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

MoneyManager - GR6

>> Back to MoneyManager

Team members: Stephanie Chang, Qian Long, Isabella Lubin

Designs

The following table shows screenshots from our app:

 
1) The login screen

 
2) The home screen, before a budget has been created

   
3) Editing a budget

   
4) Adding categories and amounts to the budget

 
5) The home screen after a budget has been created and
expenses have been added. There are quick links to common
features. All tabs are now activated as well.

   
6) The budget editing page, where users can see how much money
has been allocated to each category, and how much is unallocated.

   
7) Adding an expense. You may also add multiple expenses
at once, or cancel one or all of your unsaved entries.

   
8) A summary page of budget categories and money spent in each.

   
9) Editing a previously saved expense

   
10) A pie chart depicting breakdowns of budget money by category.

   
11) The Share Budget page, where users can see who
else can view their budgets and expenses.

   
12) Giving viewing permissions to another person.

 
13) Viewing someone else's budget. Note that editing budget
and adding expenses have been disabled.

 

 

 

Design Decisions

App-wide) To accommodate different types of users, we tried to incorporate both visual and textual indicators in our design. For example, main tabs have icons indicating their functions, as well as text labels for added clarity. When users are able to edit an item, there is a pencil icon indicating editability as well as textual instructions (ie, “Click a row to edit expense”).

App-wide) Landscape view is disabled in MoneyManager, so users are only able to view the app in a vertical orientation. Since there are often two rows of tabs, this relegates several pages to an awkwardly small screen space. For example, scrolling tables may only only occupy less than half of the vertical space in a landscape orientation. The login page and chart page, which normally don’t require scrolling, would actually need scrolling in a landscape orientation. Since allowing the app to rotate views created several problems with layout, we decided to disable landscape view altogether and just show the app in portrait view.

Screens 2 and 13) We decided to disable tabs for features that users are not able to access. For example, adding expenses and editing budget categories are disabled when viewing someone else’s budget. Also, adding expenses and viewing budget summary and charts is disabled for a user if he or she does not have a budget created yet. This eliminates some safety concerns, and also helps with directing first-time users towards the “Create Budget” page, since that is one of the few buttons they can actually click on. Disabled tabs are blacked out, so users can’t actually see their image or label; although this sometimes creates strange tab layouts, we thought that doing so would eliminate the scenario where users constantly try to click on a tab that doesn’t do anything.

Screen 4) During paper prototyping, users were confused about whether or not their category changes were being saved. Although categories are saved into our database immediately after entry, so that in case of a crash categories will still be retained, we added a save button for user comfort and visibility. Multiple categories may be entered on the same screen, and pressing Save brings the user back to the budget summary page.

Screens 5 and 8) When users have exceeded their monthly budget (or the budget for a specific category), the “money remaining” text shows up in red, to clearly alert users to the fact that they are overspending.

Screens 6, 7, and 11) Our initial design used plus and minus icons to allow users to add and delete categories, expenses, or shared contacts. However, our heuristic evaluators were confused about what the minus icon did at times, especially without a plus icon to compare with. Our final design includes “Add another category” and “Add another expense” buttons; these are cleaner and allow users to click on the entire button, rather than an icon to the side of a text message. When initially adding expenses or categories, there is an X icon signifying a cancel feature. Deleting saved expenses or contacts is a button as well.

Screen 7) During paper prototyping, many users expressed the wish to add multiple expenses at one time, so we added this feature to our final design. After saving all expenses, users are returned to the budget summary page. Although one heuristic evaluator thought that it would be better to reset the expense form to one blank expense, we decided that users might become confused, think that we simply reset their form without saving their expenses, and try reentering all of their expenses. By redirecting the user and showing a toast message (pop up text) indicating they have saved their expenses, they will be able to see that their expenses have been saved.

Screen 13) Since the screens for viewing your budget and for viewing someone else’s budget look more or less identical, we added a brief popup/alerts (toast messages) informing the user to whose budget is currently being viewed. This message fades away after a few seconds, but when viewing someone else’s budget, their name also shows up in a header at the top of the screen, and persists until the user returns home.

  • No labels