Web course instructional design AND DELIVERABLES

A laptop computer and iPhone displaying landing and content pages for a web course.

Overview

My instructional design services were contracted by a university as part of an effort to diversify and expand traditional face-to-face course offerings into online, asynchronous modalities. I was presented with the opportunity to design and develop a Jazz history course for web-based delivery within the university’s learning management system (LMS).  An on-ground version of the course had been in place for several years. Course content and supplemental learning materials had been developed and taught by a lead instructor/subject matter expert who oversaw the teaching activities and curriculum of several faculty members throughout the University’s satellite campus locations. The online version of the course would be designed and developed by me and I would serve as lead instructor/subject matter expert for subsequent iterations.

project goals

As part of the initial project transition plan, main goals were presented:

  • Project Goal 1: Capture, retain, and translate the course content and experience to online presentation modalities. This included maintaining the incorporation and effectiveness of face-to-face lectures, direct interaction with the instructor, interactive discussions, guided listening activities, and supplemental teaching materials and their content.

  • Project Goal 2: Provide opportunities for online students to engage in discussion and analysis of course content, themes, and supplemental teaching materials.

  • Project Goal 3: Create interactive, web-based learning opportunities that encourage and track student engagement within the adopted Learning Management System (LMS).

  • Project Goal 4: Develop the course within the scope of best practices for experiential, aesthetics-based learning and multiple opportunities for low-stakes application of course content and self-assessment.

approach

Addie Design Model Graphic

ADDIE Design Model

Utilizing the course design goals and established course objectives and learning outcomes as a guide, I advocated for a 12-week development cycle during which I collaborated with the author of the face-to-face version of the course who would serve as a supplemental SME to produce a complete set of course deliverables. In order to facilitate thorough, yet efficient and timely production of the course assets, I based the development activities upon the following Instructional Design models:

ADDIE (Analysis, Design, Development, Implementation, constant Evaluation)

SAM (Successive Approximation Model)

LUMEN (Learn, Understand, iMagine, Evaluate, iNform)

The analysis phase of the design project was initiated utilizing a course development form I created to define the project stakeholders, project parameters, project goals, metrics and standards, project schedule, and an audit of existing assets and those required for design and development.

Course Development Project Initiation Form

Completion of the course development project initiation form and subsequent meetings with the SME provided necessary insights and definitions to allow me to create a Project Management Development Plan. The project was organized by phases including Project Initiation, Design, Content Development, Production, Review/Publishing/Evaluation, and Evaluating Effectiveness. The development plan allowed me to keep the project on track and ensure delivery by the targeted deadlines. Additionally the development plan established:

Task Definition

  • Workflow and Guide for Project Phases

  • Schedule, Time-allotments, and Deadlines

  • Stakeholders and Responsible Parties

  • Creation and Integration of Assets

  • Definition of Project Repository Artifacts

Project Development Plan Gannt Chart

Project Development Plan Gannt Chart

The next several weeks of the project were concerned with the design, development, and implementation phases of the ADDIE Model. Instructional Design activities during these phases included:

Descriptions of Design, Development, and Implementation Project Phases
Lo-Fidelity Wireframes translated into a High-Fidelity Final Deliverable.

Sample Lo-Fidelity Wireframes translated into a High-Fidelity Final Deliverable.

results

Project Goal 1: Capture, retain, and translate the course content and experience to online presentation modalities.

  • Face-to-face lecture content was updated to include recent historical events and sociological issues relative to the course topics. Recorded lectures featuring a combination of filmed instructor presentation, PowerPoint slides, screen captured content, animations, and guided listening activities were produced aligning with best practices and standards for accessibility and responsive web content.

  • Supplemental teaching materials such as hand-outs were adapted into interactive learning modules. Upon completing the modules, learners were presented with digital one-sheets that captured the spirit and content of the materials.

  • Instructor presence and direct interaction was an essential ingredient in the face-to-face version of the course. It was absolutely necessary to ensure that learners had the opportunity to engage directly with instructors in the online environment. This was achieved through defining a schedule of content creation (e.g. class emails, announcements, filmed assignment feedback), drop-in online office hours, course topic chat sessions, and interactive conversation through discussion board and listening journal activities.

Project Goal 2: Provide opportunities for online students to engage in discussion and analysis of course content, themes, and supplemental teaching materials.

  • Student interaction opportunities were maintained and expanded through the inclusion of multiple, interactive discussion activities. Topics required learners to engage with course materials and concepts, reflect upon their personal thoughts, opinions, and experiences, and present objectively supported positions. Learners then interacted with the posts and responses of their classmates and instructor offering feedback, expanding commentary, and continued discourse.

  • Students created and maintained online listening journals and participated in optional, special topic(s) chat sessions.

