Last year, I identified a bottleneck within our course development process. As the only team member with coding and course authoring skills, I found myself as the sole contributor responsible for crafting and publishing an overwhelming 84% of course content. While our team had already established expertise in storyboarding and video production, the unique interactive features and high brand standards our product team expected, required the ability to work with custom JavaScript and CSS.
Action: Crafting a Comprehensive Training Program
To address this, I created a training program. It was a hybrid course that blended twice-weekly in-person sessions with weekly tasks. I used the whole-task learning model of 4-component Instructional Design, meaning each week all of the trainees would be creating and publishing interactive content to the LMS.
Given learners’ unfamiliarity with programming, I chose to start the course with an engaging introduction to programming using Python turtles, making abstract concepts tangible. As the program progressed, we dived into JavaScript, exploring essential concepts like object.method(args), variables, data types, functions, arrays, and loops. Each step along the way, trainees were expected to build and publish complete interactive elements.
For the final task, trainees were required to create a full learning interaction from a storyboard using the standard interaction template.
To support trainees after they had completed the training, I provided a link to shared documentation document which included:
- Step-by-step instructions for standard interactive elements
- Common customizations
- Known bugs and version history
- Code examination with annotations.
Result: A Productivity Leap and Empowered Teams
The training initiative was successful. Not only did all trainees complete the program, but it also inspired a parallel team member to develop a similar training model for her own team. The direct outcome was a noticeable drop in the percentage of interactive elements that demanded my direct involvement. After the training our team created a 5-hour course in which I created only 15% of the content—an 82% reduction of the bottleneck with no reduction in quality standards. This amplified our team’s overall capacity and afforded me the opportunity to engage in more complex interactions and long-term development projects.
Not only were we more productive, team members felt empowered by the training. I received the following feedback from a participant, highlighting their newfound confidence and capabilities.
There were so many technical pieces that we needed to learn to be able to contribute to the workload in a meaningful way. He taught us how to create codes in Canvas and Captivate. He showed us how to check for errors and then created a template that was designed in such a way that the lift of coding is minimal and all of our work more efficient. He considered details and created “how to” guides so that when team members are pulled into other aspects of the work there are helpful reminders of what each interaction requires. …making sure people on your team can be self-sufficient is not an easy thing to do and I have watched Chris successfully embrace this challenge and I have learned so much from him.
-Lattice Feedback from a Learning Experience Designer who participated in the training.
Tools and Techniques: A Peek Behind the Curtain
The primary tools used in this training were: Adobe Captivate and Canvas LMS. Captivate is the course authoring tool of choice for our organization given the high percentage of Mac users we have and the general reputation of Adobe products. While the stock objects and interactions on Captivate can at time feel limiting and dated, by leveraging JavaScript, I have been able to develop unique interactive elements that look and feel quite different from traditional Captivate. This requires comfort with JavaScript, especially in order to ensure that you are meeting accessibility requirements as objects move and change.
Matching Interaction
One of the most popular interactions in eLearning is the drag-and-drop. The tactile nature and ability to stretch learner thinking in organizing and arranging content make them very appealing. Unfortunately, drag-and-drop widgets do not meet accessibility standards as they require a mouse to navigate them successfully.
As an alternative, I created this matching interaction. Initial usability testing showed that I had done such a good job creating something that looked like a drag-and-drop that people expected it to behave like one. To address this, I added the instruction bubble that appears after six seconds and is hidden once the user successfully selects and places an object.
Below you will see a demonstration of the interaction and a screenshot of the code used.
Multiple-choice Questions
Quality multiple-choice questions are an essential element to any eLearning experience. Maybe even more important the the questions and options is the feedback you give the learner. In order to deliver this feedback in a dynamic way that meets our brand standards, I developed this multiple-choice interaction. In addition to seeing the questions in action, below you can see a snapshot of some of the code that powers it. Specifically, not that all text fields are assigned to variables, this allows the interaction to update both the text-on-screen and object alt-text.
Key Takeaways: Empowering Teams and Building Scalable Systems
This portfolio item showcases the development of a training program that not only empowered trainees but also enhanced our productivity. It underscores my ability to create technical training for individuals with little to no coding background. The template and documentation I created show my commitment to building a scalable system that aligns with our organization’s desire for highly customizable content.