Audience

Primarily new instructional designers & eLearning developers. Secondary audience is anyone interested in principles of effective learning in digital spaces.

Tools

Storyline 360, Adobe XD, Midjourney, Photoshop, Google Suite

Responsibilities

All aspects of the project: instructional design, eLearning development, visual design, authoring

Personal Goal

I am the audience for this eLearning Scenario as much as anyone else. In addition to the learning goals stated in the Solution section, I achieved the personal goal of gaining experience identifying, interpreting, and synthesizing lessons from Clark & Mayer's "e-Learning and the Science of Instruction" while also teaching myself eLearning developer tools such as Articulate and Adobe XD.

The Problem

New developers rush to practical application without getting a sound understanding of the theoretical basis.

Many new eLearning developers focus their efforts on becoming skilled in the tools of instructional design & eLearning development, but they only give a quick review to adult learning theory, the principles of eLearning, and other concepts that inform effective design & development. Without a foundation of knowledge, new designers will find themselves making choices that may be aesthetically pleasing, but which ultimately hinder learning.

The Solution

There is no quick fix for learning an entire field of practice.

After defining and analyzing the problem, I brainstormed and revised a list of actions new designers/developers can take. New designers/developers are well-advised to: read the books of Malcolm Knowles, Robert Gagne, & Richard Mayer; seek out lectures and lessons on the subjects of adult learning theory & eLearning best practices; connect with instructional design peer groups for collaboration and feedback; and find a mentor who has expertise in the instructional design space.

The eLearning solution featured here is a starting point.

This experience helps new designers identify ineffective choices in their or other eLearning experiences; comprehend & articulate the drawbacks of those choices; implement more effective designs; and recognize gaps in their knowledge of eLearning that require more study.

My Process

Iterate First…

I began iterating right from the ideation phase of the project. I considered a variety of formats, including an Articulate Rise format, recorded lectures of various lengths, and the Storyline that became the final product.

I iterated on content ideas as well, looking for material that would be the right starting place as an introduction for new designers. “Explaining Andragogy and its Relationship to Pedagogy” was a strong contender, as was an overview of Gagne’s 9 Events of Instruction. I also considered covering all 12 of Mayer’s Principles. I compared each option against the desired solution described above. I decided that a lighter approach, the scenario-based option covering only 3 of Mayer’s concepts, would best achieve the goals.

After these rounds of ideation & review, I moved to Adobe XD to create a very basic mockup of the project.

No concerns with the concept on review of this basic version. Onto a more detailed mockup with greater explanation of content and more robust visuals.

With a solid concept in hand, I began a more comprehensive development.

…Then Storyboard

Confident that my work would not require a complete revamp of the format, I wrote up a text-based storyboard. Content is the most important element of any educational experience. I spent time writing and re-writing to ensure that the material was meaningful, interesting, and to-the-point.

Midjourney for Visuals

I created backgrounds, characters, and other graphics using Midjourney generative AI with tweaks and adjustments in Photoshop. For fun, I used myself as a basis for the “Instructional Design Hopeful” character.

Visual mockups were also part of the early iteration process. I initially considered a cartoon style.

Generative AI requires a different skill set than traditional visual design, but it can be worth the work to make a unique and personalized product.

Prototyping: Alpha & Beta Versions

I created an alpha version in Storyline 360 with approximately 1/3 of the content for testing with a small group of users. We identified several important changes that needed to be made, which saved significant time compared to creating a fully realized beta before testing. The beta was an essentially-complete version that I released on LinkedIn along with a short feedback survey. The responses from that survey let me know I was on the right track and helped me identify last tweaks to improve the final version.

Final Product

Using this wealth of feedback and all the tools at my disposal, I created an eLearning experience that guides you smoothly through the lesson.

Scrolling Text for Content Segmentation

One of the development choices I am most satisfied with is the scrolling text. This choice required me to use a complex combination of the Timeline and Layer features in Storyline. A basic calculator was my constant companion during this part of the process, doing math to ensure text boxes maintained the correct y-axis distance.

Trigger-State Techniques

I used a range of trigger-state techniques throughout the project, particularly during the interactive examples: if-statements that depend on whether the user has completed the inputs; disabled states that cascade to active, requiring the learner to operate in a certain sequence; and, of course, hover states to highlight any clickable buttons throughout the course.

Suggested Followups to Enhance Retention

To cap off the learning experience, I had the coach explain several followup readings the learner might be interested in to supplement this lesson. Links to those texts are provided in the final slide to make for a smooth user experience. I also created a quick-reference sheet which you can download from the lesson for easy recall of the material.

(click image for full-size version)

Principles of eLearning