Scenario

Ben Bitdiddle is an MIT student who just finished the spring semester of his freshman year. He declared Course 6 as his major and is excited as he looks forward to all the interesting classes he has ahead of him in the EECS curriculum. Browsing the Registrar's course listings he decides it would be prudent to map out when over the next 6 semesters he plans to take each of the courses required for his degree (in addition to HASS classes and cool electives!)

First things first, he needs to decide which courses he wants to take next semester. Preregistration is just around the corner, after all! He needs to visit the EECS webpage to get an idea of which classes should come next based on the classes for which of them he has already taken the pre-requisite courses. He finds seven or eight CS classes he could take, but wants to narrow it down to three, with room in his schedule for a HASS class and a Sloan elective. He needs to plot out the days and times when these classes meet so that his schedule doesn't include any conflicts. Furthermore several of these potential courses are project and p-set heavy, so ideally he would take them with friends in the department. Finally, he has some leeway in terms of choosing between, for example, 6.041 and 6.042, and would like to make these decisions based on which courses have gotten the best reviews/ratings by students who've taken them in the past.

Ben spends a whole afternoon making complicated Excel spreadsheets of courses and their pre-req's, cursing the frustrating Course Picker Beta UI, opening dozens of eecs.mit.edu tabs in his browser, and text-blasting his friends to ask "When are you planning to take 005?" Ben is overwhelmed and the semester hasn't even begun!

In the nick of time, Ben’s friend and classmate Alyssa P. Hacker comes to his rescue with QuickPick.com; a brand new web app that makes choosing courses as easy as “Hello World”. With QuickPick, Ben and Alyssa can map out a plan for the rest of their time as MIT undergrads based on the classes their friends are taking, the courses and professors that their predecessors rated most highly, and when these courses are offered. What a relief! Once they've sketched out a tentative schedule, they can "Share" their plan with each other, with other classmates, and with their advisor to get feedback and suggestions. Likewise they can provide feedback and convince friends to take similar classes.

Designs

Sketch 1

StoryBoard

This design for creating a four-year plan offers students a fast and easy way to create their four-year plan. On the right hand side, students would see the requirements along with a number stating how many still have to be fulfilled; this allows the user to know how his four-year plan matches up with the requirements needed for graduation such as the GIRs and his Major requirements.  As Ben Bitdiddle starts, he can first fill the chart with his first-year classes; for ease, he can search for the classes he has taken and add them to his plan by drag and drop to the semester he wishes.  As he does this, the requirement information will change showing Bitdiddle the requirements that he may have partially fulfilled, but it would also show him what requirements he still has to fulfill.  He can then continue with the classes he is interested in taking; as he does, the planner will take the course availability (fall vs. spring) and prerequisites into consideration so that Bitdiddle can know what classes are available per semester and in what order he should take them.

As Ben Bitdiddle attempts to make his four-year plan, he first decides he wants to make his schedule for the upcoming semester then map out the rest of his plan.  He double-clicks on the current semester, Sophomore Fall, and the schedule appears.  It pre-fills with whatever he added in the four-year plan, and he can further develop it.  From this view, he can then see how they will fill up his weekly calendar.  He then notices a conflict between two classes; he is undecided on which one he wants to take.  He is then able to click on the class and see other friends who have shared their calendars with him and see what they are taking.  He looks at the two classes and sees that two of his best friends are taking 6.005 and chooses to take that over 6.006.

After having a rough sketch of his classes for that semester, Ben Bitdiddle wants to see how his classes matches up with his friends.  He clicks on his friend Noel Morales and then sees his classes, which have already been shared with him.  He gazes at it and sees that they have two classes in common; yes!, he'll have a study buddy for two classes.  Last he checks his second best friend Ruby Tamberino, and sees she has one HASS class that sounds really interesting.  Ben Bitdiddle then returns to his schedule and makes the change.  After developing a schedule for this semester that he is happy with, he continues on and completes his four-year plan that he is happy with.  Lastly, he wants to share his schedule with his associate advisor to make sure it seems reasonable.

The above diagrams allows Ben Bitdiddle easily fix his problems of developing his four-year plan.  He is able to easily create a four-year plan, work on his current schedule, and lastly share it with friends.  He is now happy that he was able to do it easily and can start off the semester with confidence.

