Scenario

Robert Miller has just finished a long day of work as a trader in a prestigious Wall Street investment firm. The job has grueling hours, and at times he doubts his life decision, but he hopes to "make it big" in the coming months with a tip-off that he got from a friend in the airline industry. He likes living in NY, but has only been there for a couple of months, so he doesn't yet have the money to move into his own place. Instead, he shares a loft apartment with four of his college pals. They're great guys, but absentminded at times. Rob walks into the loft, all ready to plop on the couch and vegetate while watching some Modern Family. He replays the day in his head, upset that he lost out on the office football pool to Brad, who doesn't even care about football and just bought a box to not be left out. Well, thinks Brad, suits him right for thinking that the Jets would actually turn out to be a decent team. Rob gets up to get a beer, and glances at the coffee table, the mail strewn all over it. It was Amy's turn to sort the mail, and obviously she hasn't, which angers Rob, seeing as how he usually ends up sorting it. He looks through the envelopes, seeing if he has anything interesting. Then, he finds an envelope, slightly larger than the rest, with "Urgent, Overdue Notice" stamped in angry red letters across the front. He tears off the top of the envelope, and its from the electric company. Didn't he tell Ben to mail this weeks ago? Now there'd be fines to pay, and the whole thing would be a huge hassle. Rob waddles over to his computer, dejected. There's nothing that he can do about the electric bill now, although Ben is certainly going to get a talking to. And Amy, for that matter. But there is no way that Rob is letting something like this happen again. He's not made of money, and he certainly doesn't plan on shelling it out in fines. Bills are high enough as it is. Luckily, he remembers something that Bethany, a fellow trader, mentioned at work. She was telling him about a new site that she used to take care of her bills, and Rob wanted to give it a look. He types in "www.housebill.com" into Google Chrome and sets to work. 

Rob arrives at the first page of the site and takes a look. 'Hey, this looks cool,' he thinks to himself, 'and its exactly what I was looking for.' Rob clicks on the sign-up button and signs up for an account. He uses his favorite username 'BobtheBanker'. He confirms his username and password, and submits the form. Once logged in, Rob makes an additional household, titled "NYC Loft" for the apartment that he currently lives in. He is not sure that his suitemates have accounts on the site, so he shares the household with them by typing their emails into the form. For this "NYC Loft" household, he adds the electrical bill. Not wanting to wait for more overdue fines, he writes a check to the electrical company, and goes downstairs to mail it. when he comes back to his computer, he enters the bill as "paid" on housebill.com. After that, Rob puts in the gas and water bills. He looks over these bills in the calendar view before logging off.

Design

Design 1

Storyboard 1

When Robert Miller navigates to housebill.com, he sees the first page of the site. Here, there is a dynamically refreshing demo, which tells him about the site and its uses. There are screenshots, which show several of the site's common tasks. At the top of the site he sees the option to sign into the site, or to sign up. Seeing as how this is his first time using housebill, he opts to sign up.

He is greeted with a signup form, and enters his information. He chooses the username "BobtheBanker," and the password "SuperSecretBob." He enters in the the email address "Bob@gmail.com," and after confirming the fields, he submits the form. He waits until there is a confirmation email in his inbox, and then clicks the link in the email. This takes him to the signed-in Account Page of housebill.

At the top, he sees a banner telling him that he is logged in as Rob MIller, which is correct. He has the options of signing out or changing his password, but he does not want to do that yet. Instead, he clicks on the "Add Household" button on the main page.

This takes him to an Edit Household Page, where he has another form to fill out. He puts in the information for the loft that we lives in, titling it "NYC Loft." He puts in his address, "123 Canal St., NYC, NY 10246," and adds the members of his household. He is not sure if his roommates already have housebill accounts, so he enters in their email addresses. There is "amy@gmail.com", "ben@gmail.com", "dave@gmail.com", and "vanessa@gmail.com". The 'member' fields only add one at a time, so every time Rob adds a new member, he must click on the "add another" button. When he is done, he clicks the "submit" button, and is brought back to his Account Page. He sees an entry for the "NYC Loft" household. To his surprise, Amy is already on housebill, and the site matched the email address he provided to her account. Rob then clicks the "Add Bill" button under this household.

He is directed to the Edit BIll page, where he puts in the name of the bill as "Electrical Bill". The household field is preset to "NYC Loft," but had there been other options for households, they would have been selectable with a drop-down menu. Rob enters the total amount of the bill, $150, and divides the cost into the appropriate chunks for each member in the section titled "Amount Per Member." After entering the due date, "March 13, 2011," Rob submits the form.

He gets sent back to the Account Page. This time, he utilizes the page's tabbed view, which allows him to choose between a Household View and a Calendar View. Up until now, Rob has been using the Household View, to see the details that he submitted for the "NYC Loft" household. This time, Rob uses the Calendar View, which shows him the dates that individual bills are due.

After making sure that the electrical bill he just entered appears correctly on the calendar, he goes back to the Household View, and clicks on the "NYC Loft." This shows him a screen with the household, with the address and members displayed, along with all of the bills for the household. Through this screen, Rob sees that Amy has already paid her share of the electrical bill. Satisfied with his progress, Rob logs out of housebill.

