Scenario
Ben is a recruiter for a Software company, is looking for a student in the Computer Science department to develop software for mobile devices.
Ben goes to the MIT Jobs site and signs up for an account by providing his name, his role (recruiter), his email address, name of the Company and the password for the website. Next, Ben creates a job post with the following specifications: position- Software Developer, type- internship, Course: 6, job group- Software, required competences- Java, location- Cambridge Massachusetts, application instructions- send resume by email, and deadline: March 11, 2010.
Alyssa is an undergraduate student in Computer Science. She has taken a core Java class (6.005) and is very apt in Java. She is also proficient in Python and C++. She is looking for a summer internship with a tech company. She logs into the MIT Jobs site (using her MIT certificates), She selects the department (Electrical Engineering and Computer Science), the job type (Internship) and job group (Software). She sees a listing of opportunities available for her. She finds the post made by Ben, which fits perfectly with her needs and is still within the deadline for applying.
Alyssa decides to contact Ben to inquire about the posting, and get some more details about the project. She writes the message to Ben and sends it. Ben receives the message and replies. They set up a meeting time to interview.
Dragos, an undergraduate at MIT studying Computer Science, is also looking for an internship during the summer. Like Alyssa, he is also good in Java. He already interviewed for a company that he is very interested in, but he would like to keep himself posted on a few other interesting opportunities for which he is qualified. He goes to the MIT Jobs site and decides to follow Ben’s job posting so that he gets updates about the posting.
Ben is interested in meeting more people for the position, but he did not receive enough replies. Thus he updates the job position and postpones the deadline by a week. Dragos receives this update. Other applicants send their resume via email to Ben, but none of them has a resume as good as Alyssa's.
Ben then decides that Alyssa will fill the position, and sends an update to all followers of the post that the position is closed. Dragos receives an update regarding the samer.
Storyboard designs
Design 1
Ben, a recruiter for a Software company, is looking for Software Developers at MIT. Thus, he goes to the MITJobs homepage (1). |
|
Since it is the first time that he is accessing MITJobs website, he does not have a MIT certificate. He signs up using the form shown on the right. After singing up Ben enters a new webpage (2a). He wants to create a new post and thus he presses the button “Create Post”, which is at the top-right of the page. |
|
Then a overlaid webpage (3b) appears in front of the old webpage. He fills in all the necessary information about the job opportunity and saves it. |
|
Alyssa, an undergraduate student in Computer Science, is looking for a Job in Software Development. She enters in MITJobs homepage and since she has an MIT Certificate, she directly signs in. Then she is forwarded to webpage 2a. |
|
At this stage, she browses the job posts, where there is a small description of every job. When she finds some nice job description, she clicks on it. After she clicks, an overlaid page with the description of the job post appears (just like the one in 3b, but without the save button). |
|
Alyssa decides to contact Ben to inquire about the posting, and get some more details about the project. At the post (3b) she presses the button “Message”, then she is redirected to page 4c, with the information of the recipient filled. She then writes her message, and sends a new message. |
|
She then receive a reply from Ben and the message is overlaid her inbox and looks like page 4b. They set up a meeting. |
|
In the meantime, Dragos, an undergraduate at MIT, who has already interviewed with another company, but would like to keep up with the updates from Ben’s job post. He signs into the website with his MIT certificate,browses the job opportunities and then chooses to follow Ben’s job post. |
|
After some days, Dragos enters again in the website and then chooses the tab “My Posts” (3a). He sees under “Posts I am following” that there is an update in Ben’s post. He clicks it and then an overlaid page with the post. The post contains the updated details enhanced. |
|
Learnability:
The interface is easy to learn since it uses several common affordances. The homepage is very similar to some webpages to social networks that are widely used, like Facebook, Twitter and Gmail. The tabs resemble the organization of a webrowser.
Efficiency:
This design is very efficient, since the user is on average three clicks away from whatever information it needs. First, to sign in or sign up, second to choose the right tab, and then to choose the information within the tab.
The only problem is that the user needs to sign in every time that enters in the website, which makes the website less efficient.
Visibility:
The main objects, browsing, posts ans messages, are very visible, since they are at the top of the page, right after the logo. If the user needs to do some task related to messaging, posting or browsing, there is a clear tab indicating them.
Also, for an employer the button to create a post is always visible at the top-right of the page, making it very simple to the employer to create a post.
There is the problem when reading posts or messages that the message or the post is over the screen and nothing can be done except editing the post or message on the website. But when replying to messages, the old messages is always appended at the end of the reply, so the user knows what is the content of the original message.
Error Prevention:
The buttons have a clear description of what they make (like delete or follow), but there is no way of undoing any action.
Design 2
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).
(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 3
Ben comes to the MIT Jobs website and since he is not an MIT affiliate, he clicks on the Non-MIT tab at the left. He is presented the interface on fig_2 with options to either sign in or to sign up.
fig_1
Ben is new to the site, so he proceeds to sign up by filling the form. On clicking “Sign Up” at the bottom of the page, his account is set up and he is presented with the interface in fig_2.
fig_2
From this page, Ben can view his previous posted positions and messages but since he is new to MIT Jobs, both of these are empty. To proceed to create his first job post, Ben clicks on the “Create Post” button at the top right. He is presented with the interface on fig_3.
fig_3
He enters the specifications for the job he is posting by filling the displayed form. On clicking “Create Post”, he is returned to the interface on fig_2. The post he has just created appears as the first post on the list of posts on the list of posts at the left. If he had earlier posts, Ben could browse them now, maybe see if some users have commented on the posts and if so respond to the comments. He could also view messages from applicants by clicking the message tab at the top of the page.
Alyssa, an MIT student, visits the MIT Jobs site to look for an internship for the summer. She clicks on the MIT tab at the left and is presented with the interface on fig_4.
fig_4
She then clicks on the huge “Sign In with MIT Certificate” button at the center of the page. She is now presented with the interface on fig_5.
fig_5
The few tabs at the top allow her to transition between viewing all posts, posts she is keeping track of, updates to posts she is tracking and her messages. Since she is looking for an internship, Alyssa clicks on the “Browse” tab at the top left of the page so that she is within the set of all posts to MIT Jobs. She then adds some filters, say “internship”, “summer” and the set of posts that are displayed becomes more specific to her search. Eventually, she singles out Ben’s post as a potential good match. She clicks on the post and it is displayed in the right panel of the interface. she reads the specifications of the position and figures she fit the profile. She clicks the “follow” link at the bottom right so that she can get updates on the position. She also decides to send a message to Ben to express her interest in the post. She clicks the “Message” link at the bottom right. A textbox appears below the Job post with a “send” and “discard” button under it. She types her message and clicks “send” when she is done.
Dragos, another MIT student, follows the same procedure as Alyssa to log into the MIT Jobs site and to search for an internship for the summer. He also likes Ben’s post. Unlike Alyssa who is not already interviewing with any companies yet, Dragos is in the third round of interviews with two companies that he really likes. He decides to “follow” the post from Ben, more as a back-up option in case his other interviews do not go well. He clicks on the “follow” link at the bottom right of the page -- this enables him to receive notification on any updates that are made to the advertised position. He also sends a message directly to Ben, to notify him of his current job-search situation.
A few days later, Ben wants to view the interest his advertised position has attracted. He returns to the MIT Jobs website (fig_1) and clicks on the Non-MIT tab at left to be presented with the interface on page 2. since he already owns an account, Ben logs in by providing his username and password and clicking on “Sign In” at the top of the page. He is taken to the interface on fig_2. He only has the one post that he created, but he can see that Alyssa’s message appears directly under the post. He also sees that the “Message” tab at the top of the page is bold and has “(1)” next to it. Below Alyssa’s message, there is a “reply” link that Ben clicks to produce a textbox with a “discard” and “send” buttons below it. He types his reply and clicks “send” to complete sending his response to Alyssa. He proceeds to click on the “Messages(1)” tab at the top of the page 3. he is then presented with the interface on fig_6.
fig_6
He has only one message, the one send by Dragos. He clicks on the “reply” button and a textbox appears on the page with “discard” and “send” buttons below it. He types his message in the textbox and clicks “send” to send it to Dragos.
After talking to Alyssa for a bit, Ben thinks she fits the profile that the software company wants. He seals the deal with Alyssa. On his home page (page 3), he clicks on “Create Message” at the top right of the page. He has an option to send send the message to all the “followers” of one or several of his posts. He selects to send the message to all followers of his single post and notifies them that the position is filled.
Dragos will see the message in his message inbox (fig_7), and know that the position is filled.
