...
Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).
On the first page of our site, we wanted to emphasize that the user has two options: to sign up for an account, or to sign in with an existing username and password. Because of this, we used buttons large enough to pass the squint test, and made them stand out by coloring them green. This first page of the site also has a blurb about Housebill's functionality, which we intended to attract new users, or to remind existing ones of our purpose.
INSERT FIRST PICTURE OF MAIN PAGE HERE
We wanted to make signing up for an account a simple, no-frills task. This meant that the user would have to supply only a minimal amount of information. For instance, joining a household is optional on the signup page, so a user does not have to worry about this feature and can opt to do it at a later time. The goal here is to have the user exploring the site as soon as possible, which minimizes the likelihood that a user gets frustrated with the signup and decides to devote their time elsewhere.
INSERT PICTURE OF SIGNUP PAGE HERE
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.
INSERT PIC OF FIRST PAGE SEEN AFTER SIGN-IN
Implementation
Describe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface.
...
We decided to use HTML5 with CSS for the frontend because it made our implementation easier to construct. Ruby on Rails allows for the creation of dynamic HTML pages, which means that we can put content from our database directly into our HTML, depending on the users' requests. . We used CSS to make the site visually appealing to the user. Using CSS also allowed us to have a different color scheme for alerts that we presented to the user for, for instance, incorrect data entry. We used jQuery wherever we wanted to change the contents of a page without having the user reload the page in their browser. For instance when a user inputs the total amount for a bill, we automatically split the bill up amongst the members of the household and show the user these amounts as they are typing.
Evaluation
Users were given a briefing and then given each task individually as tasks are completed.
...