RISKY RICK
Click here to check it out. For this OSHA eLearning Challenge, I wanted to move away from a traditional “click-next” compliance experience and explore a more cinematic, behaviour-driven approach to warehouse safety training. Rather than focusing purely on rules and hazard identification, I built the concept around a character called “Risky Rick”, an experienced warehouse operative whose confidence and familiarity with the environment lead to unsafe decisions and shortcuts. The experience begins with a fast-paced montage sequence showing Rick carrying out increasingly risky behaviours across a warehouse setting, including: overreaching from a ladder dropping boxes using a forklift without checking the environment properly creating trip hazards with pallet wrap mixing chemicals carelessly The intention was to make the learner feel like an observer watching unsafe behaviour escalate in real time, rather than simply being told what not to do. After the montage, the experience rewinds and breaks each scenario down using freeze-frame analysis interactions. Instead of using standard multiple-choice questions, I focused on three reflective lenses: OBSERVE: the behaviour or warning sign INTERVENE: the point where action should happen CULTURE SIGNAL: what the behaviour suggests about wider workplace norms and accepted risk Visually, I leaned heavily into a gritty, cinematic warehouse style using bold typography, industrial textures, high-contrast colour palettes, and dynamic OSHA-inspired graphics. The “Risky Rick” branding was designed to feel more like a behavioural safety campaign than a standard training course. From an instructional design perspective, the project explores how storytelling, character-driven scenarios, rewind analysis, and progressive reflection can create a more immersive and memorable learning experience around workplace safety and risk awareness. Click here to check it out.OSHA Course Starter Template
The safety slides got a glow-up: OSHA Course Starter Template Safety training doesn't have to be a snooze-fest. This is a simple starter pack built around a character-driven illustration theme. The source file is available for download on the Resources tab. Grab it, riff on it, make it yours. OSHA turning 55 felt like the right moment to sit this one out. #ELHChallengeThe Last Impression
Check it out here! First impressions get you in the room. But what happens after you leave? Most candidates send a thank-you email and hope for the best. This entry makes the thank-you the portfolio piece. I may have made a guest appearance in a hiring manager's inbox for this one. The experience opens as an email mockup, unfolds into a four-tab interactive, and walks the hiring manager through the conversation, a microlearning sample, the design thinking, and a warm close. Because first impressions get you in the room. The last impression gets you the offer. If you turn every touchpoint into a design opportunity, let's connect — Jayashree RaviThe Cost of Ignoring Safety Signs
Created an interactive scenario-based quiz: “The Cost of Ignoring Safety Signs” ⚠️ The course uses AI-generated visuals to build realistic workplace scenarios that help learners understand the real consequences of ignoring safety warnings. A quick, engaging, and impactful learning experience focused on improving workplace safety awareness. Demo: https://www.sarkgcreation.com/elc552/story.htmlRace Back To Base
Hello! Can you make it back to base before the sandstorm hits? Play now. The thing I really love about working with vectors is how scalable they are. Even the tiniest details remain crystal clear when you scale them up. I built this demo using elements from a single vector pack created by Macrovector on Freepik. To create the illusion of movement, I used PowerPoint to recolour the wheels on the Mars Rover vehicle, and isolated parts of the tyre track. I then made a GIF using these shapes. And then placed the GIF over the modified SVG image in Storyline. This allowed me to turn the motion on/off using state changes. Pretty much everything that moves in this demo is a GIF, tucked away in a state change until it's needed. Having access to high-quality, easy-to-use graphics allowed me to focus on the instructional elements and the scoring mechanic. The 'wronger' your answer, the quicker your oxygen will deplete. Even if you reach the third question, if your oxygen hits zero, you will have to start again. This is controlled by JavaScript, which adjusts the value of the variable by a set amount when triggered. var player = GetPlayer(); var penalty = 35; // Change to 45 or 55 depending on the button var battery = player.GetVar("Battery"); var elapsed = 0; var interval = 100; var steps = 10000 / interval; var amountPerStep = penalty / steps; var timer = setInterval(function() { elapsed++; battery = Math.max(0, battery - amountPerStep); if (battery === 0) { player.SetVar("Battery", 0); clearInterval(timer); } else if (elapsed >= steps) { player.SetVar("Battery", Math.round(battery)); clearInterval(timer); } else { player.SetVar("Battery", Math.round(battery)); } }, interval); The eagle-eyed among you will have also noticed that when this demo runs on a desktop, the closed captions that accompany the narration have been repositioned and have a slight 'glitch' effect as they appear. This is also achieved with JavaScript. Despite the recent improvements to the closed caption feature in Storyline, sometimes I prefer to manually override the position of the captions to better suit my layout. This code only reliably works in desktop view, though. const mobileView = window.innerWidth < 768 || window.innerHeight < 500; var storyW = 1280; var storyH = 720; var boxLeft = 850; var boxTop = 430; var boxWidth = 350; var boxHeight = 200; var captionFontSize = 20; function positionCaptions() { if (mobileView === true) { console.log("Mobile view detected - caption positioning skipped."); return; } var leftPct = (boxLeft / storyW * 100).toFixed(2) + "%"; var topPct = (boxTop / storyH * 100).toFixed(2) + "%"; var widthPct = (boxWidth / storyW * 100).toFixed(2) + "%"; const css = ` .caption-container { position: absolute !important; transform: none !important; } .caption { position: absolute !important; left: ${leftPct} !important; top: ${topPct} !important; width: ${widthPct} !important; font-size: ${captionFontSize}pt !important; transform: none !important; z-index: 1000 !important; } @keyframes glitchstutter { 0% { opacity: 0; transform: translate(-10px, 4px) skewX(-8deg); filter: blur(6px); } 8% { opacity: 0.8; transform: translate( 10px, -4px) skewX( 9deg); filter: blur(3px); } 12% { opacity: 0; transform: translate(-8px, 2px) skewX(-6deg); filter: blur(7px); } 18% { opacity: 0.9; transform: translate( 8px, 3px) skewX( 6deg); filter: blur(1px); } 22% { opacity: 0.1; transform: translate(-12px, -2px) skewX(-10deg); filter: blur(5px); } 28% { opacity: 1; transform: translate( 6px, 0px) skewX( 4deg); filter: blur(1px); } 35% { opacity: 0.3; transform: translate(-6px, 4px) skewX(-6deg); filter: blur(3px); } 42% { opacity: 1; transform: translate( 4px, -2px) skewX( 3deg); filter: blur(1px); } 50% { opacity: 0.6; transform: translate(-3px, 1px) skewX(-2deg); filter: blur(1px); } 60% { opacity: 1; transform: translate( 2px, 0px) skewX( 1deg); filter: blur(0px); } 75% { opacity: 0.95; transform: translate(-1px, 0px) skewX( 0deg); filter: blur(0px); } 100% { opacity: 1; transform: translate( 0px, 0px) skewX( 0deg); filter: blur(0px); } } .caption-glitch { animation: glitchstutter 0.6s ease-out forwards !important; } `; let style = document.getElementById('custom-caption-style'); if (!style) { style = document.createElement('style'); style.id = 'custom-caption-style'; document.head.appendChild(style); } style.textContent = css; var capEl = document.querySelector('.caption'); if (capEl) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { capEl.classList.remove('caption-glitch'); void capEl.offsetWidth; capEl.classList.add('caption-glitch'); }); }); observer.observe(capEl, { childList: true, subtree: true, characterData: true }); capEl.classList.add('caption-glitch'); } console.log(`Captions positioned at left:${leftPct} top:${topPct} font:${captionFontSize}pt`); } document.addEventListener('DOMContentLoaded', positionCaptions); positionCaptions(); I had a lot of fun making this. It still surprises how much mileage you can get from a small number of visual assets. If you have any more questions about this demo, please ask.
Copy The File
Hello! This is a twist on the classic 'tab interaction that looks like a file of papers', which uses a Drag and Drop interaction instead of traditional Click To Reveal. But I've built in fallback controls to make it more accesible, of course. This was also a chance to play around with Rise's new AI Avatar feature, and extend that footage using Google Flow to create the two 'cut scenes' that bookend this experience. Check it out here: Copy The File | EngageBrainTrain.com
Using AI Avatars to Enhance Immersive Learning - Inside Tesla's World
This challenge was an opportunity to explore how AI avatars can be used to enhance engagement within a learning experience, not by over-guiding the learner, but by setting the tone and creating a stronger sense of immersion. Rather than using a traditional narrator or static introduction, I wanted to introduce the experience through a character. To achieve this, I first generated an expressive avatar. This allowed me to create a consistent visual identity that felt aligned with the theme of Tesla and the overall environment. The avatar is used intentionally and sparingly to introduce the experience and reappear at key moments while the learner remains in control of the exploration. This approach helps maintain immersion without overwhelming the experience. The aim was to demonstrate how AI-generated avatars can be used in a simple, practical way within tools like Rise and Storyline Check out what I created in response to this week's challenge by clicking here. to elevate storytelling, create presence, and make digital learning feel more human and engaging.The unlikely return of Jobsworth
Hello! For this week's challenge, I used the 'Upload Character' tool in the new AI Avatar feature to resurrect Jobsworth, my robotic compliance officer from Challenge #412. It took only a few minutes to generate the voiceover and video. I have to say, the results are pretty impressive! Looks like my days of animating characters using state changes might be numbered. Check it out for yourself here: The unlikely return of Jobsworth
OPERATION CIPHER - Can you crack the code before time runs out?
This week’s eLearning challenge was to create something using desktop folder tabs… so naturally I turned it into a covert infiltration mission. Check out what I created by clicking this link! OPERATION CIPHER Stolen intelligence is hidden inside a secure office. Learners must infiltrate the location, search the filing cabinet, locate the Operation Cipher folder, uncover hidden clues and crack the 3-number safe code before the alarm system activates. The entire experience was built in Articulate Storyline 360 using: • Interactive folder tab mechanics • A cinematic countdown timer • Layer-based scene progression • Graphic novel-inspired visual animations created using AI • First-person POV immersion • Safe code logic and trigger systems Rather than feeling like traditional eLearning, I wanted this to feel more like stepping into an interactive espionage experience. Can you crack the code before time runs out? Try it out! Check out what I created by clicking the link!
