HCI PROJECT 1 - Courseverse

Group 4 - HCI Acid 

  • Ho Wing Tung (Sammi)

  • ROH, Jaechul (Harry)

  • TONG Po Lok Cruise (Cruise)

  • MAHMUD, Ishmam

  • ORTEGA, Frederic Michel


The project goal is simple yet essential. Our group came up with an idea to improve USTSpace (student-oriented course information system) to a more intelligent enrollment system for HKUST students. A website that could provide detailed information about courses along with a smart recommendation system that could aid students to choose courses that fit them.





A website called "UST Space" already exists among the students where the website provides us brief description about the course and reviews from the students who took it. Our group believed such reviews are mostly unhelpful due to its bias attribute. Some of the high-level course do not even have reviews because students not bothered to upload them. Then, most of us will only be able to see short description, which we believe is certainly not enough whether we should take this course or not. 



Our group started our brainstorming process using the MIRO board by first listing the features that are included in the UST Space and the current SIS system. Then, we started to come up with ideas on how to make the website more informative and intelligent. We also included some specific limitations mentioned by our course professor after conducting a 15 minute interview with her. In addition,  we also went to interview our fellow friends and colleagues on how they felt about the general enrollment system and UST Space. One surprising factor was that the professor was not aware of UST Space and she was actually willing to put more information that could make her course more attractive to the students.


The above images are the sketch prototype of the website design that we proposed. I was mostly in charge of the sketch prototype so I tried to include most of the gestalt principles to make the website more visually appealing. The purpose of the above image is to show the contrast between the original website and the new features. In the home page, the website will first scan the student's SIS system and list out the "Major requirement" courses and the courses that the courses are interested in. The next boxes will show the personal reviews of those courses.


Then, the recommendation program will analyze student's previously taken courses, courses that the student clicked as "favorite", courses that student visited the most, and related courses of those courses. Then, the program will list the courses at a separate column: one column as major related courses and one column as common core courses that will fit the student's interest. 








The image above is a detailed version of the website design. When the student enters the "COURSE REVIEW" page, it will include: course name, course description, the prerequisite and its importance, offered semesters, instructor of the current semester, syllabus and grading system (might include course URL), preview of some lecture videos and the list of courses that other students took along with the current course. When the student clicks the video, it will pop up and make the background dark so that the student can focus more on the video. The student review section will remain the same as the previous version.

Then, there is a separate page design for the professor. We made it as simple and clear as possible so that the professors won't have to spend a lot of time to fill in the information required. Professor's assigned course will be presented with the number of enrolled students and waitlisted students, with a progress bar. When the professor clicks "edit" button for each section, he or she will be able to fill in the blank. The importance of the prerequisite is also significant for the students to know since some students might want to waive the prerequisite if they have the ability to take the course, or even take more care of the prerequisite if the importance is significantly high. 




We made a storyboard for two different cases: Student's perspective and the professor's perspective. First, the student's case is when he wants to take more courses when he finished all the required courses. Then, he will check the recommendation system and the courses that other students took, which are all based on the courses that "Simon" took in previous semesters. Then, he will not suffer from choosing courses by himself. 

On the other hand, the professor's case is when she found out some students dropped out of the course by providing specific reason. Then, she will be able to know the way to improve the course information, which eventually leads to a case where she is able to decrease the dropout rate of her course. 

Video Prototype


Video Link: https://youtu.be/pZPLARcGLaM



Few lessons learned from this project:

  • It is always important to collect as much opinion from others. We first thought that the professor was aware of UST Space. However, after finding out she did not know about it during the interview, we were more motivated to design the prototype so that it could be helpful for both students and the professors.

  • Never consider your first design as perfect. When I was sketching for the prototype, I thought it would be enough because I believed that it included most of the features that are important. However, after showing to my team members and continuously taking a look at it, I noticed that there could be more rooms for improvement. The feature "students who took this course also took..." was included almost the very end of our project. 

Screen Shot 2022-02-27 at 12.20.49 PM.png
Screen Shot 2022-02-27 at 12.21.09 PM.png
Mind Map (1).jpg
Sketch-1 (1).jpg
WhatsApp Image 2022-02-26 at 12.45.45 AM.jpeg
WhatsApp Image 2022-02-27 at 12.12.33 AM.jpeg
Screen Shot 2022-02-27 at 4.16.58 PM.png