Analysis

 

Good Points

Bad Points

Learnability

  • Users understand drag-and-drop procedures easily, thus as long as the interface is able to afford draggability to possible semesters, users will be able to see how to add classes to their four-year plan.
  • A common layout stays common throughout the different tasks and views.  This offer users consistency; as they learn to search and add classes to their four-year plan, they will able to do it similarly to their semester schedule.
  • Better information should be made for the requirements section in the four-year and current schedule view.  It should specify exactly what it shows: Requirements Left.
  • How to delete and remove a class from the current schedule or four-year plan is not easily view-able and understood from the diagrams.

Efficiency

  • The application will maintain the stored information throughout the different views and between site accesses.  Thus as a user moves from the four-year plan to the current schedule or vice-versa, the data will remain consistent and transfer.  This allows users the chance to easily make small changes, which will be the common case.
  • The application focuses on allowing users to easily add many classes to their plan and schedule quickly and easily, which will be the most common case for users.  Users may come back to the site frequently to view their plan and make updates; thus the application makes it instantly view-able for users to see their calendar and four-year plan; updates will then be made easy.
  •  Depending on the user, drag-and-drop may be slower.  Thus a button that says add class should be added to make it easier and simpler.

Safety

  • No change in the four-year plan or schedule is grave and will cause big problems; but everything is recoverable.  As easily as classes are added, they can be deleted and vice-versa, as classes are 
  • Difficult to add wrong classes.
  •   How to delete and remove a class from the current schedule or four-year plan is not easily view-able and understood from the diagrams.
Sketch 2

Sketchs

Ben's Story

Description

Ben Bitdiddle goes to try out QuickPick to figure out his schedule. He goes to log in.

Standard Login Page. Remembering the user is a key part of our design because we want them to be able to come back and update their four year plan as well as connect to their friends and see their schedules. When you first create your account, it asks you for your major, with specifics like 6-3, or 1C so that it better matches your required classes.

Ben Bitdiddle sees all the requirements he needs to graduate with his CS degree. He can drag and drop the blocks containing his classes into the semesters he plans on taking them.

Once you enter your major, QuickPick preloads all the requirement classes, so users don't miss any of them when making their four year plans. Users can also add extra classes, majors, minors, electives, etc. to the four year plan. Classes that have multiple options that fulfill the requirement show up in a different color and with a label like [6.AUS] or [6.LAB]. Clicking this will bring up an info box that indicates the options that users can pick between to fill the requirement, as well as course descriptions, ratings from the underground guide, etc. Users can drag and drop classes into appropriate semesters, to make their four year plan.

Ben has a rough schedule based on what he remembered from his meeting with his advisor. He plays around with a few classes, because he thinks he remembers his friend Ruby is taking 6.033 Junior Year.

Here's an example schedule, with all the requirements laid out. (Note that we added IAP as a term, as apparently some majors have required classes over IAP. eg. 2.670.) Users can rearrange (using drag and drop) classes, and then generate a schedule based on the semester they're currently in.

Ben goes to add 6.033 into the schedule and is helped along by the interface, which grays out semesters in which the class isn't offered. This helps Ben schedule accurately, and avoid mistakes like the time he tried to take 6.813 in the fall.

To add a class, click the appropriate block. When holding to drag into a semester, QuickPick will gray out semesters that are ineligible for the particular course. For example, 6.033 is not offered in the fall, and has the prerequisite of 6.004. It will not let you schedule a class in a semester it is not offered. It will, however, let you schedule a class without a prereq, after warning the user of the prerequisite. 

Ben now generates his schedule for this semester. He groans at the really early start time on Tuesday/Thursdays for 6.046. He starts to plan his lectures and recitations for the classes he plans on taking this term. He has a few options for recitations, and finds one that doesn't conflict with his other classes.

After the user generates a schedule for a particular term, this screen will appear. As you can see, some classes are already in this schedule (the user did this). When he is done scheduling the classes (including lectures, recitations, labs, etc.) a green checkmark indicates that he has completed it. This helps the user ensure he's not missing a recitation or lab.

