Cyber Shield
I had so much fun with this week's challenge! I created "Cyber Shield" - a cybersecurity awareness course designed as a noir comic book. The concept is simple but impactful: 9 essential cyber safety habits, each told through a single comic panel with a short, punchy caption. Audio narration expands on each tip as the panels are revealed one by one. What I focused on: Dark noir comic book aesthetic with consistent visual style across all panels AI-generated images using ChatGPT for the comic panels Audio narration for each tip, keeping the on-screen text minimal (1-2 words per panel) while the voiceover carries the detail Tools used: Articulate Storyline 360 ChatGPT (image generation) ElevenLabs (voiceover) Pixabay (sound effects) View the demo here. ABOUT ME: I'm an Instructional Designer who loves creating interactive e-learning experiences that are engaging, visual, and fun to build. Connect with me on LinkedIn!Accordion FAQs
What if an accordion FAQ didn't have to look like one? For this week's challenge, I built two completely different takes. One is styled as sticky notes pinned on a corkboard, where each note peels open on click, and one is a chat conversation where tapping a question triggers a typing animation before the bot replies. Both in Storyline 360 on a 9:16 canvas, with a selection screen so you can pick which style to explore. Check it out here! Would love to connect on LinkedIn and exchange ideas!Valentine's Express
Valentine's Express is an interactive experience where users navigate personality-based scenarios and craft notes and love letters. They choose a personality type, receive personalized feedback, and earn a Romance Expert certificate. This entry doubles as my submission for both the E-Learning Valentine Challenge AND the Code Block Build-a-thon. It was my first time building with code blocks in Rise, and I'm amazed at what's possible. Ready to express your heart? Check it out here! 💕Learning a foreign language
Learning a language is not always easy, but comics often help to better understand certain expressions in context. As I have been learning Italian for a few months, I thought that the theme of this challenge would be perfect to showcase an example. Arrivederci e divertitevi ! Tools used : Articulate Storyline 360 (design, image generation) Poe (image generation, prompt for image generation in Storyline) ElevenLabs (italian translation for words as grandfather, mother, etc.) Here is the demo.
Case: Operation Dopamine - A Noir Comic Mystery
Hi E-Learning Heroes! 👋 For this week's Comic Book-Inspired Challenge, I decided to go full "Noir Detective" graphic novel style. 🕵️♂️✨ In my project, "Case: Operation Dopamine", the learner steps into the shoes of a private investigator exploring a ransacked laboratory. The mission? To find the 6 stolen components of Gamification (such as Engagement, Customer Lifetime Value, and Emotional Connection) and restore color to a black-and-white corporate world. 🔍 Play the interactive demo here: > Play Operation Dopamine I had so much fun blending storytelling, visual design, and instructional concepts into this one. I would love to hear your thoughts and feedback!The Phish That Got Away!
This is my first time participating in a challenge, and I had a lot of fun with this topic. For my entry, I created a phishing example that spiraled into a little comic adventure—complete with a clueless employee, a suspiciously enthusiastic scammer, and a few red flags waving in the background. The concept is very simple, but I had a blast creating this. Tools that I used: Articulate Storyline ChatGPT: Some image creation Pixabay: Sound effects and music View example here.Challenge #544: Brand Storytelling Accordion (Powered by AI & JS!) 🚀
Hi everyone! 👋 Here is my entry for this week's Accordion Interactions challenge. For the content, I decided to focus on Brand Storytelling and how brands communicate through stories rather than just hard data. I thought it would be a valuable mini-lesson for anyone interested in marketing or instructional design. But the most exciting part for me was the behind-the-scenes creation process! Yesterday (March 24th), I had the opportunity to attend the "10 AI Assistant Capabilities You’re Missing & 10 Tips to Master them" event by David Anderson, which discussed the implementation of the AI Assistant in Articulate. Around the same time, I watched an excellent video tutorial by Learning Dojo titled "Building a Sliding Accordion with New Learning Prompts Tool". I felt so inspired that I decided to test out the prompts from prompts.learningdojo.app mentioned in the video, implementing them directly into the Articulate Storyline AI Assistant. To my surprise, it worked wonderfully! 🤯 The AI generated the structure for a fully functional HTML/CSS/JS accordion. I simply placed it inside an "Execute JavaScript" trigger when the timeline starts on a blank slide. Then, from my side as an instructional designer, I only had to tweak the CSS styles (giving it a clean design with a deep blue/purple gradient) and make a few minor adjustments to the code to structure the content into two levels and ensure the text fit perfectly. I think this is a fantastic tool and workflow for adding interactive and custom UI elements to our courses. AI keeps surprising me every day! You can check out my interaction here: Brand Storytelling Accordion Hope you like it! I'd love to read your feedback.Designing for Everyone
Link to course: Designing for Everyone: Accessibility in Design is a Way to Express Care This was more challenging (learning opportunities) than expected for a number of reasons. Test revealed just how much more I have to learn. I look forward to feedback on ways to make it better and more accessible. I designed this experience to be useable with a keyboard and with a screen reader to align with the perceivable and operable principles of POUR (Perceivable, Operable, Understandable, Robust), established by the Web Content Accessibility Guidelines (WCAG). It is a work in progress, not finished, because I learned a lot that needs to be considered and done for better accessibility. What was accomplished No content relies on color alone, animation alone, or a mouse alone. The slide content includes: Interactive elements with real controls Messages are available as text Focus Order follows visual layout (use the info icon on each slide to view the Focus Order) Accessibility is more than checking the boxes. It is about considering whether your design still works when the assumptions about users are removed. It is about Designing for Everyone. The Goal This project was designed to show how accessibility performs in the real world. The project aims to demonstrate outcomes, the same message, experienced through different access needs. It focuses on peoples’ experience with digital content. The Problem Many “accessible” examples stop at checklists. Here the focus is on how design decisions affect real users. This experience intentionally attempts to show both failure states and equivalent, accessible solutions. Key Design Decisions Screen reader friendly structure: Reading order is manually controlled. The message is real text. Alt text is used only when it adds meaning, decorative visuals are marked as decorative. Keyboard only interaction: Every interactive element is reachable using Tab, Enter, and Space. Visible focus states are always present. If content can’t be experienced without a mouse, we revisit before releasing.Love or Red Flag – Valentine’s Edition 💘🚩
Test your instincts in this quick and playful February 14th challenge! Read each scenario and decide: Is it a swoon‑worthy green light… or a total red flag? Perfect for a lighthearted break, this mini‑game blends humor, relationships, and a touch of Valentine’s Day charm. See how your choices stack up—and maybe learn something new about what makes a perfect match! Love or Red Flag?
