In this design, Ben comes to the website (Figure 1) and clicks on the “Sign Up” button.
(Figure 2_1)
Clicking on this button opens the sign up form (Figure 2_2), as an overlaid page on the original site. Ben enters his details into the form and clicks on “Sign Up”.
(Figure 2_2)
The home screen Ben sees is the home page for non-MIT affiliates (Figure 2_3).
(Figure 2_3)
He clicks on the “Create Post” button on the top right, which takes him to the page to create post (Figure 2_4). He enters all the relevant details about the post and then clicks the “Save” button at the bottom. This takes him back to his home screen.
(Figure 2_4)
Alyssa comes to the website (Figure 2_1) and clicks on the “MIT Student” button. Using her MIT certificates, she is logged into the website and sees the home page for MIT affiliates (Figure 2_5).
(Figure 2_5)
She clicks on the “Browse Posts” button, which shows him all posts in the form of icons displaying the job title, job type and job group (Figure 2_6). She can filter posts according to these options.
(Figure 2_6)
On this page, hovering over a post icon, displays a brief description of the post. Clicking anywhere on the post or its description opens the post description page (Figure 2_7). 
(Figure 2_7)
Alyssa clicks on the “Send Message” link on the bottom of the page, which takes her to the page to create messages (Figure 2_8). She writes the message and sends it to Ben. This takes her back to her home screen (Figure 2_5).
(Figure 2_8)
On Ben’s home page, the “Messages” button will now be highlighted to indicate that he has new messages. He clicks on the button, and is taken to his messages page (Figure 2_9). The new message is highlighted to indicate it is unread.
(Figure 2_9)
Ben hovers over this message to see a brief description, and then clicks on it to view the message (Figure 2_10). Ben reads on the message and then clicks on “Reply”, which takes him to the “Create Message” page (Figure 2_8). He sends Alyssa his reply, and they set up a time to meet.
(Figure 2_10)
Dragos also comes to the website (Figure 2_1) and clicks on the “MIT Student” button, and is logged in to his home page using his MIT certificates (Figure 2_5). He clicks on the “Browse Posts” button, and hovers over Ben’s posting (Figure 2_6). In the description displayed, he clicks on “Follow”.
To view his newly-created post, Ben can sign in to the website using his username and password (Figure 2_1), and click on the “My Posts” button on his home screen (Figure 2_2), which takes him to the page where he can view his posts. This page is the same as that in figure 2_6, but on this version of the page, he has the same icons, but now instead of the “Follow” and “Send Message” links on the post description, he has an “Edit” link to open the post for editing (using the same form as (Figure 2_4) but with a different breadcrumb i.e. Home>>Edit Post), as well as a “Send Message to Followers” link, which opens the create message page (4.a-2). He changes the deadline for this job to a week later.
When Dragos logs in the next time, on his home screen, the “Post Updates” button is highlighted as he has an unviewed post update. Clicking on this button, opens a page similar to the messages page, with an update that the deadline for Ben’s post has been updated.
After Ben decides to hire Alyssa, he clicks on the “Send Message to Followers” link on the post description, and sends a message to all followers (i.e only Dragos here), that the position is now closed.
Design Analysis
Learnability:
The interface is learnable as it uses many of the commonly employed affordances, such as buttons, and links. Aspects of the system model (posts, messages etc) are represented well by the interface. Also, the interface uses mostly recognition rather than recall. The interaction style is a combination of direct manipulation with menus and forms. For example, hovering over a post gives instant feedback by displaying a short description of the post, but clicking on “Show More” displays a new form. Novice users should find the interface easy to navigate.
Efficiency:
For an MIT student, the process of logging into the website is a little inefficient as it requires an extra click of a button. However, apart from this feature, the design is quite efficient. The use of big icons to represent messages and posts gives the user a large area to point, and thus makes the user interface efficient (using Fitts law). To click on a post/message, the user can click on the icon or on the ‘Show More’ link, thus giving the user a large area to click. The only action, which requires more precise pointing (and some steering as the user has to point while keeping the mouse on the icon or description) is to send message (to creators of the post or to followers of the post), as the user has to point to the “Send Message” link. One aspect of efficiency that this design lacks is there are not many shortcuts for expert users.
Visibility:
Most features of the design, including the state, available actions and feedback are visible on all pages. For example, on the home screens, all pages you can go to (Create Post, Browse Posts, Posts I’m following, Post Updates etc.) are represented as big buttons on the screen, and thus are very visible. Hovering over a button highlights it, indicating it is clickable. Any new message highlights the “Messages” button in a different color; similarly, a new post update highlights the “Post Updates” button. While browsing, hovering over an icon of a post highlights it and displays a short description. The description also has all possible actions a user can do with a post (follow, send message to creator etc.). Breadcrumbs are used to indicate which page in the page hierarchy we are on, and also make it possible to go to a parent page. Although we do not have feedback right now for some actions (e.g. there are no messages such as “Post has been created”, “Message has been sent”, “Post has been deleted”), we intend to add these at the top of pages, without altering the conceptual design of any page (these will be similar to the simple messages Gmail displays, and deletes will have options to undo as well).
Error Prevention:
Most potential errors are easy to undo. For example, if a user clicks on “Follow” for a post, the “Follow” link changes to “Unfollow” (giving immediate feedback. This allows the user to immediately undo his action. Posts can be created, read, updated and deleted. The only actions that cannot be undone is sending messages, which is a feature of all message sending/receiving programs (including e-mail).