KELLY RUSSELL
OVERVIEW
xAPI-enabled scenario-based training, developed from the ground up, to complement instructor-led sessions. Focused on ethics and boundaries for peer support workers in the behavioral healthcare space. Crafted in Articulate Storyline. Includes custom graphics and animation, JavaScript, HTML, and CSS.
Audience: Certified Peer Support Specialists new to the profession and veteran CPSS workers maintaining certification.
Contribution: Full instructional design and learning experience development lifecycle.
Tools Used: Articulate Storyline 360, Adobe Illustrator, Amazon Web Services, Canva, Figma, PowerPoint, Storyset, Talent LMS, Veracity LRS, Visual Studio Code.
PROCESS
NEEDS ANALYSIS
The goal for this ILT accompaniment was two-fold: to allow participants the opportunity to practice navigating realistic scenarios in a low-stakes environment before commencing work in the field and to assess the efficacy of the instructor-led training sessions.
​
Certified Peer Support Specialists are persons living in recovery from mental illness and/or substance use disorder trained to provide specialized support to others who can benefit from their lived experiences. They may work in a volunteer or professional capacity, but the criteria for certification and continuing education are the same. The client-SME for this training stressed the unique and personal nature of a CPSS's duties and wanted to include life-like scenarios with plausible consequences to drive home the importance of maintaining healthy boundaries as a peer support worker. As such, I composed a believable narrative for the training with a gamification angle to further encourage learner buy-in.
​
Additional research was conducted to verify the fidelity of the proposed scenarios and tie them to SAMHSA's nationally-recognized professional standards.
VISUAL DESIGN
I firmly believe the visuals of any project are an integral part of the learning experience. The serious nature of the content in this training was carefully considered during the visual design process. I recognized that navigating the boundaries scenarios could be stressful for those with lived experience. I sought to balance the intensity of the subject matter with a calm, inviting atmosphere. My solution was a green-hued, monochromatic color scheme paired with retro-inspired graphics.
The client was presented with the style board shown above and selected the more subdued of the two choices. During the development process, we made adjustments to the fonts and colors to increase contrast and added subtle motion graphics to the slide backgrounds to create visual interest.
STORYBOARDING
I used Figma's whiteboard application Figjam to develop a visual storyboard. Figjam's interface is simple to navigate and offers sticky-note-style interactivity for client suggestions, questions, and pain-points. I elected to include graphics from Storyset within each panel so that the transition from storyboard → prototype → deliverable would be as efficient as possible. It allowed the client to view selected visuals early on and saved me from producing multiple sets of images throughout the process. Once the storyboard was complete and approved, I could grab the artifacts I'd already saved and insert them quickly into the prototype.
.png)
.png)
PROTOTYPING
I built the prototype in Storyline itself--another time-saving measure. Much of the iteration revolved around aesthetics. I wanted to create visually appealing slides with a nice flow that kept the learner's attention. The first prototype was attractive but largely static. I incorporated more animation--text and text boxes, improved transitions--but was unhappy with the colors in their compliant format as well as the formatting of the slides. I knew I could make the presentation even more dynamic without sacrificing the clean, retro feel. I finally incorporated a handful of subtle motion graphic backgrounds that added visual interest without interfering with the layout of the slides. I also added slides to the introduction and end for clarity and continuity.
FULL DEVELOPMENT
Once the visual prototype was complete, I began setting motion paths and triggers, incorporating animation, defining variables, and writing custom code. I also duplicated selected slides to improve transitions forward and backward, added interactivity with a dial and slider, and created lightbox pop-ups for the mentor function.
.png)
The two most involved aspects of this project's full development were the implementation of xAPI protocols to track learner data and a closing screen featuring a live I.D. badge photo to culminate the narrative. I tackled the final I.D. Badge first.
​
Initially, my plan was to use JSON directly in Storyline, borrowing from code suggested in an E-Learning Heroes message board. Unfortunately, the code wasn't operable as written and I have limited experience de-bugging JSON in Storyline's out-of-the-box editor. My next approach was to write a snippet of JavaScript in Visual Studio Code that would execute in Storyline upon a designated trigger. This did work to open the user's webcam and start a live stream, but it utilized the entire slide area--my vision was for the user's face to appear within the I.D. badge. I suspected that there must be a way to open the webcam feed inside a custom frame or on top of an existing image, but I wasn't sure Storyline could accommodate that kind of functionality and the level of JavaScript coding required to make that happen was beyond the scope of my abilities and timeframe at that moment.
My workaround was building a very simple website using HTML, CSS, and JavaScript, hosting it locally, and embedding it as a Web Object within the final slide. I edited an I.D. badge to have a transparent interior frame and positioned the graphic over the Web Object. I then set a trigger to release confetti and start the camera feed automatically on the start of the slide's timeline and included a button to print the slide as a certificate of completion, if desired.
​
As for xAPI enablement, I used Storyline's newer built-in statement functionality to collect data on each user's learning experience including:
-
name and date;
-
navigation forward and backward between slides;
-
pass/fail instances for each scenario;
-
whether the user accessed the mentor slide(s);
-
whether the user completed the training.
​
I published the finished course to TalentLMS and set the client up with a Learning Record Store in VeracityLRS so that they could easily track and visualize user information and interaction with the training. A demo of the training is also hosted via Amazon Web Services and linked below.
Please click the button below to view a demo of the final product. It may take a moment to load, depending on the speed of your internet connection.
REFLECTION
I deeply enjoyed this project. The topic and objectives checked all the criteria for my favorite kind of training to produce: meaningful content, creative freedom, and new challenges. The opportunity to incorporate xAPI enablement was especially exciting--I'm a huge data nerd. I'm very passionate about the power of data and the story it tells us, not only about the learner, but the quality of the learning experience itself. The onset of xAPI, I believe, is introducing a new era of comprehensive assessment that can help instructional designers and clients alike grow right alongside their intended audience.
​
The trial and error of developing the final I.D. Badge slide was another challenge I really enjoyed. I knew it was possible and was determined to make it happen. When it finally came together and functioned just as I'd envisioned, I was ecstatic. I look forward to finding more ways to incorporate that level of interactivity in future projects.