Design
When a user first comes to the website, he is showed the log in page. The user can log in either with MIT certificates, or with a previously registered username and password or by signing up for a new account. For efficiency reasons, we decided to have the sign up form on the first page itself, rather than having a “Sign up” button/link leading to a different page.
Figure 1: Log in page
After signing in or signing up, the user enters the website (Figure 2). At the top of the webpage we added the message “Welcome” followed by the name of the user. This message is centered on the page for clear visibility, and to give the user a hint that he/she has started a session. For MIT students the default tab opened is the Browse tab, as browsing is one of the most critical tasks of the system. For non-MIT users (recruiters), the browse tab is hidden so we the default tab opened is "My Posts", as for these users, viewing and editing their own posts is key. We decided to use tabs as we had only 3 main views and tabs were suited for navigational visibility; we made this decision while paper prototyping.
Figure 2: Browse tab.
Users can filter posts on the same page. As soon as a user changes the value of a filter (e.g. course), posts are updated for instant feedback. In our initial design scenarious (before paper prototype), we had a separate page to enter filters before displaying posts. We decided to not to do this as it reduces efficiency of the interface.
Each course has its own job groups. For example, under course 6, we have Hardware, Software, Electrical Engineering, Consulting and Investment Banking. There are some job groups, namely Consulting and Investment Banking, are common through all majors. On selecting a job group, it is displayed with an “X”, in case the user wishes to to delete the filter. An example of filtering is showed in Figure 3 with the filters on the left of the page, along with the resultant job posts.
Figure 3: Filtering job posts
Users can follow a post in the follow tab by clicking the "Follow" button next to the post. Initially, when a user clicked on "Follow", our interface initially only had the text on the follow button changing to “Unfollow”. Our TA, Vijay, in his evaluation of our computer prototype brought to our attention that this feedback does not pass the squint test. As a result, we decided to also change the color of the button to red to ensure the feedback is clearly visible. Figure 4 illustrates this feedback
Figure 4: Following job posts
To create a post, the user can click on the "Create Post" button. We decided to put a button to “Create Post”, which is visible throughout every tab, as opposed to being able to create posts only through the “My Posts” tab. We did this to increase the learnability, efficiency and visibility of a critical task of the system: users being able to create posts. On clicking this button, an overlay form is displayed for users to create posts (Figure 5). Another issue that our TA brought up in his evaluation of the computer prototype was that in the "create post" view, the "Create" button is blocked from view (you need to scroll to see it). We addressed this issue, and ensured that this button was visible when the pop-up form was displayed.
When creating a post the user can change the Title, the Job Type, Course(s), the Job Group, Skills, Location, Date and Application Instructions. If the user decides, that he/she doesn’t want to create a post, he/she can simply close the overlaid box. If the user presses the "Create" button, the post will be saved, and the form closed. The user can see the updated changes in the "My Posts" tab and in the "Browse" tab.
The location form has an auto-completion property, which prevents the user from committing mistakes when filling this form. The date form when clicked shows a box with a calendar where the user can choose the date easily. These two features were added for error handling and for efficiency.
Figure 5: Creating a post
In the "My Posts" tab, the user can see the posts he/she follows, and also the posts he/she has created. He can unfollow posts, and also message creators of the posts he is following. This tab is illustrated in Figure 6.
Figure 6: My Posts tab
Clicking on the job post in this tab or in the browse tab opens the description of the post as an overlaid form (Figure 7).
Figure 7: Post description overlaid.
Users can delete the posts that they have created by clicking the "X" button next to the post. If the user deletes a post, a message appears at the top stating that a post was deleted and the user can undo the deleted post (Figure 8). This function was introduced after our paper prototype to facilitate error handling.
Figure 8: Deleting post
The user can see all the messages in the "Messages" tab (Figure 9), which is divided between three different parts: Inbox, Sent, Updates. "Inbox" includes messages received, "Sent" includes messages sent, and "Updates" includes updates about posts received (e.g. change in deadline). The total number of messages/updates that are unread is shown in red on the tab next to "Messages", and in Inbox and Updates, the number of unread messages/updates is also shown. These numbers were added during paper prototyping for state visibility.
At the left of each message there is a dot showing if the message is read or unread. If the message is unread the dot is red and is filled, and if the message is read, then the dot is blue and not filled. This feature was added for visibility. These features were added after paper prototype evaluation to increase visibility.
The currently open view (Inbox/Sent/Updates) is highlighted in light blue for navigational visibility.
Figure 9: Messages tab
The user can choose to compose a message either by clicking the "Compose" button the messages tab or by clicking the "Message" link on the "My Posts" tab. In the compose view (Figure 10), three fields appear at the right of the webpage: To, Subject and the content of the message. If the user gets to the page by clicking one of the "Message" links in the "My Posts" tab, the "To" field is already prepopulated with the appropriate recipient. If the user instead has got here using the "Compose" button, the "To" has an autocomplete drop-down with names of posts a user has created (if user wants to message followers of posts), and with names of posts he/she is following (if user wants to message the creators of a post he/she is following).
The user, then, fills all the information necessary to send a message and he/she can send the message. Also, a user can discard a message, if he/she decides not to write a message. We enabled this after the paper prototype to increase user control and freedom. If the user discards a message he/she is redirected to the “Inbox” folder in order to be consistent with applications such as Gmail.
Figure 11: Composing Messages