Rationale

Written By: James Nicolson


Rationale

To address BCIT’s requirement for an updated and enhanced “Intermediate Web Design and Development - COMP1950”, we have produced a small but functional prototype site. This site outlines some of core design concepts we intend to deploy if we are selected as the chosen developer.

Looking at the existing COMP1950 course site, we identified some specific areas that could be improved upon to help modernise and unify the site to tie in with BCIT’s current branding. Other areas have been added to increase usability and overall function of the existing site Below are the areas that we have identified for improvement.

  • More modern styling across all site pages
  • Unify the site with BCIT’s main website styling
  • Create an easy to navigate course site, including the use of landing pages, navigation bars & menus.
  • Creation of quiz/exam functionality that allows users to perform quizzes directly on the COMP1950 website.
  • Creation of homework upload functionality

We have created four pages as part of this proposal which outline the functional and stylistic enhancements we are recommending to the COMP1950 site.

Landing Page

When users arrive at the Intermediate Web Design and Development - COMP1950 webpage they land on a page which has been specifically designed to easily identify the course and the individual lessons. We decided to build this page with a course description at the top making it easy for users to understand where they are and what the course is about.

Below the description users are presented with a series of boxes which act as links to the appropriate lessons. By placing the lesson navigation directly in the middle of the landing page it makes it very easy for users to identify and understand where they need to go.

Lessons are colour coded with completed or active lessons styled in “BCIT blue”. Other lessons are white to designate that these lessons are not currently available. Each active lesson has a hover transition applied to update the general aesthetics and enhance usability by providing a clear indication of active lessons. Non-active lessons are applied with a CSS cursor icon that indicates the link is unavailable.

Styling

One of the main enhancements that we identified was to update the aesthetics of the site to provide a more modern look and feel. We decided that as the COMP1950 was a course that is delivered through BCIT’s current curriculum it would be beneficial to tie the styling with the existing main BCIT site (bcit.ca). To do this we have used the colour pallet on the main BCIT website on the COMP1950 site making it very clear to users how this course is linked to the institution.

The navigation header bar at the top of the page is also styled to reflect the BCIT styling. Menu items & the search bar mirror the existing BCIT site and in a production version would provide the same functionality as the BCIT main site. This menu has an “Email Instructor” button which allows the learner to easily communicate with their lecturer. As the navigation header bar is present on all pages of the site, users would be familiar with its features and be provided with access to other BCIT resources from any page.

Fonts & background colours have been selected ensure the site is accessible and suitable for all types of user. Distinct contrasts between font and background colours has been established and font styles are simple and legible.

To further enhance the styling, we will add logos and other BCIT branding into the production version of the site. This will help tie the course site in with the institution’s overall design even further.

Lesson 3 Page

From the landing page, users can navigate to the lesson pages. For the purpose of this mock-up we have only built the Lesson 3 page. This is a representation of how the design and function of the lessons will work throughout the site within a fully developed production system.

The lesson pages are core pages within the COMP1950 course site. These pages have been designed to give the learner access to the appropriate content for the lesson. Course content is delivered directly in the centre of the page via an expandable menu system. This design allows for content to be expanded when it is applicable and allows the learner to only show information that is required at that time. Lesson sections can be clicked on to easily gain access to the relevant content. By default, the Agenda section is open as this is usually the first area students will need to view. Plus and minus icons make it easy for users to identify whether a section is open or closed.

This menu system utilises a javascript function that is easy to modify if other enhancements are required.

The content within the lesson follows the same layout as the current COMP1950 course but <code> areas and hyperlinks are styled to fit in with the new prototype site aesthetics. Exercises and resources can all be access from the content page directly through the content body.

Further enhancements to the course content could allow for an area to store resource files. This would allow for all supplementary documentation to be collected within a single area giving users quick access to these files. Exercises could be separated from the main content and added to the menu navigation bar on the left so users do not have to search within the lessons body these activities.

Navigation

Throughout the prototype, we have deployed a variety of navigation techniques which are designed to make for easy and elegant navigation across the site. The navigation header bar allows for quick access to general BCIT features. This aligns with the current main BCIT website and unifies the user experience across all BCIT pages.

In addition to this we have deployed a collapsible menu bar, which is located on the left hand site of the screen. The menu bar provides access to all of the lessons that are currently available on the course. This menu utilizes a javascript function which allows it to expand upon a click action. By clicking on a specific lesson title, users can gain access to the lesson content and also the quiz and homework areas. This makes for easier navigation so users can get to the appropriate area simply through the navigation menu. Clicking on another lesson from the menu opens the new lesson options but closes the other lessons, keeping the view tidy and easy to read.

To allow for easier navigation within a course we have included a bookmark style link, which appears in the bottom right hand corner of the page. If a user has scrolled to the bottom of a page the arrow icon will appear in this location. This icon acts as a quick link back to the top of the page so users do not need to scroll back to the top. This is helpful if there is a lot of content on the page and would require a long scroll back to the top. This link utilises a javacript function which makes it visible only when the bottom of the site has been reached.

As a final piece to aid with navigation, we have included an HTTP 404 error page. This is a working page and can be accessed by typing in an incorrect URL. The page was designed to replicate the style and experience of the BCIT main website further tying in the user experience with the institutions branding.

Quiz

An essential part of the lesson, in general, is the quiz. This is a valuable tool for the learner and instructor to identify how competent a user is with the course’s material. By delivering this feature directly through the course site instead of in class, quizzes can be performed throughout the course and even as homework. Grades could be directly calculated and fed into BCIT’s grading system (not available in this demonstration). This would allow for marking and grading to be performed quickly and automatically, saving time for the teaching staff. Including the examination features directly within the course site can help tie together the user’s experience of the lesson, providing a more interesting and engaging system.

Quizzes can be accessed directly from the menu bar, under their menu item. This system would only allow for the quiz to be available when the appropriate start time was reached.

Once the user has moved to the quiz screen they are presented with a variety of questions which make up the exam. The questions are built using HTML form components which allows for a variety of different question styles to be constructed. This quiz that we have built demonstrates the use of long answer, short answer, multiple choice and true or false style questions. Each of these questions can be answered and submitted using the appropriate submit buttons at the end. In the production system the response the user’s responses will be validated and checked for correctness. Users can receive immediate feedback from how they responded. Grades can be automatically calculated and applied to a user’s overall grade.

Homework

In addition to the quiz page, we have developed a homework submission page. As homework is required weekly, making the homework assignments easily accessible from the menu bar was an obvious choice in usability.

Users can load the homework assignment and are taken to a page which explains the exercise. At the bottom of the homework page is an area where the user can submit their assignment. The aim of this page is to provide the user, functionality that allows them to submit their homework assignments directly through the course system.

In the completed version, users will be able to select their completed assignment file, using the file picker function and then submit it to the system. This submission is then directly associated with a user’s profile and grade.

The homework page is a great way of keeping the user engaged on the site. It provides the user with easy access to their previous submissions directly through the course site and in a production version could provide additional grade or user information to best display a user’s progress within a course.

Mobile

Optimising courses for mobile device viewing is a growing trend and one that we adopted as part of the prototype development. The site has been built using Bootstrap which allows for easy and dynamic web page creation with an emphasis on mobile optimisation. All the pages are responsive, with navigation bars and menus collapsing to best fit the user’s device. Bootstrap javascript and css libraries have been imported into all the pages to allow for responsive functionality.

Conclusion

By combining a modernised style, with new quiz & homework functionality and a responsive design we believe that the COMP1950 site can be enhanced to provide a more engaging and interactive place to learn web development.