Project Goal 3: Create interactive, web-based learning opportunities that encourage and track student engagement within the adopted Learning Management System (LMS).

  • Each module of the course featured multiple opportunities for interactive, web-based content.

  • SCORM assessment modules were created to allow self-paced, exploratory learning.

  • LMS analytics were utilized to demonstrate an average of 95% for task completion and interaction with assets.

Project Goal 4: Develop the course within the scope of best practices for experiential, aesthetics-based learning and multiple opportunities for low-stakes application of course content and self-assessment.

  • Interactive, guided listening activities, creation of a listening/reflection journal, analytical exercises, and low-stakes course quizzes allowed students to apply their understanding and knowledge of the course material while assessing their progress and scholarly growth.

  • The course syllabus, educational assets, and graded activities were designed to align with the “Specific Review Standards from the Quality Matters Higher Education Rubric, Sixth Edition”.

Supplemental Growth

  • The 15-week, face-to-face version of the course averaged 1-2 sections per campus, and enrollment of 150 students per semester across all campuses in the University’s main location and satellite system. By advocating for an asynchronous course presentation model, it became possible to offer multiple sections per semester. Enrollment in the online versions of the course average 400 students per semester.

  • The online version has been accepted for inclusion as a Diversity course, inclusion as a required component of a Jazz Minor degree certification, and as an elective for an online Master of Music Education degree certification.

sample deliverables

Process Flow: Ensemble Section Map Explorer

Process flow of ensemble map explorer slides.

Overview

This project helps learners master the ensemble arrangement, sections, and instrumentation of the Jazz big band. Understanding how the ensemble is orientated helps learners identify the sections and instrumentation when observing performances and understand interactions within the ensemble and through performance material.

Design

The learner is presented with a process flow that features slide advancing buttons so that they may progress or review the content at will. Images consist of basic, geometrical shapes to indicate ensemble architecture. Multiple learning modalities are supported through audio recording of the written content, screen reader accessible text, and alt-text descriptions for images. Each image view is expandable when clicked upon.

Built in Adobe Illustrator, Articulate Rise 360, and GarageBand this project utilizes a process flow presentation due to the sequentially linked nature of the content presented.

Design elements are responsive, interactive, and accessible across desktop, tablet, and mobile platforms in both portrait and landscape orientation.

 

Interactive Learning Graphics

Interactive Learning Graphics with Slide Expansion Images.

Overview

A number of interactive learning graphics were created for this course. These supported the aesthetic and analytical portions of the stated learning outcomes and allowed learners to explore the instrumentation most commonly encountered in Jazz big bands. Visual representations were paired with written commentary and embedded audiovisual media that allowed for a full immersion into the sights, sounds, and functions of each instrument.

Design

The learner is presented with visual images of instrumentation and musicians in the context of the performance settings. Clickable buttons are embedded and selection affordances are indicated through animation and iconography. Once clicked, pop-up windows appear that are populated with written commentary and embedded audiovisual media. Learners are able to explore the content and review the information presented in any order. Content aligns with accessibility standards through the inclusion of screen reader accessible text and alt-text descriptions for images.

Built in Adobe Illustrator and Articulate Rise 360, this project utilizes multiple button states, affordance animation, and embedded media.

Design elements are responsive, interactive, and accessible across desktop, tablet, and mobile platforms in both portrait and landscape orientation.

 

Card Sort Quiz

Card Sort Quiz Screen Capture.

Overview

This project allows learners to engage in a low-stakes self-assessment of their understanding and mastery of the module’s content. Learning outcomes aligned with the aesthetic and analytical portions of the stated learning outcomes. Content was gamified to encourage task engagement, and increased rates of completion and review. Learners were prompted to participate in a drag and drop card sort quiz that provided them with real-time responsive feedback and scoring. The quiz may be repeated at will for mastery.

Design

The learner is presented with a card sort stack and prompted to drag and drop each listed element into its correct corresponding category. Responsive design and gamification were employed to provide learners with visual and animated kinesthetic feedback to indicate correct and incorrect answers. Animation encouraged users to work on any missed questions until the correct answer was found. Mastery of the task is encouraged through an unlimited number of attempts. The content aligns with accessibility standards through the inclusion of screen reader accessible text.

Built in Articulate Rise 360, this project utilizes responsive design and animated and written feedback.

Design elements are responsive, interactive, and accessible across desktop, tablet, and mobile platforms in both portrait and landscape orientation and support multiple interaction affordances utilizing mouse pointer or digit gesturing.