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