Daniel Jin

Brendan Wilson

IS4300

Project Assignment #4

Design Sketches

Overall design – The design is divided up into two panes. The left is the course search pane and the right is the calendar pane.

Search pane – On initial load, just the select subject box is show with a search input field and a dropdown list of subject names. As you type, it auto-completes your search query. When you click on a subject, the “Select Subject” box becomes “Select Course” and the dropdown lists course names instead. Hovering on a course name brings up its description. When you click on a course, the “Select Course”text is replaces with the course number and name, and the different sections of the courses are shown with the professor’s name, meeting time, available seating, and meeting location. When a section is hovered it is shown on the calendar pane with dotted lines. When a section is clicked, it is added to the calendar pane. Then the section menu disappears from the search pane and just the course number and name is left. This box has an x button in order to remove the course from the calendar pane.

Calendar pane – This displays all course times that have been selected. On hover over a course, the professor’s name, seats available, location, and course description is shown.

  1. Checking how many seats are available for a course.
  2. First click ‘select subject’ in the search pane.
  3. Enter the subject’s name and click on it.
  4. Enter the course’s name and click on it.
  5. The different sections will display seat numbers.
  1. Getting the course description for a course.
  2. First click ‘select subject’ in the search pane.
  3. Enter the subject’s name and click on it.
  4. Enter the course’s name.
  5. Hover over the course’s name to get a description

  1. Finding a course that fits into a schedule and doesn’t meet on Thursdays.
  2. First click ‘select subject’ in the search pane.
  3. Enter the subject’s name and click on it.
  4. Enter the course’s name and click on it.
  5. The different sections will display class-meeting times.
  6. Hover over the section to see how it looks on the calendar pane (displayed in dotted lines).