The University of St Andrews requires some pre-, co- and anti-requisites for module selections of the programs and delivers textual-formed module catalogues on the website. The textual form, however, is static and not interactive, so it can be difficult for students to understand module dependencies intuitively. The module selection is a matter of great importance for students as they have to satisfy their program requirements, and their current selection influences the module choices in the next semester.
* Some parts of each step in the project are introduced in this page. For more information, feel free to contact me.
Ⅰ. Project Methodology
The agile methodology is used for this application since it facilitates addition of new functions in the course of development and rapid development with time constraints on this project.
Brainstorm For requirement analysis, our university’s program requirements, relationships between modules, and the way to represent information were analyzed. Besides, how other universities provide program requirements and represent module dependencies were studied by researching the module catalogues on their websites.
Design The designs for the application were planned based on the requirements. There were several iterations by design critiques before moving to the development step to narrow several sketches down a final complete design. These critiques were conducted by me and my supervisor every week. We discussed design principles, compared several sketches to find a better way for requirements, and considered any issues in both designs and future implementation.
Development The application was implemented based on designs which were decided in the previous step. All decisions related to implementation, such as the programming language and data format, were determined in this step. Furthermore, the whole range of development was split into small parts, and they were then implemented in iterative cycles. The same range could be also developed repeatedly depending on the feedback from the next step.
Quality Assurance Quality assurances were also conducted iteratively according to repetitive development steps. Making the development divided into small parts facilitated easier detection of defects and resolution of bugs. Iterative quality assurance of small parts was particularly appropriate for this application. This is because the application required many conditional statements, so assuring that each condition was operated without defects before progressing next statement was a way to prevent problems from becoming serious.
Deployment As a result of several iterations and positive feedback, the application was so deployed on the web that it could be operated in various browsers and mobile devices.
1. Functional Specifications
Functions are divided by priorities, and high priorities are key features for a module selection process.
|Gist||Add-buttons are key to selections of modules.|
|Requirement||After the user clicks an add-button, the application will add the module to the list and change the style of the card with module information.|
|Rationale||Add-buttons confirm the module is added successfully.|
|Gist||Remove-buttons are key to deselection of a module.|
|Requirement||If the user clicks a remove-button, the application will remove the module from the list and return to the original card style.|
|Rationale||Remove-button confirms the module is removed successfully.|
|Gist||Dependency-buttons are key to representation of module requisites.|
|Requirement||A dependency button is displayed if there is a module requisite(s). After the user clicks a dependency-button, the application will make the card with module information flipped, and the back side of it will show the pre-requisite and co-requisite.|
|Rationale||Providing module requisites information is significant as it affects the availability of the module choice.|
|Gist||A list-button is key to opening the list for modules selected.|
|Requirement||If the user clicks a list-button in the form of a floating action button (FAB), the application will open the list that displays selected modules. Whenever the user clicks an add-button (or a remove-button), the module is added (or removed) in the list.|
|Rationale||The list enables the user to check their current choices.|
|Gist||More-buttons are key to presentation of module details.|
|Requirement||After the user clicks a more-button, the application will display the window pop-up showing the module details.|
|Rationale||Module details influence the choice of modules.|
|Gist||Semester-bars show or hide modules that belong to each semester.|
|Requirement||If the user clicks a semester-bar in a form of an accordion, the application will display or conceal all module cards in the semester.|
|Rationale||When the user wants to skip the choices of modules in a semester, an accordion enables the user to focus on the modules only as needed.|
2. Information Architecture
The application has four sub-units: home, header title, group set, and list. A group set, which is composed of step, group title, guide, and semester, has a module set as its sub-unit. A module set consists of module basics, dependency, detail, and add (or remove)-button. Dependency is an entry point to show requisites, and detail can provide module details in a pop-up window. The list entails module information by clicking an add (or remove)-button in a module set.
3. Information Design
|Home Page||① The user can choose one of courses.
② Subjects are displayed according to the selection of a course, and the user can select a subject.
③ A name of subject the user selects is presented.
④ Programes in the subject are displayed.
|Module Page||⑤ Clicking a home-button leads to home page.
⑥ A module card has a module code, module title, add-button, more-button, and corner bookmark.
⑦ A corner bookmark signals the module has requisites, and clicking it makes the card flipped (See ⑧).
⑧ The back side of a card shows pre- and co-requisites. Clicking the corner bookmark makes it flipped again.
⑨ If the user clicks a more-button, a pop-up window shows module details (See ⑭).
⑩ The initial status is to show all modules in a semester. Clicking an accordion at first hides the modules.
⑪ Clicking an add-button adds the module in the list (See ⑮), and the button will be changed to a remove-button (See ⑫). The color of the border and the text of a card will be changed to the color each group presents differently.
⑫ Clicking a remove-button removes the module in the list (See ⑮), and the button will be changed to an add-button again (See ⑪). The color of the border and the text of a card will be returned to an original color.
⑬ Clicks a list-button opens the container for representing selected modules (See ⑮).
⑭ A pop-up window presents module details, such as description, assessment and weekly contact.
⑮ The list contains what the user selects and shows module codes, module titles, semesters, and total credits.
1. Data Model
Major considerations are scalability and avoiding duplication. As for scalability, the data model enables new subjects, programs, and modules to be added easily by inputting them in subject and programme and creating new elements in module. Regarding the way for presentation of the group data, there are two options: course and module. If the data are covered in course, each program should have the module codes indicating groups. This model, however, causes duplications by presenting same module codes repetitively. Therefore, to avoid repetition, the group data are controlled in module instead of course.
2. Conditional Constraints
The application’s feedbacks are different depending on the condition even the user clicks a same button. To make the user stick to the program requirement, conditional constraints are set, and an alert window will be popped up whenever the user does not follow the condition.
2.1 Module Selection
2.2 Module Deselection
|Usefulness||① This website helps me to be effective in selecting modules for a program.|
|② This website helps me to be more productive in choosing modules.|
|③ This website is useful for selecting modules and checking module dependencies.|
|④ This website gives me more control over module selection tasks.|
|⑤ This website saves me time in module selection.|
|⑥ This website meets my needs for module selection.|
|Ease of Use||⑦ It requires the fewest steps possible to accomplish module selections.|
|⑧ I do not notice any inconsistencies as I use this website.|
|⑨ I can recover from mistakes quickly and easily.|
|⑩ I can use it without written instructions.|
|⑪ This website is easy to use.|
|Ease of Learning||⑫ It is easy to learn to use the website.|
|⑬ I easily remember how to use it.|
|Satisfaction||⑭ I will use this website when I consider my module selection.|
|⑮ I would recommend it to a friend|
|⑯ This website works the way I want it to work.|
|⑰ I am satisfied with this website.|
The questionnaire was tailored focusing on this website based on the USE Questionnaire. On the whole, the application has received positive feedback from students in four sections: Usefulness, Ease of Use, Ease of Learning, and Satisfaction.
 J. J. Garrett, The Elements of User Experience : User-Centered Design for the Web and Beyond, Second Edition. 2011.
 M. Othman, M. H. Ismail, and N. A. Wahab, Computing Research & Innovation (CRINN) Vol 2, October 2017. Lulu, 2017.