Chicago Style Course

This concept course is imagined as a form of customer training for the well-known Chicago Manual of Style (CMOS). Students learn citation basics and practice checking citations for some of the most common source types. Creating such a course could promote adoption of Chicago style in more college courses, leading to more sales of books and digital subscriptions to the CMOS.

Roles: instructional design, e-authoring, video editing, graphic design
Tools: Articulate Storyline, Camtasia, Adobe Illustrator, JavaScript

Process

After determining the goals, scope, and tools to be used in the course, I started by prototyping the activities. I knew that use of screen space would be a challenge, because creating citations often involves switching back and forth between multiple books (or windows if done digitally). I settled on a tab interaction that would allow learners to consult multiple views but would ensure that the question, answer choices, and detailed feedback would all be viewable on a single screen. I also iterated several design options to find the best use of the CMOS brand in the course

Challenges

Another important challenge arose with the images of book title pages, which I wanted students to be able to consult when checking citations. Because putting text in an image is inaccessible for screen readers, I decide to recreate the title pages by matching the original typography with fully readable text. This approach had the added benefit of allowing me to customize the title pages by tightening up the white space to reduce scrolling. See the full details of this work in the design document and accessibility report.

The design of the activities meant that a standard quiz template wouldn't work. Instead, I created custom slides, using layers, states, triggers, and variables for a polished fully functional result. Customizing allowed me to ensure that students could access whatever supports they needed during the activity. The activities are also designed to require multiple guesses if the student fails initially. Detailed feedback is provided once they find the correct answer.

To prepare students for the activities, I devised just a few introductory slides, along with a worked example video. Using Camtasia, I was able to edit my demonstration video to ensure smooth visuals, crisp audio, and clear visibility even on smaller screens. Features used include annotations, zoom and highlight effects, an intro template, and generating a separate captions file.

The finishing touches came in storyline. For the video captions, Storyline defaulted to a gray background, which did not fit the black background of the video slide. Fortunately, I was able to find a JavaScript on e-Learning Heroes that was easily modified to fix this. JavaScript is still new for me, but I love learning new ways to push the capabilities of Storyline. Finally, I created a custom tabs interaction using the timeline-based triggers to achieve a smooth motion and color transition

Finally, I created a job aid/infographic to ensure that students would have concise support at the moment of need, including while they were completing the multiple choice activities within the course as well as when creating citations throughout the semester. I used Adobe Illustrator to create a readable and attractive job aid that can be easily saved digitally and placed physically wherever it might help.

I enjoyed expanding my capabilities while I created this course. One challenge that remains is making sure this course is easy to use on smaller mobile devices. Other approaches (like using Rise) would have helped make the course more adaptive, but at the trade-off of losing some customization in the interactions. Though either approach is valid, I might very well have preferred a different approach depending on the priorities of the sponsoring organization.