Major Changes
Removed Groups
One major change to JobTracker companies as a result of our heuristic evaluations was the removal of groups. We originally allowed users to organize their companies into groups and to add documents to a whole group at a time, thereby propagating the document to the documents list of all members of the group. Groups were associated with a color, and the companies were colored by group on the homepage:
We thought groups would make users more efficient because they could propagate changes to many companies at a time. We found, however, that our users and evaluators just found them confusing and didn't understand their purpose. Our evaluators were also calling on us to shorten our forms and consolidate functionality onto the homepage. Therefore, groups have been totally removed from this version of JobTracker, and all companies have the same color. We feel that in removing groups, we have probably gained more in simplicity and learnability than we lost in efficiency.
Consolidated Forms
In previous versions of JobTracker, we had our users leave the homepage to add documents, tasks, and companies. In this version, all of these are added from the main page. We changed this after comments on our heuristic evaluations about how leaving the homepage hurt the visibility and efficiency of our interface. Having made the change, we agree: users can now see much more information when they are adding a new item, and they can add several items of different kinds without ever having to leave the homepage.
Color
We chose to design most of the website in blue. Our default text (instructing the user what to put in a field or a box) is gray. Label and alert text is black. We use orange for expanded accordion widgets, and green or brown for things we want the user to pay attention to, such as icons and names of companies and tasks.
Font
We use a sans-serif font for user data (tasks, companies, contacts, documents) and a serif font for everything else.
Login Page
Our login screen features a simple 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. 
If the user neglects to enter a username, the popup below appears, telling the user what went wrong and preventing him or her from proceeding.
We chose to ask for an email address as a username because email addresses are usually unique identifiers that don't require any extra memory commitment on the part of the user (other than perhaps remembering which email address he or she used!).
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 (clicking on the logout button returns the user to the login screen). To minimize errors, the icons are on opposite sides of the screen.
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.
As an aid to learnability, the task box and the company box initially contain text that 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 the first time the user refreshes the page after successfully adding data to that 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.
This instruction text does nothing when clicked. This prevents future confusion on the user's part when the instruction text goes away; the user learns how to add a task or company normally while the instruction text is around to help.
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. For efficiency, the tasks are sorted by due date (with the nearest deadline appearing first in the list) so that the user can easily see what needs to be done most urgently. The tasks 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. The list of companies is 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 very 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. For efficiency, we allow the user to add multiple tasks or companies at once by clicking the appropriate button several times, and then filling out each new form and submitting it.
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 "add document" and "logout" icons. Both icons were fairly representative of the results of that search, and are consistent with icons in widely-used applications. As an aid to learnability, the text "Add Document" or "Log Out" appears when the user hovers over these icons.
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 after our heuristic evaluators opined that we should make our users leave the main page as infrequently as possible to improve the efficiency and visibility of our interface.
Until the user has filled out all three fields, the submit button remains grayed out. This prevents errors with the submission. With a larger 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 common way of ensuring form completion, so most users will have seen it and know what to expect.
When the user hits the Cancel button, the modal dialog box disappears with no effect. If the user hits Submit, he or she receives a popup window to give her confirmation that something happened. Documents are invisible on the homepage, so we added the popup for the sake of visibility. We used to have a green alert message appear below the title on the homepage, but we found that users failed to notice it and became confused about whether their document had been uploaded or not. The popup is much harder to ignore.
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 and visible to the user. Once the page is refreshed, the new task is sorted with the rest of the task list.
The fields in a new task contain 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 an 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, is highlighted on mouseover, and has an arrow pointing inward, which is a common way of denoting "click to expand".
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 task, the user clicks the "Edit" button.
After clicking "Edit", all fields become editable, and blank fields are populated with their default text.
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. 
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 implemented these alerts to protect our users' data, especially since the "details" link is somewhat close to the "delete" button and because we have no "undo" functionality. We feel that this alert box does not catastrophically impede our users' efficiency, because our users are unlikely to be deleting large numbers of tasks or companies at once.
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 in that all buttons that make visible changes to the page are text buttons. We chose the four-box layout because it is consistent with the homepage and because it uses screen space reasonably efficiently. The notes and documents boxes are on the top row because we felt that users would accumulate more tasks and contacts than they would documents and notes, and so we wanted to make that the documents and notes were still easy to find on the page.
Documents
Adding documents is still accomplished by means of a modal dialog box. The company-specific dialog box 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, the user does not have to specify a company on a 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, while also allowing them to efficiently discard many changes at once if they desire.