...
Once the user is logged into the site, they are offered several different pieces of information, each of which take up their own corner of the screen real estate. In the top left, there is the total amount that the user owes, and the number of overdue bills appears in a large, red font. This will quickly attract the user's attention to any overdue bills, which we expect them to correct promptly. On the right side of the screen, the user sees their bills for the current month. This calendar serves as an overview. There is a larger version of this calendar available on a different tab, if a user wants to explore further than the bills for the current month. Next, there are two very prominent buttons towards the bottom of the screen, allowing the user to add a bill or to pay a bill. We expect these to be very common tasks on our site, and as such made these actions stand out on the page. The buttons are large, which comes from the application of Fitt's Law.
Overall, we wanted to emphasize what we thought were the most important pieces of information to the user, similar to Google's homepage.
We had intended to include a profile page with personal account information about the user, but we cut this after paper prototyping because no one seemed to find it useful. However, we did keep the display indicating how much money the user owes, putting it on the homepage instead.
One of the main tasks that a user will perform on the site is adding new bills. Because of this, we try to make this action straightforward, helping the user along as much as possible. For instance, when a user inputs the total amount for a bill, that amount is automatically subdivided up amongst all of the selected users. Similarly, a calendar pops up when the user wants to select the due date for the bill. This makes the selection process a simple point-and-click, instead of using drop-down menus or another selection scheme.
...
Bills are displayed as due on a certain day. We took this design approach, instead of listing out all of the bills due on a certain calendar day, so that the user would not be overwhelmed with information on a single screen. When the user clicks on a calendar day that says it has bills due, the user is brought to a page that displays all of the bills due on the selected day. It is on this screen that we give the user all of the information about the bills for the day.
We had intended to include a profile page with personal account information about the user, but we cut this after paper prototyping because no one seemed to find it useful. However, we did keep the display indicating how much money the user owes, putting it on the homepage instead.
Design Changes
We evolved our final design significantly from our original idea. A lot of our original idea, as presented by GR1, centered around the household, and we envisioned presenting bills to the user that pertained to the household they were part of. This meant that a user would see the bills for a the entire household, including ones that they were not personally responsible for. The rationale for this was that a user could be part of more than one household. This could be, for instance, a summer house and a college dorm. Our user testing, however, showed us that very few users actually have more than one household. Because of this discovery, we changed our application to center around the bills for a single user, instead of those for a household. This changed some of our tasks. For instance, we do not have a household graph of expenses. Instead, we present all of the user's bills to them.
...