Design
I. Home Page
The PennyPincher logo and home button appear at the top of the page in the header, and both link to the home page. At the bottom of the page, a footer menu holds three buttons, which allow the user to add a new transaction, view their transactions summary, and edit the user settings. Simple images label these three buttons. The header and footer menus appear on all pages in the PennyPincher mobile web app, so that the user can easily access any of the necessary pages quickly and efficiently.
The home page displays a welcome message to the user, the user's total balance, and two drop down accordion menus. The user's total balance is the difference of the amounts displayed in the two accordion menus. The amount in the red accordion menu is negative. If the user's total balance is red, then this amount is negative, and shows that the user owes more money than he or she expects from other people.
When the PennyPincher home page is loaded, the top accordion menu already appears expanded, so that the user will know that these are accordion menus. The accordion menus are also labeled and color coded. The top accordion menu shows the amounts the user owes to other users. It is red and is labeled "You Owe:". This red accordion menu displays the net amount that you owe other users. The bottom accordion menu shows the amounts other users owe the user. It is green and is labeled "You Expect:". This green accordion menu displays the net amount that other users owe you. With labeling and color coding, users of PennyPincher will learn the meanings of the colors which are used throughout the web app. Furthermore, including the labels allows for users who may be color blind to still know what both accordion menus show. The "You Owe:" accordion menu appears before the "You Expect:" accordion menu because owing money to other people is usually an immediate or more urgent thing that people want to take care of. Furthermore, the menu is red to show a "negative" balance, since a majority of users will associate the color red with something negative that they may need to take care of immediately.
Within each accordion menu, PennyPincher provides a list of users and amount that you owe the user or the amount that the user owes you. These fall under their respective accordion menus. Tapping on any of these users will bring you to the page which will show you the details of your transactions with the selected user.
II. Add a Transaction Page 1
Required Title, Total Amount, and Description of Transaction
The add transaction page contains fields for the user to enter the title, total amount, and description of the new transaction the user wants to create. These fields are required and if they are completed, PennyPincher will alert the user.
Choosing People Involved in the Transaction
When adding a new transaction, the user has the choice to be included in the transaction. The Add Transaction form contains a checkbox labeled, "include me in transaction". If the user checks this checkbox, the "People in Transaction" list beneath the search bar will contain "Me" to show that the user has decided to be included in the transaction. To add another user to the transaction, the user uses the search bar, labeled "Search Names". The search bar uses autocomplete, which is populated by a list of all users. To include another user in the transaction, the user simply taps a user's name to select that user. This user's name is then added to the "People in Transaction" list. Additionally, PennyPincher is also set up so that a user cannot appear in the "People in Transaction" list more than once. This eliminates the possibility of users being charged twice in a transaction. If the user made a mistake and accidentally added a user to the transaction, the user can just tap and hold the user's name in the "People in Transaction" list to delete this user.
-Adding a Transaction with One Other Person
-Adding a Transaction with Multiple People
III. Add a Transaction Page 2