Analysis 1

Learnability

This design is pretty learnable to the first time user. The large buttons, underlined links, and tabbed interface give many affordances to the user to instruct the on how to use the site. The majority of the site takes on a form interaction style with the user, which allows the user to operate in a setting that they are used to seeing. The fact that some preference screen and edit screens can only be reached by certain screens will delay learnability by the user needing to recall the process to get to a certain interface. This can be fixed by a slightly adjusted layout providing more access points to similar pages throughout the website.

Visibility

This design does OK in visibility. The state of the bills is almost constantly available to the user, which is good, and the information scent on most links helps to navigate the user easily throughout the site. The emphasis on some areas of the site, like adding a household which some users will either never do or will do only once, seems to distract the user from their primary navigational needs. Navigational help is missing throughout most of the site except in the tabbed area that would be useful for a user to understand where they are and backtrack.

Efficiency

Efficiency may not be as optimal as it could be. Users have to add bills individually so a user creating multiple similar bills would have to enter the same information in many times. Also, many changes like deleting a bill can only be done through certain interfaces such as the household view and not through the household itself, which hurt both learnability and efficiency. Editing bills is made efficient by having much of the information autofilled for the user. It would be nice if a repeating bill, like a cable bill that is constant, could be automatically set up to reoccur instead of a user have to input the same bill in every month.

Error Prevention

While hurting efficiency, deleting bills individually helps prevent errors; however, users may ignore confirmations out of habits and still delete bills accidentally. There is no error recovery currently in place so if a delete is mistakenly made, the user must redo their previous work. It is also ambiguous if deleting a household deletes the entire household or just unlinks it from the account which could cause further errors. Bill status is shown clearly in every interface which will allow any mistakes that have been made in submitting the bill to be seen immediately after the mistake is made.

Design 2

Storyboard 2

Rob Miller is a returning user of Housebill.com. He navigates to the site's home page, where he is greeted by the friendly "Welcome to Housebill!" banner. Because he is an experienced user, Rob does not bother looking at the main page with the screenshots and just types in his username, "BobtheBanker," and password, "SuperSecretBob," into the column on the left for returning users. He clicks the "Login" button, which takes him to his User Page. Here, he sees his username, a list of the households that he is a part of, his current balance, and the credit card that he has on file. Under these pieces of information are collapsible/expandable lists that detail the bills that he has due, the money he owes to other members, the money that other members owe him, and his recent activity. On the left column of the User Page, Rob sees a button to add new households. Under that, but also in the left column, Is the pertinent information to his most commonly accessed household. Here he sees that household's address, a list of members, and a list of pending members. These pending members are people who have requested to join the household, but have not yet been approved by the members of the household. Rob clicks on the "Add new" button to add a new household. This takes him to a "New Household" screen, where he enters the name of this household, as "MyHouse." Rob also enters the address of the household, and in the box labeled "Members to Invite," Rob enters the email addresses of the other members of the household. After clicking "create", Rob is redirected back to his User Page. Rob decides to click on one of the households, specifically the new one he just added, which is titled "MyHouse". He sees the 'Bills' version of the Household Page, which gives him a detailed list of of the bills for the household. Rob then decides to put in an entry for the water bill, and starts by clicking on the "Add new" button. He is taken to an Edit Bill screen, where he enters the type of the bill as "water", the due date as "3/12/11", the total amount as "$50", and in the shares section, he breaks down the bill by who owes what. After clicking on "Save Changes," he is directed back towards his User Page. Rob looks over the bills for the "MyHouse" household. Alice, one of his suitemates, has already entered a couple of the bills for the household, and Rob decides to check over them. The bills are ordered by due date, and also show the amount of the bill, as well as whether or not payment has been made. Rob clicks the "+" next to the water bill he recently created, expanding the listing and giving details. He sees that Alice has already paid her share, and decides to do the same. He clicks the "Pay Now" button next to the $20 dollars that he owes for the water bill, which takes him to a Confirm Payment Page. He sees the name of the bill, the amount, his username, and the last four digits of his credit card number. Everything looks correct, so Rob clicks the "Confirm" button to submit his payment. Once back at his User Page, Rob clicks the tab to go into Calendar View, which shows him all of his bills laid out by date. He sees that his next bill is not due for a while, and decides that he is ready to log out of Housebill.

Analysis 2

Learnability

Buttons that allow users to perform actions on a bill (edit, pay, etc.) are clearly labeled and placed next to the listing for that bill. Links to other pages on the site are displayed prominently in the taskbar.

Visibility 

Information about users and households is visible in sidebar. The other pages the user can view (user details, calendar, etc.) are listed in the taskbar at the top of the page. On the pages that list bills and show how much money the user owes, lines of data can be expanded to show further details, but by default they are collapsed to maintain visual simplicity. Clickable links are underlined; the user's current page is highlighted in the taskbar.

Efficiency

Users can find a bill from the user page, the bill listing page, or the calendar.

Error Prevention

Not great. Does not allow user to undo transactions, although before a transaction goes through the user must review a confirmation page.

Design 3

Storyboard 3

Analysis 3

Learnability

dd

Visibility

d

Efficiency

dd

Error Prevention

dd