meet course development tracking system (cdts)
project overview.
The Centre for Extended Learning (CEL) supports the design, development, and delivery of online credit and non-credit courses for the University of Waterloo. They offer professional development opportunities to the world, and advocates for adult, part-time and online learners."
After migrating to online classes due to the pandemic, the University of Waterloo has faced multiple challenges when tracking documents related to course developments.
what is cel systems?
The following struggles have sparked their interest in starting the Course Development Tracking System project:
-
The use of inconsistent document formats and multiple documents in course developments
-
No version control of archived documents
-
Copy and paste of dates/time could be prone to human error
-
Tasks involved in tracking the end to end process of a project and viewing status are daunting
-
There are no reports and dashboards for ongoing and completed projects
project goal
The impact of these problems:
-
Inaccurate data analysis: Any data not captured could impact the accuracy of the data analysis results. Ex. time spent per course
-
Low data quality: Data error as a result of the copy-paste of data values
-
Inefficient tracking of the end to end process
-
The invisibility of progress across projects could make resource allocation challenging
A solution for the problems mentioned above is a tracking system that covers from the pre-project phase to the project management phase of a developing course. The success criteria for this project would be traceability and consistent reporting structure.
project goal (cont.)
The CDTS project can be divided into two sections: Intake Form and Dashboard. My role was to design and develop the different views from both manager and client's point of view. My specific tasks are as followed:
-
Create the process flow diagram
-
Wireframe/storyboard of Intake Form
-
Wireframe/storyboard of Dashboard
-
Develop the Intake Form and Dashboard
-
Develop the different question types as a stylesheet
Though I played a key role in this project, my colleagues ensured that my designs are flawless and that every requirements are met. They were able to point out my mistakes and provide assistance when needed.
my role + team
A process flow diagram is an effective method to achieve more insight of the project as it indicates the general flow of project processes and users. It illustrates which user inputs are expected by which user before moving on to the next step.
process flow diagram
steps
The first step in the design process was to create a wireframe. A wireframe is a visual guide that represents the skeletal framework of a website. Features such as buttons or texts can be placed on an empty website frame to design the layout. The wireframes were used to form a storyboard. A storyboard is a sequence of images which indicate the user flow while using a system. This was used to label and specify certain features that are unclear just by looking at the wireframes. Designs for the CDTS project for both Intake Form and Dashboard was completed using these two methods.
wireframe | storyboard
An important lesson gained from this project is to ensure that the user is satisfied instead of following my own ideology.
reflection
Reflecting upon the time spent working with the CEL System's team, it was a great opportunity to work closely with design and development. The front-end development experience will come in handy when designing in the future since it provides insight on a design's feasibility. Gathering feedback and implementing small adjustments was a more holistic approach towards understanding the later stages of a product.
final thoughts
intake form (wireframe).
Manger who overlooked my progress and made suggestions for improvement
ishan abeywardena
associate director
Assisted in reaching out to stakeholders and gathering requirements
jason greatrex
support team manager
Mentor who helped during the development phase
doaa elfayoumi
information systems specialist
intake form (storyboard).
dashboard (wireframe).
dashboard (storyboard).
Once the design was complete the next responsibility was to develop the Intake Form and Dashboard using HTML, CSS, and JavaScript. While developing, responsive features such as a hamburger menu was used to ensure that the website is mobile-friendly.
developing the intake form & dashboard
intake form.
.png)
dashboard.
moving forward.
The final responsibility was to develop a style sheet for the different question types such as radio buttons or text boxes. Once again, HTML, CSS, and JavaScript was utilized.
developing the question type style sheet
