eLearning Development Process
This self-paced microlesson introduces staff to the key steps in turning in-person trainings or policy reviews into engaging eLearning experiences. Built in Articulate Storyline 360, it uses clear visuals, narration, and interactive elements to guide learners through the eight stages of development from initial planning to final implementation, while emphasizing that the process is iterative and collaborative. The lesson helps staff understand the time, resources, and decisions involved in creating effective self-paced learning.
Audience:
Professionals across a state agency who are interested in converting training and resources to a self-paced eLearning format.
Responsibilities:
Instruction design
Visual development
Graphic design
Tools Used:
Articulate Storyline 360
The Problem
Across an organization, staff frequently deliver important professional development, policy updates, and training sessions in person. As this agency increased its use of self-paced eLearning, many teams were eager to convert their existing materials into online courses. However, there was often limited understanding of what this process entails, including the time, planning, and technical design needed to create a high-quality, interactive learning experience.
Without a clear understanding of the eLearning development process, teams underestimated the level of collaboration, review, and testing required to ensure courses were accessible, accurate, and engaging for a diverse audience of professionals.
The Solution
To help staff gain a practical understanding of what goes into developing an eLearning course, I created an interactive microlesson.
This short, self-paced module walks staff through each step of designing and developing an eLearning training — from defining learning objectives to reviewing drafts and publishing a final product. It is not a technical tutorial, but a guided overview that shows how learning theory, design strategy, and technical development work together to create effective online learning.
My Process
This project began with a draft script and partial design created by another instructional designer. While the foundation was solid, the design and structure were incomplete and required significant revision to create a cohesive, user-friendly learning experience.
The first iteration closely followed the original design but focused on ensuring visual and functional consistency across all slides and interactions. I standardized the color palette, button styles, and typography to create a unified look and feel throughout the module. After internal review, it became clear that the content and structure could be further refined — there was significant overlap between topics, and the layout made it difficult for users to see the whole process at a glance.
In the next iteration, I streamlined both the script and the user experience. I combined the content for each development step into a single slide, allowing the information about time, roles, and cost to appear together, rather than being spread across multiple screens. This made the flow more intuitive and allowed users to make more precise comparisons between steps.
I also reimagined the course’s main navigation. The original design used a table of square buttons, which implied a linear sequence. I replaced this with a circular graphic to better illustrate that eLearning development is an iterative, cyclical process, where steps are often revisited and refined over time.
After incorporating these changes, the streamlined script and revised visual design were reviewed and approved by the Director of Educational Technology and Instructional Design. Once approved, I finalized the layout and began full development in Articulate Storyline. To complement the course, I created a one-page reference sheet summarizing the eLearning process, available for download from the resource section. This provides staff with quick access to key information in a text-based format.
Visual Design
For this project, my goal was to create a clean and simple design that enhanced the content rather than distracting from it. Because the primary audience for this course is staff who are new to eLearning development, I wanted the visuals to reinforce understanding and provide clarity without unnecessary complexity.
When first introducing the eight steps of the eLearning process, I used a staircase visual to help learners form a clear mental image of progression. Each step’s title appeared on screen in sequence, synchronized with the narration, to create a smooth, guided introduction that supported both visual and auditory learning.
For the navigation menu that follows, I introduced a circular layout to emphasize that eLearning development is cyclical, not linear. This design choice reflects how projects often move through multiple iterations as content is refined, reviewed, and improved. Each button on the circular menu included hover and selected states, allowing users to easily track which steps they had already viewed. These state changes also created the visual effect of an expanding circle, further reinforcing the idea of continuous learning and iteration.
Overall, the visual design balances simplicity and engagement. Each graphic element serves a specific instructional purpose — guiding the learner’s attention, illustrating key concepts, and mirroring the iterative nature of the eLearning process itself.
Full Development
During full development, I applied both instructional design best practices and adult learning principles to transform the streamlined script and visual plan into a cohesive, engaging eLearning experience. Using Articulate Storyline 360, I built the final version of the course with an emphasis on clarity and usability. I decided to keep the navigation open to allow for self-directed exploration. Since the target audience consisted of professionals with limited experience in eLearning design, I structured the module as a micro-lesson with short, focused sections and each step of the process was presented through concise explanations.
The course opened with a staircase animation introducing the eight steps of the eLearning process, providing a clear visual metaphor for progression. Once learners advanced into the core content, the navigation shifted to a circular menu with animation, emphasizing. Interactive elements, such as hover and selected states in the navigation menu, allowed users to track their progress within the open navigation, creating a sense of movement and engagement without overwhelming them.
Throughout development, I conducted multiple review rounds to ensure both technical functionality and instructional alignment. I simplified transitions, refined the pacing of narration, and tested navigation to ensure accessibility and ease of use. The final version of the course was reviewed and approved by the Director of Educational Technology and Instructional Design before launch. Additionally, I developed a one-page downloadable reference sheet summarizing the eight steps, giving staff a quick, text-based guide to refer to as they begin planning their own eLearning projects.
Takeaways
This project reinforced that an effective way to teach about eLearning is to model it. By giving staff a firsthand experience of microlearning and interactivity, the microlesson not only informs, it demonstrates what thoughtful, well-designed online learning feels like.
This microlesson will be a valuable internal orientation tool for agency staff interested in developing online trainings. It will provide a better insight into the time and collaboration needed to move a training online, reinforce the value of early planning and alignment on learning goals, and outline the role of instructional design in making eLearning engaging and effective. By visualizing the process through an interactive format, staff can more realistically plan project timelines, identify where they need support, and set achievable goals for converting materials.