Ben is now excited to share his four year plan with his friend Ruby. He clicks on her profile in the social bar and it shows her four year plan next to his. Ah! It seems that Ruby knows that 6.813 is only offered in the spring, and he adjusts his four year plan, so they can take it together.

The Social Bar shows the users' friends. This could be through Facebook integration or through explicit add for users without Facebook, or for advisors who students may be hesitant to add on Facebook. You can select multiple friends to see what other users are taking. Unseen is the ability to search for particular classes, and see when your friends are taking it on this same screen. 


Ben is now planning what classes he's taking with his good friends Ruby, Miguel, and Tamara. Ruby and Tamara are also in 6.046 in the morning, and can help Ben make it to such an early class. Ruby, Miguel and Ben are in 6.813 together, just like Ben planned! Miguel is taking a CMS class that Ben isn't in. Ben looks at the class to see if he wants to take it too. It could be fun. Ben is also in ESD.051, which none of his other friends are in.

This screen allows a user to compare their weekly schedule with their friends. They can see who is taking the same classes, who is in what recitation, and what other classes users are taking (which is useful for classes like HASS classes). Again users can select multiple friends, or search by class.

Sketch 3

In this design, the day-and-time schedule for Ben's current semester is displayed on the left hand side of a notebook-like layout. In order to add a course to the schedule he drags and drops it from the list of suggested courses on the right hand side. If he wants to learn more about the course before he adds it, he clicks on the course and a drop-down window appears with info such as the professor teaching the class, prerequisite courses, and the day(s) and time(s) offered. Lectures will be locked in because there is no opportunity for student choice here, but there will be when it comes to recitation sections. So when Ben initially adds a course the app will automatically select the recitation for him that fits in his earliest available time slot, but if he hovers over that section in the schedule his other options for the recitation will appear (with lower opacity than the already-scheduled blocks) on the planner.

Ben and Alyssa are planning their semesters separately on their respective computers, but at one point they want to share their schedules with one another to see if/how they line up. They both have facebook accounts, so using the "Friends" sidebar at far right and the "Share" interface at the bottom, they drag and drop each others' names and check the box for sharing on facebook. This will send the schedules out in a private facebook message as a link to be opened in the web app. If Ben clicks on the link his browser will navigate to the corresponding page in the planner (if he isn't there already) and overlay Alyssa's schedule on top of his own. A simple prompt will appear on the bottom of the page with an option to click that will allow Ben to exit this mode and make Alyssa's schedule disappear.

There is a page in the planner for every year Ben spends at MIT, and an option at the top of the page to toggle between spring semester and fall semester. The pages will be linked so that if Ben makes a change in one semester that affects his course options in another semester, a pop-up will occur to inform him as such. For instance, if Ben has scheduled 6.02 for Fall '12 and 6.02 for Spring '13 but then tries to remove 6.01, the window will warn him that this means he will no longer meet the pre-requisites for taking 6.02 that spring. The app will make suggestions for other placements of these courses in his plan, but will also allow him to "force" the original change and will then simply "grey out" 6.02 on the Spring '13 schedule to indicate his course trajectory doesn't meet the requirement as it stands. Linking up the pages also allows the "Suggested Courses" for each semester to adjust based on changes Ben makes to other semesters in his plan.

Analysis
Good Points
Bad Point
Learnability
  • Very obvious how to see more info about a class
  • Double-display of info and friends' comments is intuitive
  • Share interface is (mostly) clear
  • Flipping between semesters using side tabs feels natural
  • Share interface has no send button
  • Unclear how to see friends' schedules: can I just click on their names, or do they have to "Share" with me?
  • Unclear how to add friends

 

 

Efficiency
  • Easy to switch between semesters and from fall to spring
  • Once you know how to drag and drop a class, this is easy and efficient
  • Sharing with friends in order to see their schedules is inefficient
  • No way to search courses, as of yet
Safety
  • Difficult to add the wrong class because you will have a fair amount of information presented to you
  • Unclear how to take a class off of your schedule if you add it and then change your mind
  • Unclear how to choose a new recitation section after the app auto-selects for you
  • No labels

1 Comment

  1. Nice work. Very clean designs. The presentation would be helped a lot by making it more clear, for each design, where teach task begins and ends.