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 Rob, 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 it's 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, satisfied there that won't be any more late fines in his future.
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 for the first time user. The large buttons, underlined links, and tabbed interface give many affordances to the user to instruct them on how to use the site. The majority of the site takes on a form interaction style with the user. This then allows the user to operate in a setting that he or she is used to seeing. However, there is the fact that some preference screens and edit screens can only be reached only through certain other screens. This will delay learnability by the user, as they need to recall the process of how 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. Yet even that would benefit from a function that allowed the user to understand where they are and how to 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 having to input the same bill for 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 to Housebill.com. He has just signed onto the site with his username, "user123", and is redirected to his User Page. Here, he set his preferences to automatically display the bills that are due within a week. The User Page shows his that relative to now, he will owe $85, and there will be 3 bills to pay. Satisfied that he can cover this amount by the end of the week, Rob is curious as to what over bills he has coming up in the near future.
To see these future bills, Rob moves the timeline scrollbar at the bottom of the page to the right, stopping at the 3 weeks point. Now, his User Page has refreshed to show the bills that will be due in 3 weeks' time from now. Rob sees that he will owe $940 dollars in 3 weeks, and sees that there will be 5 bills to pay. Curious about the details of the bills, he clicks on the largest bill of the group, the rent bill.
Once he clicks, Rob is redirected to a Bill Page which shows him the details of the rent bill. To his surprise, one of his housemates, Umbridge, who goes by the username "buddyU", has already paid her share of the bill. Rob knows that he can afford to pay his share of the rent bill now and, not wanting to be outdone by Umbridge, he decides that he will pay the bill now. Rob writes a check to the landlord and goes downstairs to put it in the landlord's mailbox. When he returns to his computer, Rob clicks on the "Pay Bill" link at the bottom of the rent bill. This updates his payment status to "paid". Satisfied, Rob logs off of the site.
Analysis 2
Learnability
This design is easy for the first-time user to grasp because it concentrates on presenting only the bills to a user. All of the links are underlined, which gives them the proper affordances. Similarly, the timeline is implemented as a scrollbar, so users will understand how to manipulate it. All of the links are large, and buttons are likewise visible. This means that the user will be accustomed to dealing with similar interfaces, and this will make the implementation easier to manipulate for the first time.
Visibility
The site presents information to the user that is not visually cluttered. The user's locus of attention on their main User Page directs them to the most pertinent information: when bills are due and how much the users owe. The timeline scrollbar is always visible, bit it is never intrusive for the user. Additionally, the user's username, the logout option, and the button for user's preferences are always located in the same part of the page header, which makes them easier for the user to find.
Efficiency
It is efficient to be able to pay all bills at once since many users in a house may just be making one check to another member in the household to actually pay the individual companies. Similarly, the interface groups bills according to date, so the user is not bombarded with information that they do not want to see, and they can choose how much information should be displayed. In addition, experienced users will benefit from the constant header, which has all of the user preferences and login/logout features.
Error Prevention
There doesn't appear to be an undo feature, and if one user accidentally clicks pay all, the entire billing system could be then erroneous. Having to go to the individual bill view to pay a bill safeguards against one bill being paid over another accidentally that could occur if the bills were in a list. However, the delete features are harder for the user to click to, so it is less likely that the user will accidentally delete something useful from their account.
Design 3
Storyboard 3
Rob Miller is a first time user to Housebill.com, and is looking for a way to organize his bills between himself and all of his suitemates. He looks at the main page of the site, and reads the static descriptions there. Intrigued, he clicks the "Join Us" button, which directs him to a form to make his account.
Rob fills out his username, "testUser", along with his password "SuperSecretBob", and chooses to leave his email out for now. While filling this information out, Rob is reading the right-hand column of the sign-up page, which lists a bunch of benefits to using Housebill. Convinced, he clicks "Create Account," which takes him to the logged in page.
On the logged in page, Rob has the option of either joining a household, or starting a new one. He also sees a pie chart of his budget/spending in the lower right-hand corner, but seeing as how he has no budget yet, this feature is grayed out. Similarly, he sees a calendar directly above the pie chart, but it does not have any information on it yet.
Rob is not sure if any of his friends are on Housebill, so he decides to make a new household by clicking on "Create a Household." This takes him to the Create a Household Page, which tells him to pick a household name, for which he enters "test House." He enters a password for the household that other users would use to gain access, and sets it to "home." In the share with friends section, Rob enters his suitemate's email, "email@bla.com". The site also tells Rob the link to this household in case he wants to send someone that link, but he chooses not to do that at the moment. Rob hits the "Create Household" button, and is transported back to his User Page.
Now that Rob has added a household, he sees the options of "Add a Bill" and "Pay a Bill" under this "test House" header. This household section also has subsections for what Rob owes, what is owed to Rob, and what the household's outstanding bills amount to. Because there are no bills yet, Rob decides to add the water bill to the test House household, and clicks the "Add a Bill" button. This takes him to the "Add a Bill Form."
While Rob was looking at his user page, one of his friends decided to join Housebill. He sees his "friendUser," which is the username that they chose, among the list of users. The Add a Bill page lets Rob pick a household, pick the users that he wants to bill, set whether this billing amount is in an "exact" form or in the form of a percentage, and then enter the total bill amount. Rob sets the percentages to 50% - 50% for the split between friendUser and himself for the water bill. He puts in the bill amount as $100, and files the category as "Utilities." There is a calendar in the lower right-hand corner that Rob users to set the due date of the bill to the 15th of March, 2011. He does not want the bill to repeat each month, at least not yet, so he finishes his form but clicking on the "Add BIll" button.
The next screen that Rob sees is a confirmation screen, which summarizes the bill that he was about to add. He goes over the fields that he has entered, and clicks "Confirm," which creates the bill.
Upon creation of the bill, the user is taken to the main User Page screen. Here, the user sees the test House household, along with the bill that was just created. The Pie chart is no longer grayed out, and the calendar now displays the date when the water bill is due. There is a "news" subsection of the test House Household, and it updates to say that "testUser added waterbill."
Rob then clicks on the "test Household" link itself, which gives him a breakdown of what him and friendUser each owe, and offers him the ability to pay his bill with a "pay" button. Rob is not ready to pay his bill yet, so he decides that he has made enough progress for one day and signs out of his session.
A month later Rob decides to log back in and check on the household. Now that he has paid some bills the chart is filled in with where his money went and there are more news items. There are also more items on the calendar. Nothing is due too soon so he logs out again satisfied.
Analysis 3
Learnability
Learnability of the site for the initial tasks is good. The website uses large buttons to transition the user to the different states of creating an account, creating or linking to an initial household, and adding or paying a bill. Learnability for some of the less frequently used tasks like deleting a household or bill may be more difficult since there is no information scent on the main user interface to direct users to where these additional features can be found.
Visibility
Visibility on this site is very much like learnability. There is little information scent to direct users to the less frequently used features of the site making their visibility poor. This is a trade off for good visibility of the states the user would normally find himself in where the information is very good linking him from one view to another. Also, the user receives instant feedback on every action they commit, also helping visibility.
Efficiency
An advantage of this design is the efficiency of having most states that the user would want to see available from the original user view. The direct manipulation of bill creation helps error prevention by only allowing "approved" information to be entered into the bill form; however, users trying to create bills quickly will find the direct manipulation will slow down progress by making users need to click more objects instead of being able to navigate through the form by tabs.
Error Prevention
The confirmation screen after creating a bill helps prevent error prevention by making users confirm the bill information twice. There appears to be nowhere to edit bills once the bill is created, which will allow errors to propagate if they are created. The detachment of having the delete bills and household from the main interface will prevent accidental deletions helping error prevention.
Design 4
Storyboard 4
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 list of the households he belongs to and 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 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 4
Learnability
A frequent user will be used to navigating only the left column of the site, which is where all of the login fields are located. 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 main pages on the site are displayed prominently in the taskbar at the top of the user page. This lets users access the bills, user, and calendar views. A new user will be able to understand the overall structure, although some functions need to be better grouped. For instance, the Household display in the lower left hand column could use some "change" or "add new" buttons so that the user does not need to search for the Household View in the main User Page to make these types of edits.
Visibility
Information about users and frequently accessed households is visible in the left 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. Any information that needs to be entered has an associated text field, which provides the appropriate affordances. However, some of the pages contain too much information, which could be a hindrance to the user. The User Page faces this issue.
Efficiency
There is a bit of redundancy, which users may find confusing. For example, the User column on the left displays information that is simultaneously displayed on the middle of the User Page. This real estate may be used for other means so that the information in not doubly presented. Users can find a bill from the user page, the bill listing page, or the calendar. This makes is easier for the user to find a piece of information, but the information scent used to get to it may need more fine-tuning. Overall, the ability to navigate to a page from multiple locations will help efficiency by forcing the user not to navigate through a longer route and will help learnability by not forcing the user to memorize one distinct path.
Error Prevention
This implementation is not great at dealing with error prevention. This design does not allow the user to undo transactions, although before a transaction goes through the user must review a confirmation page. In addition, information tends to be clustered together, so mis-clicks could be an issue. To deal with this, it would be a good idea to place less information on a screen.