This xAPI-enabled eLearning mock project is designed to help new team leads and project coordinators facilitate effective virtual meetings. The learner experiences several scenarios in a real-life, low-risk simulation; ultimately learning what actions lead to a successful meeting.
Audience: Team Leads, Project Associates, and Project Coordinators
Responsibilities: Instructional Design, eLearning Development, Action Mapping (Needs Analysis), Script/Storyboard, Graphic Design, Animation, xAPI & JavaScript Implementation
Tools Used: Articulate Storyline 360, Vyond, Adobe XD, Adobe Illustrator, Adobe Premiere Pro, Veracity LRS, Visual Studio Code, JSHint, MindMeister, Google Docs
The Problem
An international B2B service company noticed that business was declining due to ineffective stakeholder communications. In many cases, because of a virtual organizational structure, it was a challenge to get people together and manage virtual meetings.
Oftentimes, the meetings were unplanned, mismanaged and unproductive, resulting in dry, unsatisfied stakeholders, which included international teams, clients, and investors.
The Solution
After careful analysis and speaking with project managers, I determined that the root cause of the problem was down to the lack of meeting facilitation knowledge and skills.
Since the company often hired new team leads and project coordinators, they would go on to facilitate project meetings without sufficient awareness of the soft skills needed to facilitate an effective virtual meeting.
To solve this performance problem, I proposed a scenario-based eLearning course which would help the learners experience real-life scenarios and the consequences of their actions in a risk-free environment. This would help the learner bridge the knowledge and skill gap to run effective meetings, ultimately resulting in improved stakeholder communications and generating business value.
Process
Right from the kickoff, I knew this was going to be an iterative process that would require constant feedback, testing, and recursive tweaks. Guided by the successive approximation model (SAM), I started with rough prototypes and iterated on each step until I was able to develop a polished final version of the product.
I implemented the following steps to design and develop this project:
Creating the action map with SMEs
Writing the text-based storyboard
Designing the visual mockups
Developing the prototype
Getting feedback, testing, and reviewing
Polishing with iterative changes
xAPI implementation
Though structured in steps, it was a very fluid process with all the processes interlinked with each other.
Action Mapping
To target the core of the problem, I organized a kickoff meeting with the project manager, acting as an SME, along with key stakeholders to address the actual pain points and actions needed to overcome the knowledge and skill gap.
Using Cathy Moore’s action mapping process, I broke down a measurable learning objective stem that was in alignment with business goals. With input from the SME, I identified what actions people need to do to fulfill that objective and why they are not doing it.
From there, we prioritized five actions that contributed the most to the goal and were often performed incorrectly. Prioritizing reduces learners’ cognitive load and helps them retain the most important areas with respect to the learning goal. These five actions served as the focus of the learning experience content.
Action mapping is a vital aspect of my design process as it helps me stay rooted without distractions – on a learning objective that serves the learner and also aligns with the high-level goals.
Text-based Storyboard
As I moved into writing a storyboard, I began visualizing and scripting scenarios for each of the five high-priority actions identified in the action map. I presented each “correct” action with common mistakes as distractors and the learner would have to make a decision and experience the consequences of the decision. I worked with the SME to ensure that the consequences were authentic and designed to a real-world standard.
I drew inspiration from Gagne’s Nine Events of Instruction to construct the learning experience by establishing early attention, setting expectations, providing guidance, and giving feedback at appropriate times.
The storyboard served as the body of the product and proved as a guide to receive feedback in the initial stages of design, which was crucial because once we moved into development, changing the body would influence all other areas of the project.
Using a text-based storyboard helped me communicate my mental vision and bring everyone on the same page to get approval. I used Google Docs for the ease of collaboration and organization.
Visual Mockups
After getting approval on the storyboard, the next phase was to bring the vision to life. I used Adobe XD to generate visual design mockups, which was the most exciting part of the design process.
My main objective with the visuals was to tell the story in a simple and distraction-free experience. To ensure that, I kept slide transitions to the minimum and used blur effects using whenever there was a need for text on the screen. This helps the learner to have an immersive experience as opposed to transitioning in and out of slides.
I came up with a colour palette with soft saturations and mild hues for visual comfort and a clean look. From there, using best practices on proximity, alignment, contrast, and typography, I ensured that the design was foundationally strong.
After multiple iterations, I arrived at a design that was minimalistic, aesthetic, and most importantly, functional.
Full Development
Up until this stage, I had everything laid out and approved. From here, I jumped into Articulate Storyline 360 to put all the pieces together. This was the most time-consuming, yet my favourite aspect of the whole project.
I designed and iterated all the visuals, animations, sound effects, transition effects, variables, and triggers until I was confident with the flow and functionality of the product. I sought feedback from my peers and the learning experience community.
While many of the users applauded the programming of the feedback report that was featured at the end, some pointed out additional improvements to enhance the learning experience. For example, one of my peers suggested adding a dedicated slide up front, to guide the learners to make use of the “Ask Mentor” button.
After rigorous testing and detailing, I was able to finalize a learning experience that was aesthetic, immersive, and most importantly, practical.
Features
Feedback Report
To conclude the experience, the user gets a high-level feedback report that records all the decisions the user made throughout the scenario and offers feedback for each good and bad decision for the user to review on a single screen.
Immersive Experience
The experience is designed in such a way that the user stays immersed in the storyline without losing attention. I employed specially curated blur-in and blur-out effects so that the directive text and animations remain cohesive. On a slide with a high-pressure decision, I placed a flashing red border and heart-beating sound effects to have a realistic feeling.
Sound-Effects
There are subtle sound effects throughout the scenario for auditory reinforcement of positive and negative consequences.
Immediate Feedback
The user gets immediate feedback on their decisions by experiencing the consequences of the decision. To solidify learning, they are then directed back to the decision point where they made a wrong decision and have a chance to correct their actions.
xAPI, JavaScript, & the LRS
I was very curious about how the user interactions are playing out with the learning experience. Are users having any troubles in the course? Are they quitting the course midway? How many correct choices do they make? How many times do they use the mentor prompts?
These questions were vital to learn about the users and serving them a learner-centered experience. So, I implemented some xAPI modifications to this project.
I used Veracity Learning Record Store (LRS) to store the user data that was extracted from the course. Each user action is tied to the user’s name, which is captured at the beginning of the course.
The following data was collected and sent to the LRS:
Audio-check at the beginning: This helps to validate that the user experienced the full experience with all the sound effects.
Questions attempted: Tracking the question attempts helps to track if the user dropped the course midway and what section of the course made the user quit.
Correct and incorrect choices: To quantify the user’s understanding of the content, tracking choices was important.
Mentor prompts used: The program also tracks every time the user uses a mentor prompt. This builds a picture of the user’s thought process on each question.
Completion score: The gathered data also gives a raw completion score (how many correct choices) and a scaled score (how many correct choices with respect to the total number of choices) at the end.
This data will help get a deeper insight into the user experience and can be used to further improve the learning experience for the user.
More than anything the whole process of crafting the javascript was exhilarating. The meticulous detailing of the code, the little victories every time a logic executes successfully, and the error hunting when something does not work.
I had a ton of fun learning and implementing the xAPI functionality. I am truly intrigued by the possibilities that could be achieved with this, and I can’t wait to take this a step further.
Results and Reflection
The project received several accolades from my peers and the online instructional design community. Users commended the feedback report and the subtle sound effects. The main feedback was that the project was innovative, engaging, and user-friendly.
The process of creating this project has provided me with several key takeaways. I take these lessons with me as I continue to upskill and work on more projects to showcase my skills.
Repetitive feedback: Throughout the project, getting repetitive feedback and rolling in iterations is what kept the design and development process smooth and efficient. I have learned that our minds work best with iterative feedback and revisions when it comes to creative aspects of the project.
The learning objective: On multiple occasions, my creative muscles were tempted to run wild. However, it was crucial for me to stick to the learning objective that was identified at the very beginning.
This is where the action map helped me root my ideas and thought chains onto the learning objective stem. It was also a huge advantage to get feedback on each step to ensure that I was focused on the learning objective and a learner-centred approach to my designs.
Rapid prototyping: To support the process of repetitive feedback, it is essential to communicate ideas in a cohesive and coherent manner. For that, the visual mockups and the storyboard proved to be great tools for rapid prototyping. The ease of collaboration that comes with Adobe XD and Google Docs was the cherry on the cake.
Being creative with technology: There were several times when I would hit a roadblock with no way forward. But, coming from an engineering mindset, problem-solving came naturally to me.
One thing I can say for sure is that there is always a solution, especially with Articulate Storyline 360 with its buttons, variables, and triggering capabilities. The possibilities in Storyline are just limitless.
I also learned that different forms of technology can be combined in so many different ways. For example, I used Adobe Premiere Pro in combination with Vyond to create quick blur-out transitions; and Adobe XD paired with Adobe Illustrator to generate curated visual assets.