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
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
When the user is only adding a transaction with one other person, and all fields of the transaction are ready for submission, the user can hit the "Submit" button at the bottom of the "Add Transaction" form.
-Adding a Transaction with Multiple People
When the user has indicated that he or she is adding a transaction involving multiple people, the "Submit" button of the form is dynamically changed to a "Next" button at the bottom of the "Add Transaction" form. When all users involved in the transaction are selected and all transaction fields are ready for submission, the user can hit the "Next" button to go to the next page to determine how to split the amount between users and finalize the transaction.
III. Add a Transaction Page 2
On the second page of the "Add Transaction" form, which is only reached when there are multiple people involved in the transaction, there are two radio buttons at the top of the page for the user to indicate either an even split or a custom split of the transaction amount amongst those involved. The second page of the "Add Transaction" page is defaulted to even split,
IV. Summary of Transactions Page
Clicking the middle icon of the bottom navigation bar takes the user to the summary page. Here, the user can view his or her net balance with all of the other users that he or she has transactions with. The interface is a simple list interface, and when a list item is clicked, it takes the user to the individual summary page of that particular user.
V. Details of Transactions with User Page
The details of transactions with user page gives the user of the application a detailed breakdown of each transaction he or she has with a particular user (in this case, the particular user is "bina"). The view is organized in with collapsible rows to preserve screen space especially on mobile devices. The top level collapsible is the date of the transaction. Within this collapsible holds the titles of different transactions that occurred on that date. Each transaction collapsible holds a "settle" or "dispute" button. Transactions where the user owes "bina" money are disputable and transactions where the user paid for "bina" can be settled when "bina" pays the user back. When all transactions of a particular date are settled, the view automatically refreshes, popping the newly settled date down into the "settled transactions" section, and the color of the