Design
Login Page
Our login screen features a minimalist design, with the JobTracker logo, a brief paragraph on what services JobTracker provides, and a field where users can type their username. We decided to leave out a password field because there is no reason to ask our users to remember a password if we aren't designing for security. 
We do, however, require that our users provide a username so that we can load their data! This message appears every time a user tries to login with an empty username. 
We ask for a an email address as a username because email addresses are usually unique identifiers which the user has to remember anyway. Our login page, therefore, places little memory burden on the user.
Homepage
Our homepage features a two-column layout. In one column, the user can view all their tasks; in the other column, the user can view all their companies. At the bottom of the page are buttons that allow the user to add tasks or companies. At the top of the page are buttons that allow the user to add a document and to log out. On the homepage, as with the rest of JobTracker, we used green to highlight things we wanted people to pay attention to. Task and Company names are green, as are parts of the Add Document and Logout icons.
In our original design, documents were alongside companies on the homepage. By our first round of paper prototyping, however, we put tasks on the homepage instead, reasoning that users would want to view all their tasks much more frequently than they would want to view all their documents. The "Add Documents" button moved to the top left corner of the page, where it has stayed ever since.
When a user logs in for the first time, the task box and the company box contain text which describes to the user how to operate the interface and also tells the user what "task" and "company" mean in the JobTracker context. The text disappears from a box after the first time the user refreshes the page after successfully adding data to the box. It will reappear if the user ever deletes all her tasks or companies. That way, the user always has a very visible reminder of how to add a task or company, but the instruction text doesn't clutter the interface when it isn't needed. 
The two-column layout gives visibility to the two pieces of information the user is likely to be most concerned about: her upcoming tasks, and links to all her application materials for each company. The tasks are sorted by due date (with the nearest deadline appearing first in the list). They can also be filtered by company - so if a user wants to see just the tasks for one company, she doesn't need to leave the main page. Companies are sorted in alphabetical order.
The homepage has two kinds of buttons. We use the default text buttons at the bottom of the screen. These buttons are fairly learnable, as they say exactly what they are for. They are not as large as the buttons at the top of the page, but unlike those buttons, they can also be operated by tabbing until they are selected, then hitting the "enter" key. We did not take a lot of trouble to make this way of operating the buttons visible to our users, but it is consistent with the behavior of other websites and by default, browsers will highlight buttons when they are selected.
The buttons at the top of the page have a different appearance not only for aesthetic reasons but to differentiate them from the buttons that affect the content displayed on the homepage. The icons were chosen from an internet search for open-source icons. Both icons were fairly representative of the results of that search, and are similar to icons in widely-used applications (examples!). Furthermore, both icons have hovertext.
Adding a Document
When the user clicks on the Add Document icon, a modal dialogue box pops up, leaving most of the task and company boxes visible. We chose to use a modal dialog box instead of directing the user to a different screen because
Until the user has filled out all three fields, the submit button remains grayed out. This prevents errors with the submission. With another form, this might be confusing, but the asterisks and the notice about required fields provide a pretty clear hint about what could be wrong. Also, graying out buttons is a pretty common way of ensuring form completion, so most users will have probably seen similar behavior.
When the user hits the Cancel button, the modal dialog box disappears with no effect. If the user hits Submit, she receives a popup window to give her confirmation that something happened. Documents are invisible on the homepage, so we added the popup as a way of giving the user confirmation that something actually happened. 
Upon hitting "OK", the dialog box and popup disappear.
Originally we let users type plaintext documents directly into the "Add Documents" form. By our second iteration of paper prototypes, however, we dispensed with this feature, since our user tests found it to be confusing and because it needlessly complicated our interface.
Adding a Task
When the user hits the "Add Task" button, a new blank task is added to the task box. We chose to put the new task at the top of the text box so that it would be easily accessible to the user. Once the page is refreshed, the task moves to its sorted position.
The fields in the new task are full of default text which disappears when the user clicks on it. The default text tells the user what she is to put in the fields without wasting screen space with labels; its disappearance on click saves the user from having to delete the default text herself each time she wants to type in a new field. If the user forgets what a field is for, she can always delete the text she has entered there and remove focus from the field. This brings the default text back, in a manner consistent with default text in other web applications. 
Once the user clicks the save button, the new task changes appearance to match that of a normal expanded task.
Editing a Task
To edit a task, the user first clicks on a task to expand it. There are several affordances for clicking - the task looks like a button, and on the left it has an arrow pointing inward, which is a common way of denoting "unexpanded view".
After clicking, the font and background of the task change color and the arrow points down. These changes help distinguish unexpanded from expanded tasks. To edit, the user clicks the "Edit" button. 
All fields are now editable. Blank fields regain their default text, and the font of populated fields changes to look editable. The Save and Cancel buttons do exactly what they say they do. 
Adding/Editing Companies
The mechanics of adding companies are the same as for adding tasks. When a company is first added, the user can enter only the company name, a url, and some notes about the company. 
Once the company has been saved, more information about the company can be added by clicking on the "details" link. (and we did it for a good reason!) 
Deleting Tasks or Companies
Deleting tasks or companies can be accomplished by clicking the "x" on the task or company. Doing so brings up an alert:
We included the alert to protect our users' data.
Company Page
On our company page are four boxes, which contain the documents, tasks, notes, and contacts for that company. The process of adding documents and tasks is consistent with that on the homepage, except here, all "Add ____" buttons are the default text buttons. This is consistent with all addable thingies being present in boxes on the page. 
Documents
Adding documents is still accomplished by means of a modal dialog box. The only difference in this dialog box is that it does not allow the user to select a company - the company is determined by which page the user is viewing.
Once a document is added, it appears in a list, where it can be deleted or clicked on. If it is clicked, the document will be downloaded and (depending on the browser) may appear in a new tab. For example:
Tasks
All task operations are consistent throughout JobTracker. The only difference between adding a task on the homepage and adding a task on a company page is that, as with documents, you don't have to specify the company on the company page.
Notes
Notes can be added or edited by typing in a text area. Once the user begins typing, the "Save Note" button is enabled. The user can choose to save their changes or discard them when leaving the page.
If the user saves the note, a brief message appears by the Note label, informing the user that her changes were saved. It then disappears. 
Contacts
Contacts are added in a similar manner to tasks, but we did not use the accordion widget for contacts as all contact information can be displayed on one line. After pressing "Add Contact", the user sees new fields containing default text.
After filling in these fields and pressing "Save", the form contents are changed to look uneditable. Pressing Cancel instead will cancel the operation (whether add or edit), and the delete button works as elsewhere.
Unsaved Data
On both the company page and the homepage, if the user tries to navigate away from the page with any part of the page still in edit mode, she encounters this dialog box: 
This helps prevent users from losing data that they forgot to save.