Hand-picked Demos
Design and visual communication are passions that has greatly influenced my instructional design approach. The process of breaking down complex ideas into simple visual representations to help learners comprehension is a task I find rewarding. Because of my extensive background in media development, I'm constantly looking at new technologies that allow me to push the envelope to incorporate new ways to engage learners.
I love instructional design because it allows me to continue to embrace my design and development skills, pushing projects to the next level with graphic design, animation and code-based interactions to create truly dynamic and visually appealing learning resources. Below are some examples of how I’ve used the principals of multimedia learning and the latest technologies to engage learners.
Storyline & Saved Data Across Project
For a recent project, I wanted to invest the learner in the training by allowing them to create a custom avatar that would populate throughout the Storyline project. It was important to me that the avatar had a wide range of choices, reflecting the company’s commitment to diversity and inclusion. The avatar would require a front and back view, further complicating the problem. Due to complexity, Storyline triggers and states was not a viable solution.
Using inspiration from paper dolls, I created a variety of hair, skin tones, shirts, pants, and shoes inside an Adobe Animate canvas project. User selections are saved in the browsers session data and are used to populate every instance of the avatar in the Storyline project. In this demo version, you will see the selections you make to the avatar will be reflected on the next slide!
This is interactive. Give it a try!
HTML5 Canvas Interactive Simulation
During my time at Sonalysts, I developed technical training for the military, targeting skills ranging from basic electronics to troubleshooting mechanical and software systems in aircraft and submarines. While I cannot show this work due to confidentiality agreements, here is a simplified example of interactivity I developed to help new cadets learn basic electricity concepts. The exercise allows for exploration, while scaffolding the experience with hints and step by step direction.
In this example, the learner tests the points on the circuit to determine which component is faulty. After they replace the correct component, the resistance values are corrected. When the learner exits the troubleshooting environment and tests the circuit, the lightbulb turns on and the simulation ends.
This is interactive. Give it a try!
This is interactive. Give it a try!
Storyline & web objects
While rapid e-learning development software such as Storyline and Captivate are fundamental in today’s fast pace training environment, I find the ‘in-the-box’ interactions these programs provide to be limited. For those of us who like to push the boundaries, web objects can be used to enhance the learner experience while still reporting the learners progress to the LMS inside Storyline. For these interactions, I am triggering Storyline Player variables based on whether the learner is correct or incorrect. Inside Storyline, I have triggers on those variables to show the feedback layer.
For the first interaction, I’ve taken the concept of a standard drag and drop and added animation. Each drag is associated with an animation that visualizes the step being dragged. For the second interaction, I’ve programmed a cloning drag that allows for the same answer to be applicable for multiple drops.
Storyline & Gamification
Keeping learners engaged can be a challenge. For a recent project, I created a game out of an important, yet dry process for a lesson in a department orientation curriculum. I chunked the process into three stages. As the learner moves though each level, they answer questions to assess their knowledge. In Storyline, I created a counter for each wrong answer that changes the state of the students health counter. If they run out of health, they return to the game board and the student 'slides' back to the beginning. If they answer correctly, the student moves to the next question.
Skill-based Learning: OOP Fundamentals
Games are an experience most young adults and even seasoned adults can relate to. Using this prior knowledge, OOP Fundamentals presents the basics of object-oriented programming to the learner from the perspective of building a customizable character for a quest game. Instead of adhering to the traditional approach of using a specific programming language to teach OOP, the concepts are presented in general terms that explain manipulating classes to change the appearance and behaviors of a character.
During the design phase of this project, I spent a significant amount of time creating the elements that would remain consistent throughout the resource. I illustrated the map representing the game environment, and the different states of each character that would be used in the videos and interactions. The goal was to create a unified theme throughout the 4 topics that would build on one another.
Influenced by Richard Mayer’s work on social cues, the learner is guided though each topic by the pedagogical agent, Steve. Steve uses a casual approach to speak to the learners using a real human voice instead of a robotic one. To create a human-like appearance that leads to deeper cognitive processing for the learner, the narration is synced to his various mouth states, he randomly blinks and has facial expressions, and he uses his hands, eye movements and props to cue the learner to important elements of the video.
For more information about the design decisions, have a look at the research based theoretical justifications of this project.
Interactivity with Tulmut hype
The learner is introduced to each lesson of OOP Fundamentals with a video narrated by the pedagogical agent, Steve. Once the learner has viewed the learning material from the video, they have the opportunity to apply the knowledge with an interactive activity.
This activity is taken from the Subclasses lesson. The learner selects a base class character. As instructed in the video lesson, the learner then uses the base class attributes to customize the character with subclass attributes.
The interaction is built using Tulmut Hype and embedded in the HTML document.
This is interactive. Give it a try!
Skill-based Learning: All Things Adobe
Throughout my career, I've been tasked with training my team and customers on Adobe software, including Illustrator, Photoshop, AfterEffects, Premiere Pro, Animate, Captivate and Character Animator. I'm passionate about developing in-person sessions that are engaging and hands-on, and providing digital learning-aids to help break down complex tools to help my learners grasp advanced technical concepts.
Technical documentation
Software Simulation
Quick-Start
guide
Instructor-led Workshop
Tutorials
Specialized Learning
I was hired by the OBGProject early in 2017 to design and develop learning modules for doctors specializing in women's health. The objective was to develop concise, effective short modules for learners to earn Continuing Medical Education (CME) credits and stay current with the latest advances in women’s health.
The nature of 'on the go' learning required access to the content from mobile phones and tablets. I developed templates that were responsive to different screen sizes and created media with html5 technology to be accessible from a variety of browsers and mobile operating systems.
I brought to the OBGProject instructional design team storyboarding processes that I've learned from working in the learning industry for many years, creating efficient collaboration between myself, the doctors and editor. This streamlined the development process and made the testing phase less prone to content related errors. My largest takeaway from working on this project is that it takes collaboration with many to develop effective learning. Although I am not an expert in medical practices of any kind, I was able to work with those who are to organize the content in a way that maximized comprehension for the learner.
 |  |  |  |  |  |  |
|---|
Here are some examples of interactive animations that were pulled from Captivate modules (with permission) I've completed for the OBGProject. They highlight my ability to push the standard affordances of rapid prototyping software like Captivate and Storyline to include immersive animation and interactions.
For this project, I created the animations with HTML5 technologies (Adobe Animate and Tulmut Hype) and used Captivate's capabilities with custom interactions and knowledge checks.
These examples are interactive. Give it a try!
Projects
Below are products that I have led the design and development on for comprehensive curriculums and individualized support for departmental learning aids. Please note that where applicable, sensitive information (including narration) has been removed to respect the privacy of clients.
Select a product type from the topics below.
